Krêftige, útwreidbere, en mei funksjes fol frontend toolkit. Bou en oanpasse mei Sass, brûk foarboude rastersysteem en komponinten, en bring projekten ta libben mei krêftige JavaScript-plugins.
Op it stuit v5.2.1 · Download · v4.6.x docs · Alle releases
Gean direkt yn it bouwen mei Bootstrap - brûk de CDN, ynstallearje it fia pakketbehearder, of download de boarnekoade.
Ynstallearje de boarne Sass- en JavaScript-bestannen fan Bootstrap fia npm, RubyGems, Composer, of Meteor. Pakket beheare ynstallaasjes omfetsje gjin dokumintaasje of ús folsleine build-skripts. Jo kinne ek ús npm-sjabloan repo brûke om fluch in Bootstrap-projekt te generearjen fia npm.
npm install [email protected]gem install bootstrap -v 5.2.1Lês ús ynstallaasjedokuminten foar mear ynfo en ekstra pakketbehearders.
As jo allinich Bootstrap's kompilearre CSS of JS moatte opnimme, kinne jo jsDelivr . Sjoch it yn aksje mei ús ienfâldige rappe start , of blêdzje troch de foarbylden om jo folgjende projekt te springen. Jo kinne ek kieze om Popper en ús JS apart op te nimmen .
<!-- 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 brûkt Sass foar in modulêre en oanpasbere arsjitektuer. Ymportearje allinich de komponinten dy't jo nedich binne, ynskeakelje globale opsjes lykas gradiënten en skaden, en skriuw jo eigen CSS mei ús fariabelen, kaarten, funksjes en mixins.
Ymportearje ien stylblêd en jo geane nei de races mei elke funksje fan ús CSS.
// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";
// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";
Learje mear oer ús globale Sass-opsjes .
De maklikste manier om Bootstrap oan te passen - befetsje allinich de CSS dy't jo nedich binne.
// 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";
Learje mear oer it brûken fan Bootstrap mei Sass .
Bootstrap 5 evoluearret mei elke release om CSS-fariabelen better te brûken foar globale temastilen, yndividuele komponinten en sels nutsbedriuwen. Wy leverje tsientallen fariabelen foar kleuren, lettertypestilen en mear op in :rootnivo om oeral te brûken. Op komponinten en nutsbedriuwen wurde CSS-fariabelen scoped nei de oanbelangjende klasse en kinne maklik wurde wizige.
Brûk ien fan ús globale :rootfariabelen om nije stilen te skriuwen. CSS-fariabelen brûke de var(--bs-variableName)syntaksis en kinne wurde erfd troch berneleminten.
.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);
}Oerskriuwe globale, komponint, of nutklasse fariabelen om Bootstrap oan te passen krekt sa't jo wolle. Gjin needsaak om elke regel opnij te ferklearjen, gewoan in nije fariabele wearde.
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;
}Nij yn Bootstrap 5, ús nutsbedriuwen wurde no generearre troch ús Utility API . Wy bouden it as in funksje-ynpakt Sass-kaart dy't fluch en maklik kin wurde oanpast. It hat noait makliker west om nutsklassen ta te foegjen, te ferwiderjen of te feroarjen. Meitsje nutsbedriuwen responsyf, foegje pseudo-klasse farianten ta en jou har oanpaste nammen.
// 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,
)
)
);
Foegje maklik wikselbere ferburgen eleminten, modalen en offcanvas-menu's, popovers en tooltips ta, en sa folle mear - allegear sûnder jQuery. JavaScript yn Bootstrap is HTML-earst, wat betsjut dat it tafoegjen fan plugins sa maklik is as it tafoegjen fan dataattributen. Mear kontrôle nedich? Ynklusyf yndividuele plugins programmatysk.
Wêrom mear JavaScript skriuwe as jo HTML kinne skriuwe? Hast alle JavaScript-plugins fan Bootstrap hawwe in earste-klasse gegevens API, wêrtroch jo JavaScript kinne brûke troch gewoan dataattributen ta te foegjen.
<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>
Learje mear oer ús JavaScript as modules en it brûken fan de programmatyske API .
Bootstrap hat in tsiental plugins dy't jo yn elk projekt kinne falle. Drop se yn ien kear yn, of kies krekt dejingen dy't jo nedich hawwe.
Bootstrap Icons is in iepen boarne SVG-ikoanbibleteek mei mear dan 1,500 glyphs, mei mear tafoege elke release. Se binne ûntworpen om te wurkjen yn elk projekt, of jo Bootstrap sels brûke of net. Brûk se as SVG's as ikoanlettertypen - beide opsjes jouwe jo fektorskalearring en maklike oanpassing fia CSS.
Nim Bootstrap nei it folgjende nivo mei premium tema's fan 'e offisjele Bootstrap Themes Marketplace . Tema's binne boud op Bootstrap as har eigen útwreide kaders, ryk mei nije komponinten en plugins, dokumintaasje en krêftige build-ark.
