Öflugt, stækkanlegt og fullkomið framendaverkfærasett. Byggðu og sérsníddu með Sass, notaðu forsmíðað netkerfi og íhluti og lífgaðu við verkefni með öflugum JavaScript viðbótum.
Eins og er v5.2.1 · Sækja · v4.6.x skjöl · Allar útgáfur
Hoppa beint inn í byggingu með Bootstrap—notaðu CDN, settu það upp í gegnum pakkastjóra eða halaðu niður kóðanum.
Settu upp uppruna Sass og JavaScript skrár Bootstrap í gegnum npm, RubyGems, Composer eða Meteor. Pakkastýrðar uppsetningar innihalda ekki skjöl eða heildarbyggingarforskriftir okkar. Þú getur líka notað npm sniðmátið okkar til að búa fljótt til Bootstrap verkefni í gegnum npm.
npm install [email protected]gem install bootstrap -v 5.2.1Lestu uppsetningarskjölin okkar fyrir frekari upplýsingar og viðbótarpakkastjóra.
Þegar þú þarft aðeins að innihalda Bootstrap's compiled CSS eða JS geturðu notað jsDelivr . Sjáðu það í aðgerð með einföldu skyndibyrjun okkar , eða skoðaðu dæmin til að hefja næsta verkefni þitt. Þú getur líka valið að hafa Popper og JS okkar með sér .
<!-- 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 notar Sass fyrir mát og sérhannaðan arkitektúr. Flyttu aðeins inn þá íhluti sem þú þarft, virkjaðu alþjóðlega valkosti eins og halla og skugga og skrifaðu þitt eigið CSS með breytum okkar, kortum, aðgerðum og blöndunum.
Flyttu inn eitt stílblað og þú ert farinn í keppnina með alla eiginleika CSS okkar.
// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";
// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";
Lærðu meira um alþjóðlega Sass valkosti okkar .
Auðveldasta leiðin til að sérsníða Bootstrap - innifalið aðeins CSS sem þú þarft.
// 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ðu meira um notkun Bootstrap með Sass .
Bootstrap 5 er að þróast með hverri útgáfu til að nýta betur CSS breytur fyrir alþjóðlega þemastíla, einstaka íhluti og jafnvel tól. Við bjóðum upp á heilmikið af breytum fyrir liti, leturgerð og fleira á því :rootstigi sem hægt er að nota hvar sem er. Á íhlutum og tólum eru CSS breytur sniðnar að viðkomandi flokki og auðvelt er að breyta þeim.
Notaðu allar alþjóðlegu :rootbreyturnar okkar til að skrifa nýja stíla. CSS breytur nota var(--bs-variableName)setningafræðina og hægt er að erfa þær af barnaþáttum.
.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);
}Hnekaðu alþjóðlegum, íhluta- eða gagnaflokksbreytum til að sérsníða Bootstrap eins og þú vilt. Engin þörf á að endurgreina hverja reglu, bara nýtt breytugildi.
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;
}Nýtt í Bootstrap 5, tólin okkar eru nú búin til af Utility API okkar . Við smíðuðum það sem Sass kort sem er fullt af eiginleikum sem hægt er að aðlaga á fljótlegan og auðveldan hátt. Það hefur aldrei verið auðveldara að bæta við, fjarlægja eða breyta neinum tólum. Gerðu tólin móttækileg, bættu við gerviflokkaafbrigðum og gefðu þeim sérsniðin nöfn.
// 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,
)
)
);
Bættu auðveldlega við földum þáttum sem hægt er að skipta um, aðferðum og valmyndum utan striga, sprettiglugga og verkfæraábendingar og svo miklu meira - allt án jQuery. JavaScript í Bootstrap er HTML-fyrst, sem þýðir að bæta við viðbótum er eins auðvelt og að bæta við dataeiginleikum. Þarftu meiri stjórn? Láttu einstök viðbætur fylgja með forritunarlega.
Af hverju að skrifa meira JavaScript þegar þú getur skrifað HTML? Næstum öll JavaScript viðbætur Bootstrap eru með fyrsta flokks gagna-API, sem gerir þér kleift að nota JavaScript bara með því að bæta við dataeiginleikum.
<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ðu meira um JavaScript okkar sem einingar og notkun forritunar-API .
Bootstrap er með tugi viðbóta sem þú getur sleppt í hvaða verkefni sem er. Slepptu þeim í einu eða veldu bara þá sem þú þarft.
Bootstrap Icons er opinn uppspretta SVG táknasafn með yfir 1.500 táknmyndum, með fleiri bætt við hverri útgáfu. Þau eru hönnuð til að virka í hvaða verkefni sem er, hvort sem þú notar Bootstrap sjálft eða ekki. Notaðu þau sem SVG eða táknleturgerðir - báðir valkostir gefa þér vektorskala og auðvelda sérsnið í gegnum CSS.
Take Bootstrap to the next level with premium themes from the official Bootstrap Themes marketplace. Themes are built on Bootstrap as their own extended frameworks, rich with new components and plugins, documentation, and powerful build tools.
