Navigatie maken met Bootstrap

Om een goede start te maken met Bootstrap, bouwen we eerst een navigatiebar in Bootstrap.

Ga naar: Navbar · Bootstrap v5.2 (getbootstrap.com)

Scroll naar 'Supported Content'. Daar zie je verschillende classnames die je kan gebruiken voor de navigatie.

Meest gebruikte navigation classes voor een Bootstrap navigatie

Zo ziet een navigatie eruit in Bootsatrap:

image-1662966077287.png

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Dit is de code van de navigatie. En nu denk je van: zo veel code?! Maar als we alleen de belangrijkste stukjes code meenemen dan valt het wel mee. 

Opdracht: Navigatie

  1. Kopieer de code van de Bootstrap Navigatie.
  2. Zoals op dat plaatje te zien, heb je een search bar met een search knopje. Dat hebben we niet nodig. Dus verwijder dat stukje uit de code.
  3. De dropdown hebben we ook niet nodig. Verwijder dat stukje code.
  4. De disabled link hebben we ook niet nodig. Ook dat stukje code verwijderen.

Zoals je ziet is de code nu veel kleiner geworden. Nu gaan we kijken wat er allemaal in zit:

<a class="navbar-brand" href="#">Navbar</a> is de plek waar jouw (bedrijfs)logo moet staan.

Je ziet in de class attribuut class="navbar-brand". Deze classnaam is van Bootstrap. Deze class zorgt ervoor dat de opmaak van jouw bedrijfsnaam of logo goed in de navigatie past.

Navbar toggler
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

Dit stukje code is alleen op het scherm te zien als je op mobiel zit. Op de mobiel zie je dan een wafeltje op het scherm. Als je erop klikt zie je jouw navigatie items.

De <span> in de <button> tag is het wafeltje.

Navbar items

Het laatste stukje code zie je de items van de navigatie. Zoals je ziet heb je een Home item en een Link item. 

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
      </ul>
    </div>

Opdracht: voeg extra navbar items toe.

Wat lever je in?
  1. Screenshot van jouw code met jouw persoonlijke navbar




Revision #1
Created 27 October 2022 09:15:54 by Max
Updated 27 October 2022 09:15:54 by Max