Laten we zeggen dat je een analytisch dashboard voor je bedrijf moet bouwen.
Je hebt er een nodig die er professioneel uitziet en goed werkt op verschillende apparaten, maar je hebt niet veel tijd om alles vanaf nul te ontwerpen.
Hier komt een Framework zoals Bootstrap van pas. Het geeft je een voorsprong bij het bouwen van responsieve websites. In plaats van naar een lege pagina te staren, begin je met een raster en vooraf gebouwde componenten. Het is alsof je een hoop Legos hebt. Je moet ze nog steeds in elkaar zetten, maar het moeilijke deel van het maken van alle afzonderlijke stukjes is al gedaan.
Als Bootstrap goed past bij jouw project, is deze gids voor jou. We nemen je mee door alles wat je moet weten om websites te bouwen met Bootstrap.
Laten we beginnen!
Wat Is Bootstrap?
Bootstrap is een gratis, open-source CSS-framework dat een verzameling van voorgebouwde componenten, stijlen en hulpmiddelen biedt voor het creëren van responsieve en consistente webontwerpen. Ontwikkeld door Twitter-ingenieurs Mark Otto en Jacob Thornton in 2011, is het sindsdien een van de favoriete frameworks voor webontwikkelaars wereldwijd geworden.
Bootstrap is momenteel het zesde populairste framework in de top miljoen sites in de categorie JavaScript-bibliotheken.
Hoewel jQuery en React de afgelopen jaren veel aandacht hebben gekregen, gebruiken wereldwijd nog steeds meer dan 1,2 miljoen websites Bootstrap.
Dit framework is mobile-first, wat betekent dat het de lay-out en styling voor kleinere schermen prioriteert en het ontwerp geleidelijk verbetert voor grotere schermen. Door deze aanpak zijn alle websites die met Bootstrap zijn gebouwd standaard responsief voor verschillende schermgroottes.
Wat Maakt Bootstrap Anders?
Bootstrap onderscheidt zich op een paar belangrijke manieren van andere CSS-frameworks.
Zijn kant-en-klare componenten, zoals navigatiebalken, knoppen, formulieren en kaarten, besparen ontwikkelaars veel tijd. Het responsieve roostersysteem van Bootstrap maakt het gemakkelijk om lay-outs te creëren die er goed uitzien op verschillende schermformaten, van grote desktopmonitoren tot kleine telefoonschermen.
Elk onderdeel van Bootstrap is aanpasbaar, dus je kunt kleuren en maten wijzigen om bij je specifieke ontwerp te passen. Deze aanpak biedt verschillende voordelen:
- Snel Ontwikkelen: Met een breed scala aan vooraf gebouwde componenten en hulpprogramma’s kunnen ontwikkelaars snel prototypes maken en webpagina’s bouwen zonder veel tijd te besteden aan aangepaste CSS.
- Consistent Ontwerp: Bootstrap zorgt voor een consistente ontwerptaal over projecten heen, wat zorgt voor een samenhangende en professionele uitstraling.
- Standaard Responsief: De componenten en het gridsysteem van Bootstrap zijn ontworpen om responsief te zijn, zich aanpassend aan verschillende schermformaten en apparaten zonder de noodzaak voor uitgebreide aangepaste media queries.
- Cross-Browser Compatibiliteit: Bootstrap neemt de zorgen voor cross-browser compatibiliteitsproblemen weg, waardoor ontwikkelaars zich kunnen concentreren op het bouwen van functionaliteiten in plaats van zich zorgen te maken over browserinconsistenties.
Echter, Bootstrap, zoals elk Framework, is niet voor iedereen geschikt.
Websites gebouwd met Bootstrap zien er vergelijkbaar uit met verschillende lay-outs, simpelweg omdat de UI-elementen worden hergebruikt. Het raamwerk bevat ook veel CSS en JavaScript die je misschien niet gebruikt, wat je website kan vertragen als je niet voorzichtig bent. Er is ook een leercurve bij het adopteren van de klassen in het raamwerk.
Ondanks deze potentiële nadelen, blijft Bootstrap een krachtige en populaire tool voor webontwikkeling, vooral als je snel wilt beginnen. Laten we eens kijken hoe je dat precies doet.
Aan de slag met Bootstrap
Voordat we de basis bespreken, hier zijn drie manieren om het framework te importeren:
- Download de gecompileerde CSS- en JavaScript-bestanden van de officiële Bootstrap-website en koppel ze in je HTML-bestand.
- Gebruik een Content Delivery Network (CDN) om Bootstrap vanaf een externe server te laden.
- Installeer Bootstrap via een pakketbeheerder zoals npm als je een buildtool gebruikt.
Voor de eenvoud, laten we de CDN-methode gebruiken. Voeg de volgende regels toe binnen de <head> tag van je HTML-bestand:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">Voeg vervolgens de volgende regel net voor de afsluitende </body> tag toe.
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>Let op: Je moet deze regels toevoegen om alle volgende codevoorbeelden te laten werken.
Het Bootstrap Gridsysteem
Het Bootstrap grid systeem is een van de kernfuncties, waarmee je responsieve indelingen kunt creëren die zich moeiteloos aanpassen aan verschillende schermformaten.
Het is gebaseerd op een lay-out met 12 kolommen en gebruikt vooraf gedefinieerde klassen om te specificeren hoe elementen zich moeten gedragen bij verschillende breekpunten.
Basis Raster
Het basisraster is een eenvoudig frame met kolommen van gelijke breedte die langer worden als de inhoud erin langer is. Om een basis te maken, begin je met een container <div> en voeg je rijen en kolommen toe. Hier is een voorbeeld:
<div class="container">
<div class="row">
<div class="col">
<div class="bg-light border p-3 text-center">
<h3>Kolom 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="col">
<div class="bg-light border p-3 text-center">
<h3>Kolom 2</h3>
<p>Pellentesque euismod dapibus odio, at volutpat sapien.</p>
</div>
</div>
<div class="col">
<div class="bg-light border p-3 text-center">
<h3>Kolom 3</h3>
<p>Sed tincidunt neque vel risus faucibus fringilla.</p>
</div>
</div>
</div>
</div>
Zoals je ziet, hebben we drie kolommen van gelijke breedte gemaakt. Bootstrap regelt de opvulling, de ruimte tussen de kolommen en de uitlijning.
Lengte Van Kolomrooster
Wat als je de lengte van de kolom wilt beheersen? Bootstrap heeft 12 eenheidsinstellingen die je laten beslissen hoe breed of hoe smal een kolom kan zijn. Bijvoorbeeld, om een rij met twee kolommen te maken waar de eerste kolom acht eenheden inneemt en de tweede vier eenheden, kun je het volgende doen:
<div class="container">
<div class="row">
<div class="col-8">
<div class="bg-light border p-3 text-center">
<h3>Bredere Kolom</h3>
<p>Nunc vitae metus non velit aliquam rhoncus vel in leo.</p>
</div>
</div>
<div class="col-4">
<div class="bg-light border p-3 text-center">
<h3>Smalere Kolom</h3>
<p>Fusce nec tellus sed augue semper porta.</p>
</div>
</div>
</div>
</div>
Zoals je misschien opmerkt, is er een verschil in de kolomklassen waar de bredere kolom de klasse col-8 heeft en de smallere kolom col-4 is.
Responsieve Kolombreedte
Bootstrap biedt ook responsieve klassen die je toestaan om verschillende kolombreedtes voor verschillende schermformaten te specificeren. Deze klassen zijn gebaseerd op breakpoints, die voorgedefinieerde schermbreedtes zijn. De beschikbare breakpoints zijn:
- xs (extra klein): Minder dan 576px
- sm (klein): 576px en meer
- md (middelgroot): 768px en meer
- lg (groot): 992px en meer
- xl (extra groot): 1200px en meer
- xxl (extra extra groot): 1400px en meer
Om responsieve klassen te gebruiken, voeg je de afkorting van het breekpunt toe aan de col- prefix. Bijvoorbeeld:
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="bg-light border p-3 text-center">
<h3>Kolom 1</h3>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
</div>
</div>
<div class="col-md-6">
<div class="bg-light border p-3 text-center">
<h3>Kolom 2</h3>
<p>Donec id elit non mi porta gravida at eget metus.</p>
</div>
</div>
</div>
</div>
We hebben hier de breedte col-md-6 toegevoegd, zodat de kolommen automatisch van grootte veranderen wanneer de schermgrootte 768px en groter is.
Bootstrap-componenten
Bootstrap biedt een breed scala aan vooraf gebouwde componenten voor het snel samenstellen van gebruikersinterfaces. Deze componenten zijn responsief en aanpasbaar. Laten we enkele veelgebruikte verkennen.
Knoppen
Bootstrap biedt direct goed ontworpen knopstijlen. Om een knop te maken, voeg de btn klasse toe aan een <button> of <a> element.
Pas het aan door klassen toe te voegen zoals btn-primary, btn-secondary, btn-success, enz.
<button type="button" class="btn btn-primary">Primaire Knop</button>
<button type="button" class="btn btn-secondary">Secundaire Knop</button>
<a href="#" class="btn btn-success">Succes Link Knop</a>
Kaarten
Kaarten zijn veelzijdige containers voor inhoud zoals afbeeldingen, tekst en knoppen. Ze bieden een gestructureerde manier om informatie te presenteren.
<div class="card">
<img src="https://getbootstrap.com/docs/4.5/assets/img/bootstrap-icons.png" class="card-img-top" alt="Card Image">
<div class="card-body">
<h5 class="card-title">Kaart Titel</h5>
<p class="card-text">Enkele snelle voorbeeldtekst om voort te bouwen op de kaarttitel.</p>
<a href="#" class="btn btn-primary">Ga ergens heen</a>
</div>
</div>
Hier zie je een kaart met bovenaan een afbeelding, gevolgd door een titel, wat tekst en een knop. De klasse card-img-top plaatst de afbeelding bovenaan de kaart, terwijl de klasse card-body padding en ruimte biedt voor de inhoud binnenin de kaart.
Navigatiebalk
Het navbar-component is een responsieve navigatiekop met branding, links, formulieren en meer. Het klapt automatisch in op kleinere schermen en biedt een knop om het menu uit te vouwen.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Mijn Website</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Navigatie omschakelen">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Functies</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Prijzen</a>
</li>
</ul>
</div>
</div>
</nav>
Met dit eenvoudige stukje code hebben we een schakelmenuknop voor kleine schermen en een lijst met navigatielinks gemaakt.
De klasse navbar-expand-lg geeft aan dat de navbar zich moet uitbreiden op grote schermen en ineenstorten op kleinere. De klassen navbar-light en bg-light bepalen het kleurenschema voor de navbar. Vergelijk dat met het zelf maken van het menu met gewone CSS, en je zult begrijpen hoeveel stappen Bootstrap ons heeft bespaard.
Formulieren
Als we verder gaan naar formulieren, biedt Bootstrap een scala aan formulierbesturingselementen en lay-outopties om interactieve en toegankelijke formulieren te creëren.
Je kunt eenvoudig formulierelementen zoals invoervelden, selectievakjes, radioknoppen en meer stylen.
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">E-mailadres</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">We delen je e-mail nooit met anderen.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Wachtwoord</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Controleer mij</label>
</div>
<button type="submit" class="btn btn-primary">Verzenden</button>
</form>
Bootstrap-styling heeft deze formulierindeling automatisch uitgelijnd en verfraaid vanuit de achtergrond.
Dit voorbeeld van een formulier bevat een e-mail invoerveld, een wachtwoord invoerveld, een selectievakje en een verzendknop. De form-label klasse geeft stijl aan de labels, terwijl de form-control klasse stijl geeft aan de invoervelden. De mb-3 klasse voegt een ondermarge toe aan de formuliervelden voor ruimte.
Een Eenvoudig Analyse Dashboard Maken Met Bootstrap
Nu we de basis hebben behandeld, laten we alles samenvoegen en een praktijkvoorbeeld bouwen: een analytisch dashboard.
Stel je voor dat je een webapplicatie bouwt die analysedata voor een bedrijf toont. Het dashboard zal een koptekst met een logo en navigatie bevatten, een hoofdinhoudsgebied met data, en een voettekst met extra links.
Laten we dit opsplitsen in beheersbare secties met eenvoudige taal die gemakkelijk te volgen is.
Het HTML Instellen
Allereerst moeten we ons HTML-bestand opzetten.
Begin met het aanmaken van een nieuw bestand en voeg de basisstructuur toe, zoals de <!DOCTYPE html> declaratie en de <html>, <head>, en <body> tags. In het <head> gedeelte, vergeet niet om de karaktercodering, viewport en paginatitel te specificeren.
Hier is hoe je HTML er tot nu toe uit zou moeten zien, inclusief de Bootstrap.css (geïmporteerd in de <head>) en de Bootstrap.js (geïmporteerd vlak voor het sluiten van <body>) bestanden die in de HTML zijn opgeroepen:
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Analyse Dashboard</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>
<!-- Je inhoud komt hier -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>De Koptekstnavigatie Toevoegen
Volgende stap, laten we een koptekst met een navigatiebalk creëren. Gebruik de <header> tag, en voeg een <nav> element daarin toe. Bootstrap’s navbar component is perfect voor dit. Voeg vervolgens een logo en enkele navigatielinks toe, zoals “Overzicht,” “Rapporten,” en “Instellingen.”
Plak deze headercode binnen de <body> tags
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Analyse Dashboard</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Navigatie omschakelen">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link active" href="#">Overzicht</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Rapporten</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Instellingen</a>
</li>
</ul>
</div>
</div>
</nav>
</header>Hier is hoe de navigatiebalk eruit zal zien:
De class navbar-expand-lg maakt de navigatie responsief, waarbij deze ineenstort op kleinere schermen.
We hebben navbar-dark en bg-dark gebruikt om het een strak, donker uiterlijk te geven. De navigatielinks staan in een ongeordende lijst en ms-auto duwt ze naar de rechterkant van de navigatiebalk.
Het Hoofdinhoudsgebied Creëren
Tijd om de hoofdinhoud aan te pakken! Laten we de <main> tag gebruiken en een tweekolomsindeling maken met het gridsysteem van Bootstrap.
De linkerkolom bevat kaarten voor het weergeven van grafieken of diagrammen, en de rechterkolom heeft een kaart met belangrijke statistieken. Plak deze code direct onder de sluit-tag van </header>.
Om dit voorbeeld interactiever te maken, laten we Chart.js toevoegen om gebruikersstatistieken te tonen. Voeg dit script toe aan je <head>.
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>Onthoud dat je dit script en de voorbeeldgegevens kunt overslaan als je gewoon wilt zien hoe Bootstrap werkt. We voegen het toe zodat de vakken niet leeg zijn.
Laten we nu de bootstrap kolommen schrijven om ruimte te maken voor de grafieken en de datametrieken.
<main class="container my-5">
<div class="row">
<div class="col-md-8">
<div class="card mb-4">
<div class="card-body">
<h5 class="card-title">Websiteverkeer</h5>
<canvas id="trafficChart"></canvas>
</div>
</div>
<div class="card mb-4">
<div class="card-body">
<h5 class="card-title">Gebruikersverwerving</h5>
<canvas id="userChart"></canvas>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4">
<div class="card-body">
<h5 class="card-title">Belangrijke Metrieken</h5>
<ul class="list-group list-group-flush">
<li class="list-group-item">Totaal Gebruikers: 10,000</li>
<li class="list-group-item">Nieuwe Gebruikers: 500</li>
<li class="list-group-item">Bouncepercentage: 25%</li>
</ul>
</div>
</div>
</div>
</div>
</main>
Eindelijk, plak deze voorbeeldgegevens net voor de afsluitende body </body> tag. Dit is niet nodig als je alleen de Bootstrap kolommen in actie wilt zien. We voegen deze voorbeeldgegevens toe zodat Chart.js de informatie kan oppikken en deze op een interactieve grafiek kan tonen.
<script>
// Websiteverkeer Lijngrafiek
var trafficCtx = document.getElementById('trafficChart').getContext('2d');
var trafficChart = new Chart(trafficCtx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mrt', 'Apr', 'Mei', 'Jun'],
datasets: [{
label: 'Unieke Bezoekers',
data: [8000, 9500, 10200, 9800, 11000, 12500],
borderColor: 'rgba(75, 192, 192, 1)',
fill: false
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
// Gebruikersverwerving Staafdiagram
var userCtx = document.getElementById('userChart').getContext('2d');
var userChart = new Chart(userCtx, {
type: 'bar',
data: {
labels: ['Jan', 'Feb', 'Mrt', 'Apr', 'Mei', 'Jun'],
datasets: [{
label: 'Nieuwe Gebruikers',
data: [400, 450, 500, 450, 550, 600],
backgroundColor: 'rgba(54, 162, 235, 0.6)'
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>Wanneer je alles bij elkaar zet, zie je een prachtig dashboard met een lijndiagram en een staafdiagram die de groei in onze kernindicatoren tonen. De kernindicatoren zijn ook aan de rechterkant zichtbaar in tabelvorm.
We hebben de containerklasse gebruikt om de inhoud te centreren en wat padding toe te voegen. De row-klasse creëert een rij en de col-md-* klassen bepalen de kolombreedtes.
De linker kolom (col-md-8) heeft twee kaarten voor grafieken, terwijl de rechter kolom (col-md-4) een kaart heeft met belangrijke metrieken in een lijstgroep.
De Footer Toevoegen
Bijna klaar!
Laten we een voettekst toevoegen met wat auteursrechtinformatie en links. We gebruiken de <footer> tag en Bootstrap’s gridsysteem en afstandsfuncties om de lay-out en padding te beheersen.
<footer class="bg-light py-3">
<div class="container">
<div class="row">
<div class="col-md-6">
<p>© 2023 Analytics Dashboard. Alle rechten voorbehouden.</p>
</div>
<div class="col-md-6 text-md-end">
<a href="#">Privacybeleid</a>
<a href="#" class="ms-3">Servicevoorwaarden</a>
</div>
</div>
</div>
</footer>Je zou nu deze voettekst onderaan je dashboard moeten zien.
De bg-light klasse geeft de voettekst een lichte achtergrondkleur, en py-3 voegt verticale padding toe. We hebben de voettekst opgesplitst in twee kolommen: één voor het auteursrecht en één voor de links. De text-md-end klasse lijnt de links uit naar rechts op middelgrote schermen en grotere.
Alles Samenvoegen
Laten we nu de code combineren zodat je het complete plaatje kunt zien.
<p><!DOCTYPE html><br />
<html lang="nl"><br />
<head><br />
<meta charset="UTF-8"><br />
<meta name="viewport" content="width=device-width, initial-scale=1.0"><br />
<title>Analytics Dashboard</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script></p>
<p></head><br />
<body></p>
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Analytics Dashboard</a><br />
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><br />
<span class="navbar-toggler-icon"></span><br />
</button></p>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link active" href="#">Overzicht</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Rapporten</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Instellingen</a>
</li>
</ul></div>
</p></div>
</nav>
</header>
<p> <main class="container my-5"></p>
<div class="row">
<div class="col-md-8">
<div class="card mb-4">
<div class="card-body">
<h5 class="card-title">Websiteverkeer</h5>
<p> <canvas id="trafficChart"></canvas>
</div>
</p></div>
<div class="card mb-4">
<div class="card-body">
<h5 class="card-title">Gebruikersverwerving</h5>
<p> <canvas id="userChart"></canvas>
</div>
</p></div>
</p></div>
<div class="col-md-4">
<div class="card mb-4">
<div class="card-body">
<h5 class="card-title">Kernstatistieken</h5>
<ul class="list-group list-group-flush">
<li class="list-group-item">Totaal Gebruikers: 10,000</li>
<li class="list-group-item">Nieuwe Gebruikers: 500</li>
<li class="list-group-item">Bouncepercentage: 25%</li>
</ul></div>
</p></div>
</p></div>
</p></div>
<p> </main><br />
<script><br />
// Website Traffic Line Chart<br />
var trafficCtx = document.getElementById('trafficChart').getContext('2d');<br />
var trafficChart = new Chart(trafficCtx, {<br />
type: 'line',<br />
data: {<br />
labels: ['Jan', 'Feb', 'Mrt', 'Apr', 'Mei', 'Jun'],<br />
datasets: [{<br />
label: 'Unieke Bezoekers',<br />
data: [8000, 9500, 10200, 9800, 11000, 12500],<br />
borderColor: 'rgba(75, 192, 192, 1)',<br />
fill: false<br />
}]<br />
},<br />
options: {<br />
responsive: true,<br />
scales: {<br />
y: {<br />
beginAtZero: true<br />
}<br />
}<br />
}<br />
});</p>
<p> // User Acquisition Bar Chart<br />
var userCtx = document.getElementById('userChart').getContext('2d');<br />
var userChart = new Chart(userCtx, {<br />
type: 'bar',<br />
data: {<br />
labels: ['Jan', 'Feb', 'Mrt', 'Apr', 'Mei', 'Jun'],<br />
datasets: [{<br />
label: 'Nieuwe Gebruikers',<br />
data: [400, 450, 500, 450, 550, 600],<br />
backgroundColor: 'rgba(54, 162, 235, 0.6)'<br />
}]<br />
},<br />
options: {<br />
responsive: true,<br />
scales: {<br />
y: {<br />
beginAtZero: true<br />
}<br />
}<br />
}<br />
});<br />
</script><br />
</body></p>
<footer class="bg-light py-3">
<div class="container">
<div class="row">
<div class="col-md-6">
<p>© 2023 Analytics Dashboard. Alle rechten voorbehouden.</p>
</p></div>
<div class="col-md-6 text-md-end">
<a href="#">Privacybeleid</a><br />
<a href="#" class="ms-3">Voorwaarden</a>
</div>
</p></div>
</p></div>
</footer>
<p></html></p>Zoals je kunt zien, bevindt de responsieve navigatiebalk zich bovenaan, met de grafieken er direct onder. Bootstrap regelt de opvulling en ruimte tussen de grid-items, wat je kunt zien bij je dashboardstatistieken.
Aan de onderkant van het scherm bevindt zich de voettekst met de links naar het Privacybeleid en de Servicevoorwaarden.
Je hebt zojuist een eenvoudig analyse-dashboard gecreëerd met Bootstrap. Maar Bootstrap heeft tal van componenten waar we nog niet eens naar gekeken hebben. Zorg ervoor dat je de bibliotheek met Bootstrap-componenten verkent om herbruikbare componenten te vinden voor je toekomstige projecten.
Een Toolkit Voor Responsief Webdesign
Bootstrap is een populair Framework dat webontwikkelaars helpt snel responsieve websites te creëren. Het beschikt over een gridsysteem, vooraf gebouwde componenten en aanpassingsopties, waardoor het makkelijker wordt om websites te ontwikkelen die er goed uitzien op verschillende apparaten.
Ontwikkelaars van alle ervaringsniveaus gebruiken Bootstrap. Het is vrij eenvoudig te leren, maar krachtig genoeg om grote projecten aan te pakken. Er is een grote gemeenschap van Bootstrap-gebruikers voor ondersteuning en veel bronnen om je te helpen het framework te leren.
Wanneer je een Bootstrap-site bouwt, heb je ook een goede hostingbedrijf nodig. DreamHost heeft een virtual private server (VPS) optie die perfect werkt. Het is flexibel en kan verschillende behoeften aan als je Bootstrap-site groeit.
Waarom geef je Bootstrap niet een kans en zie wat je kunt creëren? Met de juiste tools en een hostingplan van een bedrijf zoals Dreamhost, kun je in een mum van tijd responsieve websites maken.
