Kraftfull, utbyggbar och funktionsspäckad frontend-verktygssats. Bygg och anpassa med Sass, använd förbyggda rutsystem och komponenter, och ge liv till projekt med kraftfulla JavaScript-plugins.
För närvarande v5.2.1 · Ladda ner · v4.6.x-dokument · Alla utgåvor
Hoppa direkt in i byggnaden med Bootstrap – använd CDN, installera den via pakethanteraren eller ladda ner källkoden.
Installera Bootstraps käll-Sass- och JavaScript-filer via npm, RubyGems, Composer eller Meteor. Pakethanterade installationer inkluderar inte dokumentation eller våra fullständiga byggskript. Du kan också använda vår npm mall repo för att snabbt generera ett Bootstrap-projekt via npm.
npm install [email protected]gem install bootstrap -v 5.2.1Läs våra installationsdokument för mer information och ytterligare pakethanterare.
När du bara behöver inkludera Bootstraps kompilerade CSS eller JS kan du använda jsDelivr . Se det i aktion med vår enkla snabbstart eller bläddra bland exemplen för att komma igång med ditt nästa projekt. Du kan också välja att inkludera Popper och vår 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 använder Sass för en modulär och anpassningsbar arkitektur. Importera bara de komponenter du behöver, aktivera globala alternativ som gradienter och skuggor och skriv din egen CSS med våra variabler, kartor, funktioner och mixins.
Importera en stilmall och du är iväg till tävlingarna med alla funktioner i vår CSS.
// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";
// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";
Läs mer om våra globala Sass-alternativ .
Det enklaste sättet att anpassa Bootstrap – inkludera bara den CSS du behöver.
// 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äs mer om att använda Bootstrap med Sass .
Bootstrap 5 utvecklas med varje utgåva för att bättre utnyttja CSS-variabler för globala temastilar, enskilda komponenter och till och med verktyg. Vi tillhandahåller dussintals variabler för färger, teckensnittsstilar och mer på en :rootnivå som kan användas var som helst. På komponenter och verktyg är CSS-variabler omfångade till den relevanta klassen och kan enkelt modifieras.
Använd någon av våra globala :rootvariabler för att skriva nya stilar. CSS-variabler använder var(--bs-variableName)syntaxen och kan ärvas av underordnade element.
.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);
}Åsidosätt globala, komponent- eller nyttoklassvariabler för att anpassa Bootstrap precis som du vill. Inget behov av att omdeklarera varje regel, bara ett nytt variabelvärde.
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;
}Nytt i Bootstrap 5, våra verktyg genereras nu av vårt Utility API . Vi byggde den som en funktionsspäckad Sass-karta som snabbt och enkelt kan anpassas. Det har aldrig varit enklare att lägga till, ta bort eller ändra några verktygsklasser. Gör verktyg lyhörda, lägg till pseudoklassvarianter och ge dem anpassade namn.
// 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,
)
)
);
Lägg enkelt till växlingsbara dolda element, modaler och offcanvas-menyer, popovers och verktygstips och så mycket mer – allt utan jQuery. JavaScript i Bootstrap är HTML-first, vilket innebär att lägga till plugins är lika enkelt som att lägga till dataattribut. Behöver du mer kontroll? Inkludera individuella plugins programmatiskt.
Varför skriva mer JavaScript när du kan skriva HTML? Nästan alla Bootstraps JavaScript-plugins har ett förstklassigt data-API, så att du kan använda JavaScript bara genom att lägga till dataattribut.
<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 dig mer om vårt JavaScript som moduler och hur du använder det programmatiska API:et .
Bootstrap har ett dussin plugins som du kan släppa in i alla projekt. Släpp in dem på en gång, eller välj bara de du behöver.
Bootstrap Icons är ett SVG-ikonbibliotek med öppen källkod med över 1 500 glyfer, och fler läggs till för varje version. De är designade för att fungera i alla projekt, oavsett om du använder Bootstrap själv eller inte. Använd dem som SVG:er eller ikonteckensnitt – båda alternativen ger dig vektorskalning och enkel anpassning via CSS.
Ta Bootstrap till nästa nivå med premiumteman från den officiella Bootstrap Themes-marknaden . Teman är byggda på Bootstrap som sina egna utökade ramverk, rika på nya komponenter och plugins, dokumentation och kraftfulla byggverktyg.
