Jaudīgs, paplašināms un ar funkcijām bagāts priekšgala rīku komplekts. Veidojiet un pielāgojiet, izmantojot Sass, izmantojiet iepriekš izveidotu režģa sistēmu un komponentus un atdzīviniet projektus, izmantojot jaudīgus JavaScript spraudņus.
Pašlaik v5.2.1 · Lejupielādēt · v4.6.x dokumenti · Visi laidieni
Dodieties tieši uz ēku, izmantojot Bootstrap — izmantojiet CDN, instalējiet to, izmantojot pakotņu pārvaldnieku, vai lejupielādējiet avota kodu.
Instalējiet Bootstrap avota Sass un JavaScript failus, izmantojot npm, RubyGems, Composer vai Meteor. Paketes pārvaldītajās instalācijās nav iekļauta dokumentācija vai mūsu pilnie izveides skripti. Varat arī izmantot mūsu npm veidnes repo , lai ātri ģenerētu Bootstrap projektu, izmantojot npm.
npm install [email protected]gem install bootstrap -v 5.2.1Izlasiet mūsu instalēšanas dokumentus , lai iegūtu plašāku informāciju un papildu pakotņu pārvaldniekus.
Ja jums ir jāiekļauj tikai Bootstrap kompilētais CSS vai JS, varat izmantot jsDelivr . Skatiet to darbībā, izmantojot mūsu vienkāršo ātro palaišanu , vai pārlūkojiet piemērus , lai ātri sāktu savu nākamo projektu. Varat arī izvēlēties atsevišķi iekļaut Popper un mūsu JS .
<!-- 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>
Iegūstiet iespēju iekļaut Bootstrap avota failus jaunā projektā, izmantojot mūsu oficiālos ceļvežus.
Bootstrap izmanto Sass modulārai un pielāgojamai arhitektūrai. Importējiet tikai nepieciešamos komponentus, iespējojiet globālās opcijas, piemēram, gradientus un ēnas, un rakstiet savu CSS, izmantojot mūsu mainīgos, kartes, funkcijas un miksus.
Importējiet vienu stila lapu, un jūs varat piedalīties sacensībās ar katru mūsu CSS funkciju.
// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";
// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";
Uzziniet vairāk par mūsu globālajām Sass iespējām .
Vienkāršākais veids, kā pielāgot Bootstrap — iekļaujiet tikai nepieciešamo CSS.
// 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";
Uzziniet vairāk par Bootstrap izmantošanu kopā ar Sass .
Bootstrap 5 attīstās ar katru izlaidumu, lai labāk izmantotu CSS mainīgos globālos motīvu stilus, atsevišķus komponentus un pat utilītas. Mēs piedāvājam desmitiem mainīgo lielumu krāsām, fontu stiliem un citiem tādā :rootlīmenī, lai tos varētu izmantot jebkurā vietā. Komponentos un utilītprogrammās CSS mainīgie ir iekļauti attiecīgajā klasē un tos var viegli modificēt.
Izmantojiet jebkuru no mūsu globālajiem :rootmainīgajiem , lai uzrakstītu jaunus stilus. CSS mainīgie izmanto var(--bs-variableName)sintaksi, un tos var mantot bērnu elementi.
.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);
}Ignorēt globālos, komponentu vai utilītu klases mainīgos, lai pielāgotu Bootstrap tieši tā, kā vēlaties. Nav nepieciešams atkārtoti deklarēt katru noteikumu, tikai jauna mainīgā vērtība.
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;
}Jaunums versijā Bootstrap 5 — mūsu utilītas tagad ģenerē mūsu Utility API . Mēs to izveidojām kā daudzfunkcionālu Sass karti, kuru var ātri un viegli pielāgot. Lietderību klases pievienošana, noņemšana vai modificēšana nekad nav bijusi tik vienkārša. Padariet utilītas atsaucīgas, pievienojiet pseidoklases variantus un piešķiriet tiem pielāgotus nosaukumus.
Uzziniet vairāk par komunālajiem pakalpojumiem Izpētiet pielāgotos komponentus
// 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,
)
)
);
Ērti pievienojiet pārslēdzamus slēptos elementus, modālus un ārpus kanvas izvēlnes, uznirstošos logus un rīka padomus un daudz ko citu — tas viss bez jQuery. JavaScript programmā Bootstrap vispirms ir HTML, kas nozīmē, ka spraudņu pievienošana ir tikpat vienkārša kā dataatribūtu pievienošana. Vai nepieciešama lielāka kontrole? Programmatiski iekļaujiet atsevišķus spraudņus.
Kāpēc rakstīt vairāk JavaScript, ja varat rakstīt HTML? Gandrīz visiem Bootstrap JavaScript spraudņiem ir pirmās klases datu API, kas ļauj izmantot JavaScript, vienkārši pievienojot dataatribūtus.
<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>
Uzziniet vairāk par mūsu JavaScript kā moduļiem un programmatiskās API izmantošanu .
Bootstrap piedāvā duci spraudņu, kurus varat ievietot jebkurā projektā. Ievietojiet tos visus uzreiz vai izvēlieties tikai vajadzīgos.
Bootstrap Icons ir atvērtā koda SVG ikonu bibliotēka, kurā ir vairāk nekā 1500 glifu, un katrā laidienā tiek pievienots vairāk. Tie ir paredzēti darbam jebkurā projektā neatkarīgi no tā, vai izmantojat pašu Bootstrap. Izmantojiet tos kā SVG vai ikonu fontus — abas opcijas nodrošina vektora mērogošanu un vienkāršu pielāgošanu, izmantojot CSS.
Paceliet Bootstrap uz nākamo līmeni ar augstākās kvalitātes motīviem no oficiālā Bootstrap tēmu tirgus . Motīvi ir veidoti, izmantojot Bootstrap kā savus paplašinātos ietvarus, kas ir bagāti ar jauniem komponentiem un spraudņiem, dokumentāciju un jaudīgiem veidošanas rīkiem.
