Kragtige, uitbreidbare en funksiebelaaide frontend-nutsdingstel. Bou en pasmaak met Sass, gebruik voorafgeboude roosterstelsel en komponente, en bring projekte tot lewe met kragtige JavaScript-inproppe.
Tans v5.2.1 · Laai af · v4.6.x dokumente · Alle vrystellings
Spring reguit in die gebou met Bootstrap—gebruik die CDN, installeer dit via pakketbestuurder, of laai die bronkode af.
Installeer Bootstrap se bron Sass- en JavaScript-lêers via npm, RubyGems, Composer of Meteor. Pakketbestuurde installerings sluit nie dokumentasie of ons volledige bouskripte in nie. U kan ook ons npm-sjabloon-repo gebruik om vinnig 'n Bootstrap-projek via npm te genereer.
npm install [email protected]gem install bootstrap -v 5.2.1Lees ons installasiedokumente vir meer inligting en bykomende pakketbestuurders.
Wanneer jy net Bootstrap se saamgestelde CSS of JS moet insluit, kan jy jsDelivr gebruik . Sien dit in aksie met ons eenvoudige vinnige begin , of blaai deur die voorbeelde om jou volgende projek te begin. Jy kan ook kies om Popper en ons JS afsonderlik in te sluit .
<!-- 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 gebruik Sass vir 'n modulêre en aanpasbare argitektuur. Voer slegs die komponente in wat jy nodig het, aktiveer globale opsies soos gradiënte en skaduwees, en skryf jou eie CSS met ons veranderlikes, kaarte, funksies en mixins.
Voer een stylblad in en jy is weg na die resies met elke kenmerk van ons CSS.
// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";
// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";
Kom meer te wete oor ons globale Sass-opsies .
Die maklikste manier om Bootstrap aan te pas—sluit slegs die CSS in wat u benodig.
// 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";
Kom meer te wete oor die gebruik van Bootstrap met Sass .
Bootstrap 5 ontwikkel met elke vrystelling om CSS-veranderlikes beter te gebruik vir globale temastyle, individuele komponente en selfs nutsprogramme. Ons verskaf dosyne veranderlikes vir kleure, fontstyle en meer op 'n :rootvlak vir enige plek. Op komponente en nutsprogramme word CSS-veranderlikes na die betrokke klas gerangskik en kan maklik gewysig word.
Gebruik enige van ons globale :rootveranderlikes om nuwe style te skryf. CSS-veranderlikes gebruik die var(--bs-variableName)sintaksis en kan deur kinderelemente geërf word.
.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);
}Ignoreer globale, komponent- of nutsklasveranderlikes om Bootstrap aan te pas net soos jy wil. Dit is nie nodig om elke reël te herverklaar nie, net 'n nuwe veranderlike waarde.
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;
}Nuut in Bootstrap 5, ons nutsprogramme word nou gegenereer deur ons Utility API . Ons het dit gebou as 'n kenmerkbelaaide Sass-kaart wat vinnig en maklik aangepas kan word. Dit was nog nooit so maklik om enige nutsklasse by te voeg, te verwyder of te verander nie. Maak nutsprogramme reageer, voeg pseudo-klas variante by en gee hulle pasgemaakte name.
Kom meer te wete oor hulpprogramme Verken pasgemaakte komponente
// 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 maklik wisselbare versteekte elemente, modale en offcanvas-spyskaarte, popovers en nutswenke, en soveel meer by – alles sonder jQuery. JavaScript in Bootstrap is HTML-eerste, wat beteken dat die byvoeging van plugins so maklik is soos om dataeienskappe by te voeg. Het jy meer beheer nodig? Sluit individuele inproppe programmaties in.
Waarom meer JavaScript skryf as jy HTML kan skryf? Byna al Bootstrap se JavaScript-inproppe het 'n eersteklas data-API, wat jou toelaat om JavaScript te gebruik net deur dataeienskappe by te voeg.
<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>
Kom meer te wete oor ons JavaScript as modules en die gebruik van die programmatiese API .
Bootstrap beskik oor 'n dosyn inproppe wat u in enige projek kan laat val. Gooi hulle op een slag in, of kies net die wat jy nodig het.
Bootstrap Icons is 'n oopbron SVG-ikoonbiblioteek met meer as 1 500 glyfe, met meer bygevoeg elke vrystelling. Hulle is ontwerp om in enige projek te werk, of jy Bootstrap self gebruik of nie. Gebruik dit as SVG's of ikoonlettertipes - albei opsies gee jou vektorskaal en maklike aanpassing via CSS.
Neem Bootstrap na die volgende vlak met premium temas van die amptelike Bootstrap Themes-mark . Temas is gebou op Bootstrap as hul eie uitgebreide raamwerke, ryk aan nuwe komponente en inproppe, dokumentasie en kragtige bounutsgoed.
