Bootstrap nav en navbar

Bootstrap 4.0
Nav en Navbar
1 / 11
suivant
Slide 1: Diapositive
ICTMBOStudiejaar 1

Cette leçon contient 11 diapositives, avec diapositives de texte.

time-iconLa durée de la leçon est: 20 min

Éléments de cette leçon

Bootstrap 4.0
Nav en Navbar

Slide 1 - Diapositive

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 

Slide 2 - Diapositive

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.

Slide 3 - Diapositive

Dit is een nav gemaakt met een <ul>

Dit is een nav gemaakt met een <nav>

Slide 4 - Diapositive

De nav met de .flex-column class
Dit kan ook met een <ul>

Slide 5 - Diapositive

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:

Slide 6 - Diapositive

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.

Slide 7 - Diapositive

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.  

Slide 8 - Diapositive

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.

Slide 9 - Diapositive

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



Slide 10 - Diapositive

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

Slide 11 - Diapositive