Bootstrap nav en navbar

Bootstrap 4.0
Nav en Navbar
1 / 11
volgende
Slide 1: Tekstslide
ICTMBOStudiejaar 1

In deze les zitten 11 slides, met tekstslides.

time-iconLesduur is: 20 min

Onderdelen in deze les

Bootstrap 4.0
Nav en Navbar

Slide 1 - Tekstslide

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

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

Dit is een nav gemaakt met een <ul>

Dit is een nav gemaakt met een <nav>

Slide 4 - Tekstslide

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

Slide 5 - Tekstslide

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

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

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

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

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

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

Slide 11 - Tekstslide