Potężny, rozszerzalny i bogaty w funkcje zestaw narzędzi frontendowych. Twórz i dostosowuj za pomocą Sass, korzystaj z gotowego systemu gridowego i komponentów oraz ożywiaj projekty za pomocą potężnych wtyczek JavaScript.
Obecnie v5.2.1 · Pobierz · v4.6.x dokumentacja · Wszystkie wydania
Przejdź od razu do budowania za pomocą Bootstrap — użyj CDN, zainstaluj go za pomocą menedżera pakietów lub pobierz kod źródłowy.
Zainstaluj źródłowe pliki Sass i JavaScript Bootstrapa za pośrednictwem npm, RubyGems, Composer lub Meteor. Instalacje zarządzane przez pakiet nie obejmują dokumentacji ani naszych pełnych skryptów kompilacji. Możesz również użyć naszego repozytorium szablonów npm, aby szybko wygenerować projekt Bootstrap za pośrednictwem npm.
npm install [email protected]gem install bootstrap -v 5.2.1Przeczytaj naszą dokumentację instalacji, aby uzyskać więcej informacji i dodatkowych menedżerów pakietów.
Gdy potrzebujesz tylko dołączyć skompilowany CSS lub JS Bootstrap, możesz użyć jsDelivr . Zobacz go w akcji dzięki naszemu prostemu przewodnikowi szybkiego startu lub przejrzyj przykłady , aby szybko rozpocząć kolejny projekt. Możesz także osobno dołączyć Poppera i nasz JS .
<!-- 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>
Skorzystaj z naszych oficjalnych przewodników, aby włączyć pliki źródłowe Bootstrap do nowego projektu.
Bootstrap wykorzystuje Sass do modułowej i konfigurowalnej architektury. Importuj tylko potrzebne komponenty, włącz opcje globalne, takie jak gradienty i cienie, i pisz własny CSS z naszymi zmiennymi, mapami, funkcjami i domieszkami.
Zaimportuj jeden arkusz stylów i ruszaj do wyścigu z każdą funkcją naszego CSS.
// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";
// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";
Dowiedz się więcej o naszych globalnych opcjach Sass .
Najłatwiejszy sposób na dostosowanie Bootstrapa — uwzględnij tylko potrzebny kod CSS.
// 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";
Dowiedz się więcej o korzystaniu z Bootstrap z Sass .
Bootstrap 5 ewoluuje z każdym wydaniem, aby lepiej wykorzystywać zmienne CSS dla globalnych stylów motywów, poszczególnych komponentów, a nawet narzędzi. Zapewniamy dziesiątki zmiennych kolorów, stylów czcionek i nie tylko na :rootpoziomie do wykorzystania w dowolnym miejscu. W komponentach i narzędziach zmienne CSS są ograniczone do odpowiedniej klasy i można je łatwo modyfikować.
Użyj dowolnej z naszych zmiennych globalnych:root , aby napisać nowe style. Zmienne CSS używają var(--bs-variableName)składni i mogą być dziedziczone przez elementy potomne.
.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);
}Zastąp zmienne globalne, składowe lub klasy narzędziowe, aby dostosować Bootstrap tak, jak chcesz. Nie ma potrzeby ponownego deklarowania każdej reguły, wystarczy nowa wartość zmiennej.
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;
}Nowe w Bootstrap 5, nasze narzędzia są teraz generowane przez nasz Utility API . Zbudowaliśmy ją jako bogatą w funkcje mapę Sass, którą można szybko i łatwo dostosować. Dodawanie, usuwanie lub modyfikowanie klas użytkowych nigdy nie było prostsze. Spraw, aby narzędzia były responsywne, dodawaj warianty pseudoklas i nadaj im niestandardowe nazwy.
Dowiedz się więcej o narzędziach Poznaj niestandardowe 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,
)
)
);
Z łatwością dodawaj przełączalne ukryte elementy, menu modalne i poza kanwą, wyskakujące okienka i podpowiedzi i wiele więcej — a wszystko to bez jQuery. JavaScript w Bootstrap jest najpierw w HTML, co oznacza, że dodawanie wtyczek jest tak proste, jak dodawanie dataatrybutów. Potrzebujesz większej kontroli? Programowo dołączaj poszczególne wtyczki.
Po co pisać więcej JavaScript, skoro można pisać HTML? Prawie wszystkie wtyczki JavaScript Bootstrap zawierają najwyższej klasy interfejs API danych, który pozwala na korzystanie z JavaScript po prostu przez dodanie dataatrybutów.
<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>
Dowiedz się więcej o naszym JavaScript jako modułach i korzystaniu z programistycznego API .
Bootstrap zawiera kilkanaście wtyczek, które możesz wrzucić do dowolnego projektu. Wrzuć je wszystkie na raz lub wybierz tylko te, których potrzebujesz.
Bootstrap Icons to biblioteka ikon SVG o otwartym kodzie źródłowym zawierająca ponad 1500 glifów, a z każdym wydaniem dodawane są kolejne. Są zaprojektowane do pracy w dowolnym projekcie, niezależnie od tego, czy używasz samego Bootstrapa, czy nie. Używaj ich jako czcionek SVG lub ikon — obie opcje zapewniają skalowanie wektorowe i łatwe dostosowywanie za pomocą CSS.
Przenieś Bootstrap na wyższy poziom dzięki motywom premium z oficjalnego rynku Bootstrap Themes . Motywy są budowane na Bootstrap jako własne rozszerzone frameworki, bogate w nowe komponenty i wtyczki, dokumentację i zaawansowane narzędzia do budowania.
