Snažan, proširiv set alata za sučelje prepun značajki. Gradite i prilagođavajte sa Sassom, koristite unaprijed izgrađeni grid sustav i komponente i oživite projekte pomoću moćnih JavaScript dodataka.
Trenutno v5.2.1 · Preuzmi · v4.6.x dokumenti · Sva izdanja
Skočite odmah u izgradnju s Bootstrapom—koristite CDN, instalirajte ga putem upravitelja paketa ili preuzmite izvorni kod.
Instalirajte Bootstrapove izvorne Sass i JavaScript datoteke putem npm, RubyGems, Composer ili Meteor. Instalacije kojima se upravlja paketima ne uključuju dokumentaciju ili naše pune skripte za izgradnju. Također možete koristiti naš npm repo predložak za brzo generiranje Bootstrap projekta putem npm-a.
npm install [email protected]gem install bootstrap -v 5.2.1Pročitajte našu instalacijsku dokumentaciju za više informacija i dodatne upravitelje paketima.
Kada samo trebate uključiti Bootstrapov kompilirani CSS ili JS, možete koristiti jsDelivr . Pogledajte ga na djelu s našim jednostavnim brzim početkom ili pregledajte primjere kako biste pokrenuli svoj sljedeći projekt. Također možete odlučiti uključiti Popper i naš JS odvojeno .
<!-- 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 koristi Sass za modularnu i prilagodljivu arhitekturu. Uvezite samo one komponente koje su vam potrebne, omogućite globalne opcije kao što su gradijenti i sjene i napišite vlastiti CSS s našim varijablama, mapama, funkcijama i mixinovima.
Uvezite jednu tablicu stilova i krećete u utrke sa svakom značajkom našeg CSS-a.
// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";
// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";
Saznajte više o našim globalnim Sass opcijama .
Najlakši način da prilagodite Bootstrap—uključite samo CSS koji vam je potreban.
// 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";
Saznajte više o korištenju Bootstrapa sa Sassom .
Bootstrap 5 razvija se sa svakim izdanjem kako bi bolje iskoristio CSS varijable za globalne stilove tema, pojedinačne komponente, pa čak i uslužne programe. Nudimo desetke varijabli za boje, stilove fonta i više na :rootrazini za korištenje bilo gdje. Na komponentama i uslužnim programima, CSS varijable su ograničene na relevantnu klasu i mogu se lako mijenjati.
Upotrijebite bilo koju od naših globalnih :rootvarijabli za pisanje novih stilova. CSS varijable koriste var(--bs-variableName)sintaksu i mogu ih naslijediti podređeni 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);
}Nadjačajte globalne, komponente ili varijable klase uslužnog programa da biste prilagodili Bootstrap kako želite. Nema potrebe ponovno deklarirati svako pravilo, samo nova vrijednost varijable.
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 u Bootstrapu 5, naše pomoćne programe sada generira naš Utility API . Napravili smo je kao Sass kartu punu značajki koja se može brzo i jednostavno prilagoditi. Nikada nije bilo lakše dodavati, uklanjati ili mijenjati bilo koje klase uslužnih programa. Učinite uslužne programe responzivnima, dodajte varijante pseudo-klasa i dajte im prilagođena imena.
Saznajte više o uslužnim programima Istražite prilagođene 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,
)
)
);
Jednostavno dodajte skrivene elemente koji se mogu mijenjati, modalne i izvanplatne izbornike, skočne prozore i opise alata i još mnogo toga—sve bez jQueryja. JavaScript u Bootstrapu je na prvom mjestu HTML, što znači da je dodavanje dodataka jednostavno kao i dodavanje dataatributa. Trebate više kontrole? Uključite pojedinačne dodatke programski.
Zašto pisati više JavaScripta kada možete pisati HTML? Gotovo svi Bootstrapovi JavaScript dodaci imaju prvoklasni podatkovni API, koji vam omogućuje korištenje JavaScripta samo dodavanjem dataatributa.
<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>
Saznajte više o našem JavaScriptu kao modulima i korištenju programskog API-ja .
Bootstrap sadrži desetak dodataka koje možete ubaciti u bilo koji projekt. Ubacite ih sve odjednom ili odaberite samo one koje trebate.
Bootstrap Icons biblioteka je SVG ikona otvorenog koda koja sadrži preko 1500 glifova, a svakim izdanjem dodaje se više. Osmišljeni su za rad u bilo kojem projektu, bez obzira koristite li sam Bootstrap ili ne. Upotrijebite ih kao SVG-ove ili fontove ikona — obje vam opcije daju vektorsko skaliranje i jednostavnu prilagodbu putem CSS-a.
Podignite Bootstrap na višu razinu s premium temama sa službenog tržišta Bootstrap Themes . Teme su izgrađene na Bootstrapu kao vlastiti prošireni okviri, bogati novim komponentama i dodacima, dokumentacijom i snažnim alatima za izgradnju.
