Snažan, proširiv i prednji komplet alata pun funkcija. Izgradite i prilagodite sa Sass-om, koristite unaprijed izgrađeni grid sistem i komponente i oživite projekte pomoću moćnih JavaScript dodataka.
Trenutno v5.2.1 · Preuzimanje · v4.6.x dokumenti · Sva izdanja
Uskočite odmah u izgradnju s Bootstrapom – koristite CDN, instalirajte ga putem upravitelja paketa ili preuzmite izvorni kod.
Instalirajte izvorne Sass i JavaScript datoteke Bootstrapa putem npm, RubyGems, Composer ili Meteor. Instalacije kojima se upravlja paketom ne uključuju dokumentaciju ili naše kompletne skripte za izradu. Također možete koristiti naš npm predložak repo za brzo generiranje Bootstrap projekta putem npm-a.
npm install [email protected]gem install bootstrap -v 5.2.1Pročitajte naše instalacijske dokumente za više informacija i dodatne menadžere paketa.
Kada trebate samo da uključite Bootstrap-ov preveden CSS ili JS, možete koristiti jsDelivr . Pogledajte to na djelu pomoću našeg jednostavnog brzog početka ili pregledajte primjere da biste pokrenuli svoj sljedeći projekt. Također možete odabrati da uključite 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 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 miksinama.
Uvezite jednu tablicu stilova i krećete u utrke sa svakom funkcijom 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 Sass-om .
Bootstrap 5 se razvija sa svakim izdanjem kako bi bolje iskoristio CSS varijable za globalne stilove tema, pojedinačne komponente, pa čak i uslužne programe. Pružamo desetke varijabli za boje, stilove fonta i još mnogo toga na :rootnivou za upotrebu bilo gdje. Na komponentama i uslužnim programima, CSS varijable su obuhvaćene relevantnom klasom i mogu se lako modifikovati.
Koristite 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);
}Zaobiđite varijable globalne, komponentne ili uslužne klase da prilagodite Bootstrap onako kako želite. Nije potrebno 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 uslužne programe sada generiše naš Utility API . Napravili smo je kao Sass mapu punu značajki koja se može brzo i lako prilagoditi. Nikada nije bilo lakše dodati, ukloniti ili modificirati bilo koju uslužnu klasu. Učinite uslužne programe prilagodljivim, dodajte varijante pseudoklasa i dajte im prilagođena imena.
Saznajte više o komunalnim uslugama 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,
)
)
);
Lako dodajte skrivene elemente koji se mogu prebaciti, modale i menije van platna, iskačuće prikaze i opise alata i još mnogo toga—sve to bez jQueryja. JavaScript u Bootstrapu je prvi HTML, što znači da je dodavanje dodataka jednostavno kao i dodavanje dataatributa. Trebate više kontrole? Programski uključite pojedinačne dodatke.
Zašto pisati više JavaScript-a kada možete pisati HTML? Gotovo svi Bootstrap-ovi JavaScript dodaci imaju prvoklasni podatkovni API, koji vam omogućava da koristite JavaScript 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 projekat. Ubacite ih sve odjednom ili odaberite samo one koje su vam potrebne.
Bootstrap Icons je biblioteka otvorenog koda SVG ikona koja sadrži preko 1500 glifova, sa više dodanih svakim izdanjem. Dizajnirani su za rad u bilo kojem projektu, bez obzira da li koristite sam Bootstrap ili ne. Koristite ih kao SVG ili fontove za ikone—obe opcije vam daju vektorsko skaliranje i lako prilagođavanje putem CSS-a.
Podignite Bootstrap na viši nivo s vrhunskim temama sa službenog tržišta Bootstrap tema . Teme su izgrađene na Bootstrapu kao sopstveni prošireni okviri, bogati novim komponentama i dodacima, dokumentacijom i moćnim alatima za pravljenje.
