Bootstrap nav en navbar

• ICT
• MBO
• Studiejaar 1

Bootstrap 4.0

Nav en Navbar

Nav

• Om door je website heen te bewegen is het soms makkelijk om een navigatie toe te voegen.
  
• Door middel van een navigatie kan je je bezoekers sturen naar andere (sub) pagina's 
  

Navs

De base nav heeft een standaard uiterlijk en wordt uitgelijnd naar links.
De base nav gebruik je door de .nav class toe te voegen aan een element. Dit kan op een <ul> of <nav> element.
Door de class .justify-content-center wordt je nav in het midden uitgelijnd.
Door de class .justify-content-end wordt je nav rechts uitgelijnd.
Door de class .flex-column wordt je nav onder elkaar gepositioneerd.

Dit is een nav gemaakt met een <ul>

Dit is een nav gemaakt met een <nav>

De nav met de .flex-column class

Dit kan ook met een <ul>

De opmaak

Tabs:

• Door de class .nav-tabs toe te voegen aan je navigatie krijg je een interface met tabbladen. Het tabblad met de .active class zal weergeven worden in een tab. Dit ziet er zo uit:

Pills:

• De .nav-pills zorgt voor een duidelijke weergave van welke link er op dat moment de .active class bevat. Dit ziet er zo uit:
  

Navbar

Om een navbar te kunnen gebruiken moet je de class .navbar toepassen op een element.
Dit gaat samen met .navbar-expand{-sm|-md|-lg|-xl}.
De .navbar-expand{-sm|-md|-lg|-xl} zorgt er voor dat je navbar responsive is en samenvouwt op het moment dat je scherm kleiner wordt.

Responsive navbar

Dit is de navbar op volledige grootte

Aan de linkerkant zie je een aantal navbar items. Deze kan je uitvouwen door op de 3 streepjes te klikken. Deze zijn samengevouwen omdat ze een bepaalde grootte hebben bereikt waardoor ze niet meer volledig op het scherm passen. De eerste is opengevouwen, en wordt de navigatie weergeven en de rest is nog gesloten.  

Subcomponenten

Navbars worden geleverd met ingebouwde ondersteuning voor een paar subcomponenten.

• .navbar-brand voor uw bedrijfs-, product- of projectnaam.
  
• .navbar-nav voor een simple navigatie op volledige hoogte (inclusief ondersteuning voor dropdowns)
  
• .navbar-toggler voor het uitklappen van je navigatie.
  
• .form-inline voor verschillende form elementen en acties.
  
• .navbar-text voor het toevoegen van verticaal gecentreerde tekst.
  
• .collapse .navbar-collapse maakt de navigatie uitklapbaar.
  

Opdrachten

Nav:

• Voeg een nav toe aan de pagina.
• Zorg dat de nav een .active class bevat.
• Kies een andere positie voor de nav dan de standaard positie, doe dit door de juiste Bootstrap class te gebruiken.

Navbar:

• Maak een navbar van de nav die net gemaakt hebt.
  
• Zorg er voor dat je navbar responsive is, gebruik hier voor de juiste classes.
  
• Maak gebruik van de .navbar-toggler en de .collapse.navbar-collapse om je navigatie uit te klappen.
  

GIT:

• Doe een git add . 
  
• git commit –m “Nav en Navbar" 
  
• git push
  

Opdracht Portfolio 

• Bekijk je portfolio, voeg de Bootstrap classes toe die je in deze les geleerd hebt.