Zmogljiv, razširljiv komplet orodij za čelni vmesnik, poln funkcij. Zgradite in prilagodite s Sassom, uporabite vnaprej zgrajen mrežni sistem in komponente ter oživite projekte z zmogljivimi vtičniki JavaScript.
Trenutno v5.2.1 · Prenos · Dokumenti v4.6.x · Vse izdaje
Skočite naravnost v gradnjo z Bootstrapom – uporabite CDN, namestite ga prek upravitelja paketov ali prenesite izvorno kodo.
Namestite izvorne datoteke Bootstrap Sass in JavaScript prek npm, RubyGems, Composer ali Meteor. Paketno upravljane namestitve ne vključujejo dokumentacije ali naših celotnih skriptov za gradnjo. Za hitro ustvarjanje projekta Bootstrap prek npm lahko uporabite tudi naš repo predloge npm.
npm install [email protected]gem install bootstrap -v 5.2.1Preberite naše namestitvene dokumente za več informacij in dodatne upravitelje paketov.
Ko morate vključiti samo CSS ali JS, ki ga je prevedel Bootstrap, lahko uporabite jsDelivr . Oglejte si ga v akciji z našim preprostim hitrim zagonom ali prebrskajte primere za hiter začetek vašega naslednjega projekta. Lahko se tudi odločite, da Popper in naš JS vključite ločeno .
<!-- 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>
Poskusite vključiti izvorne datoteke Bootstrapa v nov projekt z našimi uradnimi vodniki.
Bootstrap uporablja Sass za modularno in prilagodljivo arhitekturo. Uvozite samo komponente, ki jih potrebujete, omogočite globalne možnosti, kot so prelivi in sence, ter napišite svoj CSS z našimi spremenljivkami, zemljevidi, funkcijami in mešanicami.
Uvozite eno slogovno tabelo in že boste tekmovali z vsako funkcijo našega CSS.
// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";
// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";
Izvedite več o naših globalnih možnostih Sass .
Najlažji način za prilagajanje Bootstrapa – vključite samo CSS, ki ga potrebujete.
// 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";
Izvedite več o uporabi Bootstrapa s Sassom .
Bootstrap 5 se razvija z vsako izdajo za boljšo uporabo spremenljivk CSS za globalne sloge tem, posamezne komponente in celo pripomočke. Nudimo na desetine spremenljivk za barve, sloge pisav in drugo na :rootravni za uporabo kjer koli. V komponentah in pripomočkih so spremenljivke CSS omejene na ustrezen razred in jih je mogoče preprosto spremeniti.
Za pisanje novih slogov uporabite katero koli od naših globalnih :rootspremenljivk . Spremenljivke CSS uporabljajo var(--bs-variableName)sintakso in jih lahko podedujejo podrejeni 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);
}Preglasite globalne spremenljivke, spremenljivke komponente ali razreda pripomočkov, da prilagodite Bootstrap tako, kot želite. Ni potrebe po ponovni deklaraciji vsakega pravila, le nova vrednost spremenljivke.
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;
}Novo v Bootstrap 5, naše pripomočke zdaj generira naš Utility API . Zgradili smo ga kot zemljevid Sass s številnimi funkcijami, ki ga je mogoče hitro in preprosto prilagoditi. Še nikoli ni bilo lažje dodajati, odstranjevati ali spreminjati katere koli razrede pripomočkov. Naredite pripomočke odzivne, dodajte različice psevdorazredov in jim dajte imena po meri.
// 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,
)
)
);
Preprosto dodajte skrite elemente, ki jih je mogoče preklapljati, modale in menije zunaj platna, pojavne elemente in namige za orodja ter še veliko več – vse brez jQuery. JavaScript v Bootstrapu je najprej HTML, kar pomeni, da je dodajanje vtičnikov tako preprosto kot dodajanje dataatributov. Potrebujete več nadzora? Programsko vključite posamezne vtičnike.
Zakaj bi pisali več JavaScripta, če lahko pišete HTML? Skoraj vsi Bootstrapovi vtičniki JavaScript imajo prvovrsten podatkovni API, ki vam omogoča uporabo JavaScripta samo z dodajanjem dataatributov.
<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>
Izvedite več o našem JavaScriptu kot modulih in uporabi programskega API-ja .
Bootstrap vsebuje ducat vtičnikov, ki jih lahko spustite v kateri koli projekt. Spustite jih vse naenkrat ali izberite samo tiste, ki jih potrebujete.
Bootstrap Icons je odprtokodna knjižnica ikon SVG, ki vsebuje več kot 1500 glifov, z vsako izdajo dodanih več. Zasnovani so za delo v katerem koli projektu, ne glede na to, ali uporabljate sam Bootstrap ali ne. Uporabite jih kot SVG ali pisave ikon – obe možnosti vam omogočata vektorsko skaliranje in preprosto prilagajanje prek CSS.
Popeljite Bootstrap na naslednjo raven z vrhunskimi temami iz uradne tržnice Bootstrap Themes . Teme so zgrajene na Bootstrapu kot lastna razširjena ogrodja, bogata z novimi komponentami in vtičniki, dokumentacijo in zmogljivimi orodji za gradnjo.
