Kraftig, utvidbar og funksjonsrik frontend-verktøysett. Bygg og tilpass med Sass, bruk forhåndsbygde rutenettsystem og komponenter, og sett liv i prosjekter med kraftige JavaScript-plugins.
For øyeblikket v5.2.1 · Last ned · v4.6.x dokumenter · Alle utgivelser
Hopp rett inn i bygningen med Bootstrap – bruk CDN, installer den via pakkebehandling, eller last ned kildekoden.
Installer Bootstraps kilde Sass- og JavaScript-filer via npm, RubyGems, Composer eller Meteor. Pakkeadministrerte installasjoner inkluderer ikke dokumentasjon eller våre fullstendige byggeskript. Du kan også bruke vår npm mal repo for raskt å generere et Bootstrap-prosjekt via npm.
npm install [email protected]gem install bootstrap -v 5.2.1Les installasjonsdokumentene våre for mer informasjon og ytterligere pakkeadministratorer.
Når du bare trenger å inkludere Bootstraps kompilerte CSS eller JS, kan du bruke jsDelivr . Se den i aksjon med vår enkle hurtigstart , eller bla gjennom eksemplene for å komme i gang med neste prosjekt. Du kan også velge å inkludere Popper og 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 bruker Sass for en modulær og tilpassbar arkitektur. Importer bare komponentene du trenger, aktiver globale alternativer som gradienter og skygger, og skriv din egen CSS med våre variabler, kart, funksjoner og blandinger.
Importer ett stilark og du er i gang med løpene med alle funksjonene i vår CSS.
// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";
// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";
Lær mer om våre globale Sass-alternativer .
Den enkleste måten å tilpasse Bootstrap – inkluder bare CSS-en du trenger.
// 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 mer om bruk av Bootstrap med Sass .
Bootstrap 5 utvikler seg med hver utgivelse for å bedre utnytte CSS-variabler for globale temastiler, individuelle komponenter og til og med verktøy. Vi tilbyr dusinvis av variabler for farger, skriftstiler og mer på et :rootnivå for bruk hvor som helst. På komponenter og verktøy er CSS-variabler scoped til den aktuelle klassen og kan enkelt endres.
Bruk en av våre globale :rootvariabler for å skrive nye stiler. CSS-variabler bruker var(--bs-variableName)syntaksen og kan arves av 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);
}Overstyr globale variabler, komponent- eller verktøyklassevariabler for å tilpasse Bootstrap akkurat slik du vil. Du trenger ikke å omklarere hver regel, bare en ny variabelverdi.
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, verktøyene våre er nå generert av vår Utility API . Vi bygde det som et funksjonsfylt Sass-kart som raskt og enkelt kan tilpasses. Det har aldri vært enklere å legge til, fjerne eller endre verktøyklasser. Gjør verktøy responsive, legg til pseudoklassevarianter og gi dem tilpassede navn.
// 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,
)
)
);
Legg enkelt til vekslebare skjulte elementer, modaler og offcanvas-menyer, popovers og verktøytips og mye mer – alt uten jQuery. JavaScript i Bootstrap er HTML-først, noe som betyr å legge til plugins er like enkelt som å legge til dataattributter. Trenger du mer kontroll? Inkluder individuelle plugins programmatisk.
Hvorfor skrive mer JavaScript når du kan skrive HTML? Nesten alle Bootstraps JavaScript-plugins har en førsteklasses data-API, som lar deg bruke JavaScript bare ved å legge til 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 mer om JavaScript som moduler og bruk av programmatisk API .
Bootstrap har et dusin plugins som du kan slippe inn i ethvert prosjekt. Legg dem inn på en gang, eller velg bare de du trenger.
Bootstrap Icons er et åpen kildekode SVG-ikonbibliotek med over 1500 glyfer, med flere lagt til hver utgivelse. De er designet for å fungere i ethvert prosjekt, enten du bruker selve Bootstrap eller ikke. Bruk dem som SVG-er eller ikonfonter – begge alternativene gir deg vektorskalering og enkel tilpasning via CSS.
Ta Bootstrap til neste nivå med premium-temaer fra den offisielle Bootstrap Themes-markedet . Temaer er bygget på Bootstrap som deres egne utvidede rammeverk, rike med nye komponenter og plugins, dokumentasjon og kraftige byggeverktøy.
