Výkonná, rozšiřitelná a funkcemi nabitá frontendová sada nástrojů. Vytvářejte a přizpůsobujte pomocí Sass, využívejte předem sestavený gridový systém a komponenty a oživujte projekty pomocí výkonných pluginů JavaScriptu.
Aktuálně v5.2.1 · Stáhnout · Dokumenty v4.6.x · Všechna vydání
Skočte přímo do sestavování pomocí Bootstrap – použijte CDN, nainstalujte jej pomocí správce balíčků nebo si stáhněte zdrojový kód.
Nainstalujte zdrojové soubory Sass a JavaScript Bootstrapu přes npm, RubyGems, Composer nebo Meteor. Balíčkové řízené instalace nezahrnují dokumentaci ani naše kompletní skripty sestavení. Můžete také použít naše úložiště šablon npm k rychlému vygenerování projektu Bootstrap prostřednictvím npm.
npm install [email protected]gem install bootstrap -v 5.2.1Přečtěte si naše instalační dokumenty , kde najdete další informace a další správce balíčků.
Pokud potřebujete zahrnout pouze kompilované CSS nebo JS Bootstrapu, můžete použít jsDelivr . Podívejte se na to v akci s naším jednoduchým rychlým startem nebo procházejte příklady a nastartujte svůj další projekt. Můžete se také rozhodnout zahrnout Popper a náš JS samostatně .
<!-- 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žívá Sass pro modulární a přizpůsobitelnou architekturu. Importujte pouze komponenty, které potřebujete, povolte globální možnosti, jako jsou přechody a stíny, a vytvořte si vlastní CSS s našimi proměnnými, mapami, funkcemi a mixy.
Importujte jednu šablonu stylů a můžete vyrazit na závody s každou funkcí našeho CSS.
// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";
// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";
Zjistěte více o našich globálních možnostech Sass .
Nejjednodušší způsob, jak přizpůsobit Bootstrap – zahrňte pouze CSS, které potřebujete.
// 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";
Zjistěte více o používání Bootstrapu se Sass .
Bootstrap 5 se s každou verzí vyvíjí, aby lépe využíval proměnné CSS pro globální styly motivů, jednotlivé komponenty a dokonce i nástroje. Poskytujeme desítky proměnných pro barvy, styly písma a další na :rootúrovni pro použití kdekoli. U komponent a nástrojů jsou proměnné CSS vymezeny pro příslušnou třídu a lze je snadno upravit.
K psaní nových stylů použijte kteroukoli z našich globálních :rootproměnných . Proměnné CSS používají var(--bs-variableName)syntaxi a mohou být zděděny dětskými 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);
}Přepište globální proměnné, komponenty nebo proměnné třídy utility a přizpůsobte Bootstrap tak, jak chcete. Není třeba znovu deklarovat každé pravidlo, stačí nová hodnota proměnné.
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;
}Nově v Bootstrap 5 jsou naše nástroje nyní generovány naším Utility API . Vytvořili jsme ji jako mapu Sass nabitou funkcemi, kterou lze rychle a snadno přizpůsobit. Nikdy nebylo snazší přidávat, odebírat nebo upravovat jakékoli pomocné třídy. Zajistěte, aby nástroje byly responzivní, přidejte varianty pseudotříd a dejte jim vlastní názvy.
Zjistěte více o utilitách Prozkoumejte přizpů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,
)
)
);
Snadno přidávejte přepínatelné skryté prvky, modály a nabídky mimo plátno, vyskakovací okna a popisky a mnoho dalšího – to vše bez jQuery. JavaScript v Bootstrapu je na prvním místě HTML, což znamená, že přidávání pluginů je stejně snadné jako přidávání dataatributů. Potřebujete větší kontrolu? Programově zahrňte jednotlivé pluginy.
Proč psát více JavaScriptu, když můžete psát HTML? Téměř všechny pluginy JavaScriptu Bootstrapu obsahují prvotřídní datové rozhraní API, které vám umožňuje používat JavaScript pouhým přidáním dataatributů.
<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>
Zjistěte více o našem JavaScriptu jako modulech a používání programového rozhraní API .
Bootstrap obsahuje tucet pluginů, které můžete vložit do jakéhokoli projektu. Vložte je všechny najednou nebo si vyberte jen ty, které potřebujete.
Bootstrap Icons je knihovna ikon SVG s otevřeným zdrojovým kódem, která obsahuje více než 1 500 glyfů, s každým vydáním přibývají další. Jsou navrženy tak, aby fungovaly v jakémkoli projektu, ať už používáte samotný Bootstrap nebo ne. Použijte je jako písma SVG nebo ikonová písma – obě možnosti vám poskytují vektorové škálování a snadné přizpůsobení pomocí CSS.
Posuňte Bootstrap na další úroveň s prémiovými motivy z oficiálního trhu Bootstrap Themes . Témata jsou postavena na Bootstrapu jako jejich vlastní rozšířené rámce, bohaté na nové komponenty a pluginy, dokumentaci a výkonné nástroje pro sestavení.
