Krachtige, uitbreidbare en veelzijdige frontend-toolkit. Bouw en pas aan met Sass, gebruik vooraf gebouwde rastersystemen en componenten en breng projecten tot leven met krachtige JavaScript-plug-ins.
Momenteel v5.2.1 · Download · v4.6.x documenten · Alle releases
Ga direct aan de slag met Bootstrap: gebruik het CDN, installeer het via pakketbeheerder of download de broncode.
Installeer de Sass- en JavaScript-bronbestanden van Bootstrap via npm, RubyGems, Composer of Meteor. Pakketbeheerde installaties bevatten geen documentatie of onze volledige buildscripts. U kunt ook onze npm-sjabloonrepo gebruiken om snel een Bootstrap-project te genereren via npm.
npm install [email protected]gem install bootstrap -v 5.2.1Lees onze installatiedocumenten voor meer info en extra pakketbeheerders.
Als u alleen de gecompileerde CSS of JS van Bootstrap hoeft op te nemen, kunt u jsDelivr gebruiken . Zie het in actie met onze eenvoudige snelstart of blader door de voorbeelden om uw volgende project een vliegende start te geven. Je kunt er ook voor kiezen om Popper en onze JS apart op te nemen .
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
Bootstrap gebruikt Sass voor een modulaire en aanpasbare architectuur. Importeer alleen de componenten die je nodig hebt, schakel globale opties zoals verlopen en schaduwen in en schrijf je eigen CSS met onze variabelen, kaarten, functies en mixins.
Importeer één stylesheet en je kunt aan de races beginnen met elke functie van onze CSS.
// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";
// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";
Lees meer over onze wereldwijde Sass-opties .
De eenvoudigste manier om Bootstrap aan te passen: neem alleen de CSS op die u nodig hebt.
// Functions first
@import "../node_modules/bootstrap/scss/functions";
// Variable overrides second
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";
// Required Bootstrap imports
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";
// Optional components
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/helpers";
@import "../node_modules/bootstrap/scss/utilities/api";
Meer informatie over het gebruik van Bootstrap met Sass .
Bootstrap 5 evolueert met elke release om CSS-variabelen beter te gebruiken voor globale themastijlen, individuele componenten en zelfs hulpprogramma's. We bieden tientallen variabelen voor kleuren, letterstijlen en meer op een :rootniveau dat overal kan worden gebruikt. Op componenten en hulpprogramma's zijn CSS-variabelen afgestemd op de relevante klasse en kunnen ze eenvoudig worden gewijzigd.
Gebruik een van onze globale :rootvariabelen om nieuwe stijlen te schrijven. CSS-variabelen gebruiken de var(--bs-variableName)syntaxis en kunnen worden overgenomen door onderliggende elementen.
.component {
color: var(--bs-gray-800);
background-color: var(--bs-gray-100);
border: 1px solid var(--bs-gray-200);
border-radius: .25rem;
}
.component-header {
color: var(--bs-purple);
}Overschrijf globale, component- of hulpprogrammaklassevariabelen om Bootstrap naar wens aan te passen. Het is niet nodig om elke regel opnieuw te declareren, alleen een nieuwe variabelewaarde.
body {
--bs-body-font-family: var(--bs-font-monospace);
--bs-body-line-height: 1.4;
--bs-body-bg: var(--bs-gray-100);
}
.table {
--bs-table-color: var(--bs-gray-600);
--bs-table-bg: var(--bs-gray-100);
--bs-table-border-color: transparent;
}Nieuw in Bootstrap 5, onze hulpprogramma's worden nu gegenereerd door onze Utility API . We hebben het gebouwd als een Sass-kaart boordevol functies die snel en eenvoudig kan worden aangepast. Het is nog nooit zo eenvoudig geweest om utility-klassen toe te voegen, te verwijderen of te wijzigen. Maak hulpprogramma's responsief, voeg varianten van pseudo-klassen toe en geef ze aangepaste namen.
Meer informatie over hulpprogramma's Ontdek aangepaste componenten
// Create and extend utilities with the Utility API
@import "bootstrap/scss/bootstrap";
$utilities: map-merge(
$utilities,
(
"cursor": (
property: cursor,
class: cursor,
responsive: true,
values: auto pointer grab,
)
)
);
Voeg eenvoudig schakelbare verborgen elementen, modals en offcanvas-menu's, popovers en tooltips toe, en nog veel meer, allemaal zonder jQuery. JavaScript in Bootstrap is HTML-first, wat betekent dat het toevoegen van plug-ins net zo eenvoudig is als het toevoegen van dataattributen. Meer controle nodig? Individuele plug-ins programmatisch opnemen.
Waarom meer JavaScript schrijven als u HTML kunt schrijven? Bijna alle JavaScript-plug-ins van Bootstrap beschikken over een eersteklas gegevens-API, waardoor u JavaScript kunt gebruiken door simpelweg dataattributen toe te voegen.
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Dropdown item</a></li>
<li><a class="dropdown-item" href="#">Dropdown item</a></li>
<li><a class="dropdown-item" href="#">Dropdown item</a></li>
</ul>
</div>
Leer meer over onze JavaScript als modules en het gebruik van de programmatic API .
Bootstrap beschikt over een tiental plug-ins die u in elk project kunt laten vallen. Zet ze allemaal tegelijk in, of kies alleen degene die je nodig hebt.
Bootstrap Icons is een open source SVG-pictogrambibliotheek met meer dan 1500 glyphs, met elke release meer toegevoegd. Ze zijn ontworpen om in elk project te werken, of je nu Bootstrap zelf gebruikt of niet. Gebruik ze als SVG's of pictogramlettertypen: met beide opties kunt u vectorschalen en eenvoudig aanpassen via CSS.
Til Bootstrap naar een hoger niveau met premium thema's van de officiële Bootstrap Themes-marktplaats . Thema's zijn gebouwd op Bootstrap als hun eigen uitgebreide frameworks, rijk aan nieuwe componenten en plug-ins, documentatie en krachtige build-tools.
