Kraftig, udvidelsesbar og funktionsfyldt frontend-værktøjskasse. Byg og tilpas med Sass, udnyt forudbygget gittersystem og komponenter, og bring projekter ud i livet med kraftfulde JavaScript-plugins.
I øjeblikket v5.2.1 · Download · v4.6.x-dokumenter · Alle udgivelser
Hop direkte ind i bygningen med Bootstrap – brug CDN, installer det via pakkehåndtering, eller download kildekoden.
Installer Bootstraps kilde Sass- og JavaScript-filer via npm, RubyGems, Composer eller Meteor. Pakkeadministrerede installationer inkluderer ikke dokumentation eller vores fulde build-scripts. Du kan også bruge vores npm skabelon repo til hurtigt at generere et Bootstrap-projekt via npm.
npm install [email protected]gem install bootstrap -v 5.2.1Læs vores installationsdokumenter for mere information og yderligere pakkeadministratorer.
Når du kun skal inkludere Bootstraps kompilerede CSS eller JS, kan du bruge jsDelivr . Se det i aktion med vores enkle hurtige start , eller gennemse eksemplerne for at komme i gang med dit næste projekt. Du kan også vælge at inkludere Popper og vores JS separat .
<!-- 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 bruger Sass til en modulær og tilpasselig arkitektur. Importer kun de komponenter, du har brug for, aktiver globale muligheder som gradienter og skygger, og skriv din egen CSS med vores variabler, kort, funktioner og mixins.
Importer ét stylesheet, og du er i gang med løbene med alle funktioner i vores CSS.
// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";
// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";
Lær mere om vores globale Sass-muligheder .
Den nemmeste måde at tilpasse Bootstrap - inkluder kun den CSS, du har brug for.
// 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";
Lær mere om brug af Bootstrap med Sass .
Bootstrap 5 udvikler sig med hver udgivelse for bedre at udnytte CSS-variabler til globale temastile, individuelle komponenter og endda hjælpeprogrammer. Vi leverer snesevis af variabler for farver, skrifttypestile og mere på et :rootniveau til brug overalt. På komponenter og hjælpeprogrammer er CSS-variabler omfanget til den relevante klasse og kan nemt ændres.
Brug en af vores globale :rootvariabler til at skrive nye stilarter. CSS-variabler bruger var(--bs-variableName)syntaksen og kan nedarves af underordnede elementer.
.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);
}Tilsidesæt globale variabler, komponent- eller hjælpeklassevariabler for at tilpasse Bootstrap, som du vil. Det er ikke nødvendigt at genangive hver regel, kun en ny variabelværdi.
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;
}Nyt i Bootstrap 5, vores hjælpeprogrammer er nu genereret af vores Utility API . Vi byggede det som et funktionsspækket Sass-kort, der hurtigt og nemt kan tilpasses. Det har aldrig været nemmere at tilføje, fjerne eller ændre nogen hjælpeklasser. Gør hjælpeprogrammer responsive, tilføj pseudoklassevarianter og giv dem brugerdefinerede navne.
// 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,
)
)
);
Tilføj nemt omskiftelige skjulte elementer, modaler og offcanvas-menuer, popovers og værktøjstip og meget mere – alt sammen uden jQuery. JavaScript i Bootstrap er HTML-først, hvilket betyder at tilføje plugins er lige så nemt som at tilføje dataattributter. Har du brug for mere kontrol? Inkluder individuelle plugins programmatisk.
Hvorfor skrive mere JavaScript, når du kan skrive HTML? Næsten alle Bootstraps JavaScript-plugins har en førsteklasses data-API, så du kan bruge JavaScript blot ved at tilføje dataattributter.
<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>
Lær mere om vores JavaScript som moduler og brug af den programmatiske API .
Bootstrap har et dusin plugins, som du kan slippe ind i ethvert projekt. Smid dem ind på én gang, eller vælg lige dem, du har brug for.
Bootstrap Icons er et open source SVG-ikonbibliotek med over 1.500 glyffer, med flere tilføjet hver udgivelse. De er designet til at fungere i ethvert projekt, uanset om du bruger selve Bootstrap eller ej. Brug dem som SVG'er eller ikonskrifttyper – begge muligheder giver dig vektorskalering og nem tilpasning via CSS.
Tag Bootstrap til næste niveau med premium-temaer fra den officielle Bootstrap Themes-markedsplads . Temaer er bygget på Bootstrap som deres egne udvidede rammer, rig på nye komponenter og plugins, dokumentation og kraftfulde byggeværktøjer.
