Výkonná, rozšíriteľná a funkciami nabitá frontendová sada nástrojov. Vytvárajte a prispôsobujte pomocou Sass, využívajte vopred zostavený systém mriežky a komponenty a oživte projekty pomocou výkonných doplnkov JavaScript.
Aktuálne v5.2.1 · Stiahnuť · dokumenty v4.6.x · Všetky vydania
Skočte priamo do vytvárania pomocou Bootstrapu – použite CDN, nainštalujte ho cez správcu balíkov alebo si stiahnite zdrojový kód.
Nainštalujte zdrojové súbory Sass a JavaScript od Bootstrapu cez npm, RubyGems, Composer alebo Meteor. Inštalácie spravované balíkom nezahŕňajú dokumentáciu ani naše kompletné skripty na zostavenie. Môžete tiež použiť naše úložisko šablón npm na rýchle vygenerovanie projektu Bootstrap prostredníctvom npm.
npm install [email protected]gem install bootstrap -v 5.2.1Prečítajte si naše inštalačné dokumenty , kde nájdete ďalšie informácie a ďalších správcov balíkov.
Ak potrebujete zahrnúť iba kompilovaný CSS alebo JS Bootstrapu, môžete použiť jsDelivr . Pozrite si to v akcii pomocou nášho jednoduchého rýchleho štartu alebo si prezrite príklady a naštartujte svoj ďalší projekt. Môžete sa tiež rozhodnúť zahrnúť Popper a náš JS samostatne .
<!-- 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 využíva Sass pre modulárnu a prispôsobiteľnú architektúru. Importujte iba komponenty, ktoré potrebujete, povoľte globálne možnosti, ako sú prechody a tiene, a napíšte si vlastný CSS pomocou našich premenných, máp, funkcií a mixov.
Importujte jednu šablónu so štýlmi a môžete začať pretekať s každou funkciou nášho CSS.
// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";
// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";
Zistite viac o našich globálnych možnostiach Sass .
Najjednoduchší spôsob, ako prispôsobiť Bootstrap – zahrňte iba CSS, ktoré 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";
Získajte viac informácií o používaní Bootstrapu so Sass .
Bootstrap 5 sa s každým vydaním vyvíja, aby lepšie využíval premenné CSS pre globálne štýly tém, jednotlivé komponenty a dokonca aj pomocné programy. Poskytujeme desiatky premenných pre farby, štýly písma a ďalšie na :rootúrovni pre použitie kdekoľvek. Na komponentoch a pomôckach sú premenné CSS vymedzené pre príslušnú triedu a možno ich ľahko upraviť.
Na písanie nových štýlov použite ktorúkoľvek z našich globálnych :rootpremenných . Premenné CSS používajú var(--bs-variableName)syntax a môžu ich zdediť detské prvky.
.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);
}Prepíšte globálne premenné, komponent alebo pomocnú triedu a prispôsobte Bootstrap tak, ako chcete. Nie je potrebné znovu deklarovať každé pravidlo, stačí nová hodnota premennej.
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;
}Novinkou v Bootstrap 5 sú naše nástroje, ktoré teraz generuje naše API Utility . Vytvorili sme ju ako mapu Sass nabitú funkciami, ktorú možno rýchlo a jednoducho prispôsobiť. Nikdy nebolo jednoduchšie pridávať, odstraňovať alebo upravovať akékoľvek pomocné triedy. Urobte nástroje tak, aby boli responzívne, pridajte varianty pseudotried a dajte im vlastné názvy.
Zistite viac o pomôckach Preskúmajte prispôsobené komponenty
// 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,
)
)
);
Ľahko pridávajte prepínateľné skryté prvky, modály a ponuky mimo plátna, kontextové okná a popisky a ešte oveľa viac – všetko bez jQuery. JavaScript v Bootstrap je na prvom mieste HTML, čo znamená, že pridávanie doplnkov je rovnako jednoduché ako pridávanie dataatribútov. Potrebujete väčšiu kontrolu? Zahrňte jednotlivé doplnky programovo.
Prečo písať viac JavaScriptu, keď môžete písať HTML? Takmer všetky doplnky JavaScript od Bootstrapu obsahujú prvotriedne dátové rozhranie API, ktoré vám umožňuje používať JavaScript len pridaním dataatribútov.
<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>
Získajte viac informácií o našom JavaScripte ako moduloch a používaní programového rozhrania API .
Bootstrap obsahuje tucet doplnkov, ktoré môžete vložiť do akéhokoľvek projektu. Vložte ich všetky naraz alebo si vyberte len tie, ktoré potrebujete.
Bootstrap Icons je knižnica ikon SVG s otvoreným zdrojovým kódom, ktorá obsahuje viac ako 1 500 glyfov, pričom s každým vydaním pribúdajú ďalšie. Sú navrhnuté tak, aby fungovali v akomkoľvek projekte, či už používate samotný Bootstrap alebo nie. Použite ich ako SVG alebo ikonové fonty – obe možnosti vám poskytujú vektorové škálovanie a jednoduché prispôsobenie pomocou CSS.
Posuňte Bootstrap na ďalšiu úroveň s prémiovými témami z oficiálneho trhu s témami Bootstrap . Témy sú postavené na Bootstrap ako ich vlastné rozšírené rámce, bohaté na nové komponenty a doplnky, dokumentáciu a výkonné nástroje na zostavovanie.
