Bootstrap Aan de slag
Wat is Bootstrap?
- Bootstrap is een gratis front-end framework voor snellere en eenvoudigere webontwikkeling
- Bootstrap bevat op HTML en CSS gebaseerde ontwerpsjablonen voor typografie, formulieren, knoppen, tabellen, navigatie, modals, beeldcarrousels en vele andere, evenals optionele JavaScript-plug-ins
- Bootstrap geeft je ook de mogelijkheid om gemakkelijk responsieve ontwerpen te maken
Wat is responsive webdesign?
Responsive webdesign gaat over het maken van websites die zichzelf automatisch aanpassen om er goed uit te zien op alle apparaten, van kleine telefoons tot grote desktops.
Bootstrap-voorbeeld
<div class="jumbotron text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum
dolor..</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>Lorem ipsum
dolor..</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>Lorem ipsum
dolor..</p>
</div>
</div>
</div>
Bootstrap-geschiedenis
Bootstrap is ontwikkeld door Mark Otto en Jacob Thornton op Twitter en in augustus 2011 als open source-product uitgebracht op GitHub.
In juni 2014 was Bootstrap het nummer 1 project op GitHub!
Waarom Bootstrap gebruiken?
Voordelen van Bootstrap:
- Eenvoudig te gebruiken: iedereen met slechts basiskennis van HTML en CSS kan Bootstrap gaan gebruiken
- Responsieve functies: de responsieve CSS van Bootstrap past zich aan telefoons, tablets en desktops aan
- Mobile-first-aanpak: in Bootstrap 3 maken mobile-first-stijlen deel uit van het kernraamwerk
- Browsercompatibiliteit: Bootstrap is compatibel met alle moderne browsers (Chrome, Firefox, Internet Explorer, Edge, Safari en Opera)
Bootstrap-versies
Deze tutorial volgt Bootstrap 3 , die in 2013 werd uitgebracht. We behandelen echter ook nieuwere versies; Bootstrap 4 (uitgebracht in 2018) en Bootstrap 5 (uitgebracht in 2021) .
Bootstrap 5 is de nieuwste versie van Bootstrap ; met nieuwe componenten, snellere stylesheets, meer responsiviteit enz. Het ondersteunt de nieuwste, stabiele releases van alle belangrijke browsers en platforms. Internet Explorer 11 en lager wordt echter niet ondersteund.
Het belangrijkste verschil tussen Bootstrap 5 en Bootstrap 3 & 4 is dat Bootstrap 5 is overgestapt op JavaScript in plaats van jQuery .
Opmerking: Bootstrap 3 en Bootstrap 4 worden nog steeds door het team ondersteund voor kritieke bugfixes en documentatiewijzigingen, en het is volkomen veilig om ze te blijven gebruiken. Er worden echter GEEN nieuwe functies aan toegevoegd.
Waar Bootstrap kopen?
Er zijn twee manieren om Bootstrap op uw eigen website te gaan gebruiken.
Jij kan:
- Download Bootstrap van getbootstrap.com
- Bootstrap van een CDN opnemen
Bootstrap downloaden
Als je Bootstrap zelf wilt downloaden en hosten, ga dan naar getbootstrap.com en volg daar de instructies.
Bootstrap CDN
Als u Bootstrap niet zelf wilt downloaden en hosten, kunt u het opnemen vanaf een CDN (Content Delivery Network).
MaxCDN biedt CDN-ondersteuning voor Bootstrap's CSS en JavaScript. Je moet ook jQuery opnemen:
MaxCDN:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
Een voordeel van het gebruik van Bootstrap CDN:
veel gebruikers hebben Bootstrap al gedownload van MaxCDN wanneer ze een andere site bezoeken. Als gevolg hiervan wordt het uit de cache geladen wanneer ze uw site bezoeken, wat leidt tot een snellere laadtijd. De meeste CDN's zorgen er ook voor dat zodra een gebruiker een bestand opvraagt, het wordt bediend vanaf de server die zich het dichtst bij hen bevindt, wat ook leidt tot een snellere laadtijd.
jQuery
Bootstrap gebruikt jQuery voor JavaScript-plug-ins (zoals modals, tooltips, enz.). Als u echter alleen het CSS-gedeelte van Bootstrap gebruikt, heeft u jQuery niet nodig.
Eerste webpagina maken met Bootstrap
1. Voeg het HTML5-documenttype toe
Bootstrap gebruikt HTML-elementen en CSS-eigenschappen waarvoor het HTML5-doctype vereist is.
Vermeld altijd het HTML5-doctype aan het begin van de pagina, samen met het lang-attribuut en de juiste tekenset:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>
2. Bootstrap 3 is eerst mobiel
Bootstrap 3 is ontworpen om te reageren op mobiele apparaten. Mobile-first stijlen maken deel uit van het kernraamwerk.
<meta>Voeg de volgende tag toe aan het
<head>element om een juiste weergave en zoomzoom te garanderen :
<meta name="viewport" content="width=device-width, initial-scale=1">
Het width=device-widthonderdeel stelt de breedte van de pagina in om de schermbreedte van het apparaat te volgen (dit is afhankelijk van het apparaat).
Het initial-scale=1onderdeel stelt het initiële zoomniveau in wanneer de pagina voor het eerst door de browser wordt geladen.
3. Containers
Bootstrap vereist ook een bevattend element om de inhoud van de site in te pakken.
U kunt kiezen uit twee containerklassen:
- De
.containerklasse biedt een responsieve container met vaste breedte - De
.container-fluidklasse biedt een container over de volledige breedte die de volledige breedte van de viewport beslaat
Twee basis Bootstrap-pagina's
Het volgende voorbeeld toont de code voor een standaard Bootstrap-pagina (met een responsieve container met vaste breedte):
Voorbeeld
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html>
Het volgende voorbeeld toont de code voor een basis Bootstrap-pagina (met een container over de volledige breedte):
Voorbeeld
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html>