1. Inleiding tot Bootstrap

1.0 Inleiding tot responsief webdesign en Bootstrap

In het tijdperk van smartphones en tablets is het essentieel voor websites om er goed uit te zien en goed te functioneren op een reeks verschillende apparaten. Bootstrap, een van de meest populaire front-end frameworks, biedt webontwikkelaars de tools die ze nodig hebben om responsieve en moderne websites te bouwen met gemak en efficiëntie. In dit hoofdstuk zullen we de fundamenten van Bootstrap verkennen, van zijn belangrijkste kenmerken tot hoe je ermee aan de slag kunt gaan in je projecten.

1.1 Overzicht van andere populaire front-end frameworks

Naast Bootstrap zijn er diverse andere front-end frameworks die webontwikkelaars helpen bij het maken van responsieve en moderne websites. Hier volgt een kort overzicht van enkele van deze frameworks:

• Foundation: Een responsief front-end framework dat webontwikkelaars helpt bij het bouwen van mobielvriendelijke websites. Foundation is flexibel en aanpasbaar, waardoor het geschikt is voor zowel eenvoudige als complexe projecten. Meer informatie
• Semantic UI: Dit is een tool voor webontwikkeling die eenvoudige, begrijpelijke termen in de code gebruikt. Hierdoor kunnen ontwikkelaars gemakkelijker websites bouwen zonder zich te hoeven verdiepen in complex jargon. Meer informatie.
• Materialize: Gebaseerd op Google's Material Design, biedt Materialize componenten en animaties die consistent zijn met de richtlijnen van Material Design. Het is ideaal voor ontwikkelaars die een uniforme en moderne look voor hun websites willen. Meer informatie
• Bulma: Een modern CSS-framework gebaseerd op Flexbox. Bulma is lichtgewicht en heeft een schone syntax, waardoor het gemakkelijk is voor ontwikkelaars om te leren en te gebruiken. Meer informatie

Hoewel al deze frameworks hun eigen unieke kenmerken en voordelen hebben, blijft Bootstrap een van de meest populaire keuzes vanwege zijn uitgebreide gemeenschap en brede ondersteuning.

1.2 Wat is Bootstrap?

Bootstrap is een van de meest gebruikte open-source front-end frameworks voor webontwikkeling. Het werd oorspronkelijk ontwikkeld door Twitter en is sindsdien uitgegroeid tot een krachtige tool voor het bouwen van moderne, responsieve en gebruiksvriendelijke webpagina's. Het framework is ontworpen om het ontwikkelingsproces te versnellen en de consistentie van de vormgeving op verschillende apparaten en browsers te waarborgen.

1.3 Belangrijkste kenmerken van Bootstrap

• Responsiviteit: Een van de meest opvallende kenmerken van Bootstrap is de nadruk op responsieve webontwikkeling. Het framework maakt gebruik van een mobiel-eerste benadering, wat betekent dat websites die met Bootstrap zijn gebouwd, goed werken op zowel desktopcomputers als mobiele apparaten.
• Grid-systeem: Bootstrap biedt een flexibel en krachtig grid-systeem dat het eenvoudig maakt om de lay-out van een website te structureren. Ontwikkelaars kunnen kolommen en rijen gebruiken om inhoud in te delen en responsieve ontwerpen te creëren.
• Componenten: Bootstrap bevat een uitgebreide reeks voorgedefinieerde CSS-klassen en JavaScript-componenten. Deze omvatten navigatiebalken, knoppen, formulieren, modals, carrousels, en nog veel meer. Deze componenten kunnen gemakkelijk worden geïntegreerd in je project en zorgen voor een consistente gebruikerservaring.
• Aanpasbaarheid: Hoewel Bootstrap een set standaardstijlen biedt, is het volledig aanpasbaar. Ontwikkelaars kunnen de look en feel van hun website aanpassen door aangepaste CSS toe te voegen of door gebruik te maken van thema's die beschikbaar zijn via Bootstrap.
• Browsercompatibiliteit: Bootstrap zorgt voor compatibiliteit met moderne webbrowsers, waardoor je je geen zorgen hoeft te maken over cross-browserproblemen.

1.4 Waarom Bootstrap gebruiken?

Het gebruik van Bootstrap biedt verschillende voordelen voor webontwikkelaars:

• Tijdbesparing: Bootstrap versnelt het ontwikkelingsproces aanzienlijk door veelvoorkomende taken, zoals het opzetten van een responsieve lay-out of het maken van knoppen, aanzienlijk te vereenvoudigen. Dit bespaart ontwikkelaars tijd en moeite.
• Consistentie: Bootstrap zorgt voor consistentie in het ontwerp van een website. Met behulp van de voorgedefinieerde componenten en stijlen kunnen ontwikkelaars ervoor zorgen dat hun site er op alle pagina's en apparaten uniform uitziet.
• Responsiviteit: In de moderne webontwikkeling is responsiviteit essentieel. Bootstrap maakt het gemakkelijk om webpagina's te maken die zich aanpassen aan verschillende schermformaten, wat de gebruikerservaring verbetert.
• Actieve Gemeenschap: Bootstrap heeft een grote en actieve gemeenschap van ontwikkelaars en gebruikers die continu werken aan verbeteringen en het delen van resources, zoals plugins en thema's.

2. Het opzetten van een Bootstrap-project

Voordat je met Bootstrap aan de slag kunt gaan, moet je ervoor zorgen dat de benodigde bestanden correct zijn geïntegreerd in je project. Dit hoofdstuk zal je begeleiden bij het opzetten van een nieuw project of het toevoegen van Bootstrap aan een bestaand project.

2.1 Downloaden van Bootstrap

Om Bootstrap te gebruiken, kun je ervoor kiezen om de bronbestanden te downloaden van de officiële website: Get Bootstrap. Hier vind je de laatste versie van de Bootstrap bestanden om te downloaden. Nadat je de bestanden hebt gedownload, kun je ze naar je projectmap kopiëren en ze lokaal hosten.

2.2 Gebruik van een CDN-link

Een snellere en vaak handigere manier om Bootstrap in je project te integreren, is door gebruik te maken van een Content Delivery Network (CDN). Een CDN is een extern gehoste versie van Bootstrap die je direct kunt insluiten in je HTML-bestanden. Hier is een voorbeeld van hoe je Bootstrap via een CDN kunt insluiten:

             

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
    

Dit is een veelgebruikte methode omdat het de laadtijd van je website kan versnellen, aangezien de bestanden worden gedownload vanuit een extern servernetwerk.

2.3 Basis HTML-sjabloon

"In dit Bootstrap-sjabloon is de CSS en JS van Bootstrap toegevoegd. De <link>-tag bevindt zich in het <head>-gedeelte voor het downloaden van het Bootstrap CSS-bestand via CDN, en de <script>-tag verwijst naar de Bootstrap JavaScript-bundel (inclusief Popper voor het positioneren van dropdowns, pop-ups en tooltips) en wordt staat net vóór de afsluitende </body>-tag."

	  
   <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"> </script>
  </body>
</html>

Dit sjabloon bevat een basisstructuur voor een HTML-document en heeft de nodige meta-tags voor responsieve weergave. Binnen de <body> en </body>-tags kun je je eigen inhoud toevoegen.

Je kunt de nieuwste versie van het Bootstrap-sjabloon hier downloaden.

Conclusie

Het opzetten van een Bootstrap-project begint met het verkrijgen van de benodigde Bootstrap-bestanden en het integreren ervan in je HTML-sjabloon. Je kunt Bootstrap zowel lokaal downloaden als insluiten via een CDN-link. Met een basis HTML-sjabloon kun je vervolgens beginnen met het ontwikkelen van je webpagina's met behulp van de krachtige mogelijkheden van Bootstrap. In de volgende hoofdstukken zullen we dieper ingaan op hoe je Bootstrap-grid, -componenten en -stijlen kunt gebruiken om je website te bouwen en aan te passen.

3. Responsieve lay-out met het Grid-systeem

Een van de meest krachtige en fundamentele functies van Bootstrap is het grid-systeem. Het grid-systeem stelt ontwikkelaars in staat om de lay-out van een webpagina op een gestructureerde en responsieve manier te organiseren. Door gebruik te maken van containers, rijen en kolommen kun je webpagina's creëren die er goed uitzien en goed werken op verschillende schermformaten, van desktops tot mobiele apparaten.

Bekijk dit voorbeeld van het responsive lay-out grid van Bootstrap op CodePen

In dit Bootstrap gridvoorbeeld worden de kolommen aangepast op basis van het schermformaat. Met behulp van de col-12 klasse nemen de kolommen de volledige schermbreedte in beslag op de kleinste schermformaten, waardoor ze boven elkaar worden gestapeld. Wanneer het schermformaat toeneemt tot het 'small' (sm) formaat, worden de kolommen verdeeld in twee, waardoor er twee kolommen naast elkaar komen te staan. Voor 'medium' (md) schermformaten en groter worden de kolommen verdeeld in vieren, wat resulteert in vier kolommen naast elkaar.

3.1 Containers

Containers zijn de meest elementaire lay-outcomponenten in Bootstrap en zijn noodzakelijk bij het gebruik van het standaard grid-systeem. Containers worden ingezet om de inhoud te omvatten, op te vullen en (meestal) te centreren. Hoewel containers genest kunnen worden, is dat meestal niet nodig voor de meeste lay-outs.

Bootstrap biedt drie verschillende typen containers:

• .container : Deze container stelt een maximale breedte in bij elk responsief breekpunt.
• .container-{breekpunt} : Deze container heeft een breedte van 100% totdat het gespecificeerde breekpunt is bereikt.
• .container-fluid : Deze container heeft een breedte van 100% op alle breekpunten.

Hier kan je zien hoe containers werken: Bootstrap containers. Verklein of vergroot het browservenster om het effect te bekijken.

Hier is een voorbeeld van hoe je containers kunt gebruiken

    <div class="container">
    <!-- Deze container stelt een maximale breedte in bij elk responsief breekpunt. Inhoud hier -->
    </div>
    
    <div class="container-{breakpoint}">
    <!-- Deze container stelt een breedte van 100% tot aan het gespecificeerde breekpunt. Inhoud hier -->
    </div>     
    
    <div class="container-fluid">
    <!-- Deze container heeft een breedte van 100% op alle breekpunten. -->
    </div>

Meer over Bootstrap containers vind je hier.

3.2 Rijen (Rows)

Binnen een container kun je rijen aanmaken. Een rij is een horizontale groep van kolommen die de basisstructuur van je lay-out vormen. Rijen helpen je om de inhoud van je webpagina te organiseren in horizontale secties, waarbij elke rij is onderverdeeld in 12 kolommen.

          
              
    <div class="container">        
     <div class="row">          
    <!-- Kolommen hier -->       
     </div>
    </div>

3.3 Kolommen (Columns)

Kolommen worden binnen rijen geplaatst en vormen de bouwstenen van je lay-out. Ze definiëren hoeveel ruimte een element inneemt op verschillende schermformaten...

        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <!-- Inhoud van de eerste kolom -->
                </div>
                <div class="col-md-6">
                    <!-- Inhoud van de tweede kolom -->
                </div>
            </div>
        </div>
    

3.4 Responsiviteit

Het krachtige aspect van het Bootstrap grid-systeem is de responsiviteit. Je kunt de kolommen zo configureren dat ze zich automatisch aanpassen aan verschillende schermgroottes. Bijvoorbeeld, door col-md-6 te gebruiken, zorg je ervoor dat de kolommen naast elkaar worden weergegeven op medium en grotere schermen, maar gestapeld op kleinere schermen.

Conclusie

Het grid-systeem van Bootstrap is een essentiële tool om responsieve webpagina's te maken. Door containers, rijen en kolommen op de juiste manier te gebruiken, kun je de lay-out van je website op een georganiseerde en aanpasbare manier structureren. Dit zorgt ervoor dat je inhoud er goed uitziet en goed presteert op verschillende apparaten en schermformaten, wat de kern is van moderne webontwikkeling met Bootstrap. In de volgende hoofdstukken zullen we dieper ingaan op het gebruik van Bootstrap-componenten en het aanpassen van stijlen om je webontwikkelingsprojecten verder te verbeteren.

4. Bootstrap-componenten gebruiken

Bootstrap biedt een uitgebreide verzameling van voorgedefinieerde gebruikersinterface (UI) componenten die je kunt integreren in je webpagina's. Deze componenten besparen ontwikkeltijd en zorgen voor een consistente en aantrekkelijke gebruikerservaring. In dit hoofdstuk zullen we verschillende veelgebruikte Bootstrap-componenten verkennen en leren hoe je ze kunt implementeren.

4.1 Navigatiebalken (Navbar)

De Bootstrap-navigatiebalk, of "Navbar," is een flexibele en aanpasbare component voor het maken van menu's en navigatie. Je kunt een eenvoudige navigatiebalk maken met slechts een paar klassen, of een complexere met dropdown-menu's en logo's. Het is een fundamenteel onderdeel voor het creëren van een gemakkelijk te navigeren website.

4.2 Knoppen

Bootstrap biedt knopstijlen die eenvoudig kunnen worden aangepast. Knoppen kunnen worden gebruikt voor verschillende acties, zoals het verzenden van formulieren of het activeren van modals. De klassen btn en btn-primary geven bijvoorbeeld een standaardknop weer met de primaire kleur.

Bekijk onderstaand voorbeeld op CodePen

   

    <button type="button" class="btn btn-primary">Indienen</button>
    <button type="button" class="btn btn-danger">Verwijderen</button>

4.3 Formulieren

Bootstrap maakt het maken van formulieren eenvoudig en zorgt voor consistentie in stijl. Je kunt Bootstrap-formulierelementen, zoals tekstvakken, selectievakjes, en radio-knoppen, opnemen in je formulieren.

    <form>


        <div class="form-group">

            <label for="voorbeeldInputEmail">E-mailadres</label>

            <input type="email" class="form-control" id="voorbeeldInputEmail" placeholder="Voer e-mailadres in">

        </div>

        <div class="form-group">

            <label for="voorbeeldInputWachtwoord">Wachtwoord</label>

            <input type="password" class="form-control" id="voorbeeldInputWachtwoord" placeholder="Voer wachtwoord in">

        </div>

        <button type="submit" class="btn btn-primary">Inloggen</button>

    </form>

4.4 Aanvullende Bootstrap componenten

Naast de basiscomponenten, bevat Bootstrap een verscheidenheid aan extra tools om de functionaliteit en het ontwerp van je website te verbeteren, zoals modals, carrousels, afbeeldingen, badges, en meer. Ze zijn flexibel en aanpasbaar om aan diverse ontwerpeisen te voldoen.

Veelgebruikte Bootstrap CSS-classes

Om een effectief gebruik van Bootstrap te maken, is het nuttig om vertrouwd te raken met enkele van de meest gebruikte classes. Hieronder wordt een lijst gegeven, samen met voorbeelden.

Bekijk onderstaand voorbeeld op CodePen

1. Layout classes

   Deze classes helpen bij het structureren van de lay-out van je webpagina. Hier zijn enkele voorbeelden:

   
   <div class="container">
     <div class="row">
       <div class="col-4" style="background-color:lavender;">Column 1</div>
       <div class="col-4" style="background-color:orange;">Column 2</div>
       <div class="col-4" style="background-color:lavender;">Column 3</div>
     </div>
   </div>
           

2. Typography classes

   Deze worden gebruikt om tekst en koppen te stijlen en te formatteren.

   
   <h1 class="display-1">Dit is een grote kop</h1>
   <p class="lead">Dit is een leidende paragraaf die prominent wordt weergegeven.</p>
           

3. Buttons

   Styling en interactieve elementen voor knoppen op je webpagina's.

   
   <button type="button" class="btn btn-primary">Primary</button>
   <button type="button" class="btn btn-secondary">Secondary</button>
   <button type="button" class="btn btn-success">Success</button>
   <button type="button" class="btn btn-warning">Warning</button>
   <button type="button" class="btn btn-danger">Danger</button>
   <button type="button" class="btn btn-light">Light</button>
   <button type="button" class="btn btn-dark">Dark</button>
           

4. Badges

   Markeringshulpmiddelen die u kunt gebruiken om aandacht te trekken naar specifieke delen van uw inhoud.

   
   <h2>Example heading <span class="badge bg-secondary">New</span></h2>
           

5. Cards

   Een flexibele en extensible content container met meerdere varianten en opties.

   
   <div class="card" style="width: 18rem;">
     <img src="https://via.placeholder.com/150" class="card-img-top" alt="...">
     <div class="card-body">
       <h5 class="card-title">Card Title</h5>
       <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
       <a href="#" class="btn btn-primary">Go somewhere</a>
     </div>
   </div>
           

4.5 Border, padding en margin classes in bootstrap

In dit gedeelte zullen we de Bootstrap classes onderzoeken die je kunt gebruiken om de randen, padding en marges van je elementen te manipuleren en aan te passen.

Border classes

Bootstrap biedt een reeks nuttige hulpprogramma's voor het werken met randen. Je kunt de stijl, kleur en breedte van de randen van elementen aanpassen met deze classes.

<div class="border">Dit is een element met een standaard rand.</div>
<div class="border-0">Dit is een element zonder rand.</div>
<div class="border border-primary">Dit is een element met een primaire kleurrand.</div>

Padding classes

Bootstrap's padding classes stellen je in staat om de binnenruimte van een element te beheren. Je kunt de padding aan alle zijden van een element of aan een specifieke zijde toevoegen of aanpassen.

<div class="p-3">Dit is een element met padding aan alle zijden.</div>
<div class="pt-2">Dit is een element met padding aan de bovenkant.</div>
<div class="p-lg-5">Dit is een element met grote padding aan alle zijden op grote schermen.</div>

Margin classes

De margeclasses van Bootstrap zijn vergelijkbaar met de paddingclasses. Ze bieden je de flexibiliteit om de buitenruimte rond elementen te beheren, wat nuttig is voor het aanpassen van de lay-out en het afstand houden tussen de elementen.

<div class="m-3">Dit is een element met een marge aan alle zijden.</div>
<div class="mt-2">Dit is een element met een marge aan de bovenkant.</div>
<div class="m-lg-5">Dit is een element met een grote marge aan alle zijden op grote schermen.</div>

Samenvatting

Door de componenten en classes van Bootstrap effectief te gebruiken, kun je snel en efficiënt responsieve, stijlvolle webpagina's ontwerpen. Zorg ervoor dat je de documentatie van Bootstrap raadpleegt en experimenteert met verschillende classes om te zien hoe ze in de praktijk werken. De flexibiliteit en veelzijdigheid van Bootstrap maken het een krachtig hulpmiddel voor elke webontwikkelaar.

5. Een Bootstrap 5 Navbar maken

In dit hoofdstuk leer je hoe je snel en effectief een responsieve navbar kunt maken met Bootstrap 5. We zullen gebruik maken van de ingebouwde klassen en componenten van Bootstrap om een functionele en esthetisch aantrekkelijke navbar te creëren.

5.1 Introductie tot de Bootstrap Navbar

De Bootstrap navbar is een krachtig en veelzijdig component voor het maken van navigatieheaders en navigatiebalken voor je website. Het is responsief, wat betekent dat het zich automatisch aanpast aan verschillende schermgroottes, van desktops tot mobiele apparaten.

5.2 Basisstructuur van de Navbar

De basis HTML-structuur van een Bootstrap 5 navbar is hieronder weergegeven:

Bekijk dit Bootstrap 5 navbar voorbeeld op CodePen.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
            </li>
        </ul>
    </div>
</nav>

5.3 Aanpassen van de Navbar

Je kunt de kleur en het uiterlijk van de navbar aanpassen door de ingebouwde klassen van Bootstrap te veranderen. Bijvoorbeeld, om de achtergrondkleur te veranderen, kun je de bg-light klasse vervangen door andere kleurklassen zoals bg-dark, bg-primary, enz. Hier is een voorbeeld waarbij de navbar is ingesteld op een donkere achtergrond met lichte tekst:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">Brand</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
            </li>
        </ul>
    </div>
</nav>

5.4 Responsiviteit van de Navbar

Bootstrap's navbar is van nature responsief. Het bevat een hamburgermenu dat verschijnt op kleinere schermgroottes. Je kunt de breekpunten aanpassen met de navbar-expand-* klassen, waarbij de asterisk kan worden vervangen door verschillende schermgroottetypen zoals sm, md, lg, en xl.

5.5 Toevoegen van dropdowns en formulieren

Bootstrap maakt het ook eenvoudig om dropdown-menu's en formulierelementen zoals zoekbalken toe te voegen aan je navbar. Hier is een voorbeeldcode die een dropdown-menu toevoegt aan de navbar:

<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown
    </a>
    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
        <li><a class="dropdown-item" href="#">Actie</a></li>
        <li><a class="dropdown-item" href="#">Een andere actie</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">Iets anders hier</a></li>
    </ul>
</li>

5.6 Samenvatting

In dit hoofdstuk hebben we geleerd hoe je snel een responsieve navigatiebalk kunt opzetten met Bootstrap 5. Door de ingebouwde klassen en componenten te gebruiken, kun je een functionele en visueel aantrekkelijke navbar creëren zonder veel moeite.

Hoofdstuk 6: Het aanpassen van de Bootstrap 5 Navbar

In de vorige hoofdstukken hebben we geleerd hoe we Bootstrap 5 kunnen gebruiken om snel en eenvoudig een responsieve navigatiebalk (navbar) te maken. Hoewel Bootstrap's standaardstijlen geweldig zijn, wil je misschien de navigatiebalk aanpassen om deze aan te passen aan de branding of het ontwerp van jouw website. In dit hoofdstuk zullen we leren hoe we de Bootstrap 5-navbar kunnen personaliseren door CSS-klassen aan te passen.

6.1 De basisklassen

Laten we beginnen met de basisklassen die Bootstrap gebruikt voor de navigatiebalk:

• .navbar: Dit is de hoofdcontainerklasse voor de navigatiebalk. Hier kunt u de achtergrondkleur, hoogte, marges en padding aanpassen.
• .navbar-brand: Dit is de klasse voor het merklogo of de merknaam in de navigatiebalk. Je kan de tekststijlen, lettertypegrootten en kleuren hier aanpassen.
• .navbar-toggler: Als je een uitklapbaar menu (hamburgermenu) heeft, kunt u de stijl van de knop aanpassen, inclusief kleuren, grootte en vorm.

6.2 De navigatie-items

Om de stijl van de navigatie-items aan te passen, gebruik je de volgende klassen:

• .navbar-nav: Dit is de containerklasse voor de lijst met navigatie-items. Hier kun je marges, padding en andere lay-outstijlen aanpassen.
• .nav-item en .nav-link: Dit zijn klassen die worden toegepast op individuele navigatie-items en links. Hiermee kun je tekststijlen, lettertypegroottes, kleuren en hover-effecten aanpassen.

6.3 Achtergrondkleur en tekstkleur

Je kan de achtergrondkleur en tekstkleur van de navigatiebalk aanpassen met de volgende klassen:

• .navbar-dark en .navbar-light: Hiermee kunt u het kleurenschema van de navigatiebalk instellen op donker of licht. U kunt de kleuren voor achtergronden, tekst en links aanpassen afhankelijk van welke klasse u gebruikt.
• Aanvullende kleurklassen zoals .bg-* en .text-*: Deze klassen kunnen worden gebruikt om specifieke kleuren voor achtergronden en tekst in te stellen. Bijvoorbeeld, .bg-primary en .text-white voor een blauwe achtergrond met witte tekst.

6.4 Responsief gedrag

Bootstrap biedt ook klassen voor responsief gedrag van de navigatiebalk:

• .navbar-expand-*: Dit zijn klassen die het gedrag van de navigatiebalk bepalen op verschillende schermgroottes (zoals navbar-expand-sm, navbar-expand-md, enz.). Je kan de inhoud en het gedrag van de navigatie aanpassen voor mobiele apparaten en desktops met behulp van deze klassen.

6.5 Aanvullende klassen en utilities

Je kunt aanvullende Bootstrap-klassen en utilities gebruiken om specifieke wijzigingen aan te brengen, zoals .ml-* en .mr-* voor marges aan de linker- en rechterkant, .p-* voor padding, enzovoort. Bootstrap biedt een breed scala aan klassen om aan jouw ontwerpbehoeften te voldoen.

6.6 Voorbeeld van Aanpassingen

We gebruiken een extern CSS-stylesheet om de stijlen aan te passen. Hier is een voorbeeld van hoe je de Bootstrap 5 navbar kunt aanpassen met aangepaste CSS. Elke regel code is voorzien van commentaar om de specifieke aanpassingen uit te leggen.

Bekijk en experimenteer met deze Bootstrap 5 navbar op CodePen.

<head>
    <link rel="stylesheet" href="pad/naar/uw/aangepaste-stijlen.css">
</head>

/* CSS Document */

/* Pas de achtergrondkleur van de navbar aan */
.navbar {
    background-color: rgba(249,31,0,1.00); /* Rode achtergrondkleur */
}

/* Stel de tekstkleur van de navbar links in op wit */
.navbar .nav-link {
    color: rgba(255,255,255,1.00);
}

/* Verander de tekstkleur naar een helderblauwe tint tijdens de hover */
.navbar .nav-link:hover {
    color: rgba(4,241,250,1.00);
}

/* Stel de stijl in voor de merknaam */ 
.navbar-brand {
    font-size: 24px;
    color: #fff; /* Witte tekstkleur */
}

/* Verander de tekstkleur van de merknaam naar een helderblauwe tint tijdens de hover */
.navbar-brand:hover {
    color: rgba(4,241,250,1.00);
}

/* Verwijder de box-shadow en pas de kleur aan wanneer de toggler is gefocust */
.navbar-toggler:focus {
    color: rgba(186,63,4,1.00);
    box-shadow: none;
}

/* Verander de kleur van de border en achtergrond van de toggler naar wit */
.navbar-toggler {
    border-color: white;
    background-color: white;
}

/* Pas de kleur van het toggler-icoon aan met een SVG-afbeelding */
/* Pas de rgba waarde aan van stroke='rgba(249,31,0,1.00)' om de kleur te wijzigen */
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(249,31,0,1.00)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

6.7 Samenvatting

In dit hoofdstuk hebben we geleerd hoe we de Bootstrap 5 navbar kunnen personaliseren door CSS-klassen aan te passen. We hebben de basisprincipes behandeld voor het aanpassen van achtergrondkleuren, tekstkleuren, lettertypen, marges, padding en responsief gedrag. Experimenteer met deze klassen om een unieke navbar te creëren die past bij de branding en het ontwerp van je website.

Volgende Stappen

Probeer verschillende combinaties van Bootstrap klassen en aangepaste CSS om je vaardigheden in het aanpassen van de navbar te verfijnen. Bekijk ook de officiële Bootstrap documentatie voor meer informatie en voorbeelden.

7. Het `<img>` Element in Bootstrap 5

7.1 Inleiding tot het `<img>` element

In HTML wordt het `<img>` element gebruikt om afbeeldingen in te voegen. Het `src` attribuut specificeert het pad naar de afbeelding die je wilt weergeven.

<img src="pad/naar/afbeelding.jpg" alt="Beschrijvende tekst">

7.2 Responsieve afbeeldingen met `.img-fluid`

Wanneer de viewport kleiner wordt, kunnen afbeeldingen hun container overschrijden. Met de `.img-fluid` klasse van Bootstrap voorkom je dit. Deze klasse stelt in feite `max-width: 100%;` en `height: auto;` in voor de afbeelding, waardoor deze zich aanpast aan de afmetingen van het omsluitend element of container zonder de originele verhoudingen te verliezen.

<img src="pad/naar/afbeelding.jpg" alt="Beschrijvende tekst" class="img-fluid">

7.3 Afbeeldingen en bijschriften met `.figure` en `.figure-caption`

Bootstrap biedt een nette manier om afbeeldingen samen met bijschriften te presenteren. De `.figure` en `.figure-caption` klassen kunnen worden gebruikt om dit effect te bereiken.

<figure class="figure">
  <img src="pad/naar/afbeelding.jpg" alt="Beschrijvende tekst" class="figure-img img-fluid rounded">
  <figcaption class="figure-caption">Dit is een bijschrift.</figcaption>
</figure>

7.4 Dieper inzicht in het <figure> element en de figure-img klasse

Het <figure> element in HTML is een semantisch element bedoeld voor inhoud gerelateerd aan de hoofdinhoud van het document. Het wordt vaak gebruikt voor afbeeldingen, diagrammen, foto's en codeblokken, vaak vergezeld van een bijschrift.

Bootstrap's figure-img klasse stijlt specifiek afbeeldingen binnen een <figure> element. Het zorgt ervoor dat de afbeelding als een block-level element wordt weergegeven, waardoor ongewenste ruimte onder de afbeelding wordt verwijderd, en voegt een margin-bottom toe voor ruimte tussen de afbeelding en een eventueel bijschrift.

<figure class="figure">
  <img src="path/to/image.jpg" alt="Beschrijving van de afbeelding" class="figure-img img-fluid rounded">
  <figcaption class="figure-caption">Dit is een bijschrift voor de afbeelding.</figcaption>
</figure>

De belangrijkste klassen hier zijn:

• figure-img: Stijlt de afbeelding binnen het <figure> element.
• img-fluid: Maakt de afbeelding responsief.
• rounded: Voegt afgeronde hoeken toe aan de afbeelding.
• figure-caption: Stijlt het bijschrift van de afbeelding.

Met het <figure> element en de bijbehorende Bootstrap klassen kun je afbeeldingen op een semantische en gestileerde manier in je webpagina's integreren.