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

• .navbar-brand gebruik je voor je logo of bedrijfsnaam.
• .navbar-nav voor een volledige hoogte van de navigatie. Daarnaast maak je de navigatie responsive (voor mobiel dus) en krijg je een wafel (oftewel een toggler) te zien als je op mobiel ziet.
• .navbar-toggler gebruikt de toggle functie van bootstrap. Die kan je gebruiken om bijvoorbeeld een toggler toe te voegen aan je navigatie.
  
• .navbar-text om verticaal gecentreerde text toe te voegen.

Zo ziet een navigatie eruit in Bootsatrap:

<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:

Bedrijfsnaam/logo

<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>

• In het stukje code zie je ook een <ul> en <li>. Herken je deze elementen nog? Die gebruik je om een unordered list te maken.
  • Elk <li> is een navbar-item.
    
• Bootstrap gebruikt de unordered list om de navigatie items naast elkaar te plaatsen. Zoals je ziet zie je helemaal geen bullet points. Bootstrap heeft die dus weggehaald en geoptimaliseerd om in een navigatie te kunnen gebruiken.
• In de <a> element zie je een class attribuut met een nav-link erin. Deze classnaam is verplicht om <a> tags te gebruiken in de navigatie.
  • Bij één van de <a> element zie je ook een "active" classnaam hebben. Dat is om aan te duiden welke navigatie item geselecteerd is op basis van welke pagina je staat.

Opdracht: voeg extra navbar items toe.

1. Vervang de nav-link naam van "Link" naar "Products"
2. Maak twee nieuwe navigatie items toe: "Login" en "Registreren"
3. Zorg ervoor dat ze allebei een <li> hebben met een classnaam nav-item hebben 
   1. Maak daarbinnen ook een <a> met de classnaam "nav-link"
4. Verander de achtergrondkleur (gebruik één van de bootstrap kleuren).

Wat lever je in?

1. Screenshot van jouw code met jouw persoonlijke navbar