Zacznij korzystać z Bootstrapa

Bootstrap to potężny, bogaty w funkcje zestaw narzędzi frontendowych. Zbuduj wszystko — od prototypu po produkcję — w kilka minut.

Na tej stronie

Szybki start

Zacznij od dołączenia gotowego do produkcji kodu CSS i JavaScript Bootstrap za pośrednictwem CDN bez konieczności wykonywania jakichkolwiek kroków kompilacji. Zobacz to w praktyce dzięki temu demo Bootstrap CodePen .

Utwórz nowy index.htmlplik w katalogu głównym projektu. Uwzględnij również <meta name="viewport">tag, aby zapewnić prawidłowe działanie responsywne na urządzeniach mobilnych.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

Dołącz CSS i JS Bootstrap. Umieść <link>tag w <head>dla naszego CSS i <script>tag dla naszego pakietu JavaScript (w tym Poppera do pozycjonowania list rozwijanych, wyskakujących okienek i podpowiedzi) przed zamknięciem </body>. Dowiedz się więcej o naszych łączach CDN .

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <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">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

Możesz również osobno dołączyć Poppera i nasz JS. Jeśli nie planujesz używać rozwijanych menu, okienek podręcznych lub podpowiedzi, zaoszczędź kilka kilobajtów, nie włączając Poppera.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

Witaj świecie! Otwórz stronę w wybranej przeglądarce, aby zobaczyć swoją stronę Bootstrapped. Teraz możesz zacząć budować z Bootstrapem, tworząc własny układ , dodając dziesiątki komponentów i korzystając z naszych oficjalnych przykładów .

Linki CDN

Jako odniesienie, oto nasze główne łącza CDN.

Opis	URL
CSS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css`
JS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js`

Możesz również użyć CDN, aby pobrać dowolne z naszych dodatkowych kompilacji wymienionych na stronie Spis treści .

Następne kroki

Przeczytaj więcej o niektórych ważnych globalnych ustawieniach środowiska, z których korzysta Bootstrap.
Przeczytaj o tym, co zawiera Bootstrap w naszej sekcji treści oraz o liście komponentów, które wymagają JavaScript poniżej.
Potrzebujesz trochę więcej mocy? Rozważ budowanie za pomocą Bootstrap, dołączając pliki źródłowe za pomocą menedżera pakietów .
Chcesz użyć Bootstrapa jako modułu z <script type="module">? Proszę zapoznać się z sekcją dotyczącą używania Bootstrap jako modułu .

Komponenty JS

Zastanawiasz się, które komponenty wprost wymagają naszego JavaScriptu i Poppera? Kliknij poniższy link Pokaż komponenty. Jeśli nie masz pewności co do ogólnej struktury strony, czytaj dalej, aby znaleźć przykładowy szablon strony.

Pokaż komponenty wymagające JavaScript

Alerty o odrzuceniu
Przyciski do przełączania stanów i funkcjonalności pola wyboru/radia
Karuzela dla wszystkich zachowań slajdów, kontrolek i wskaźników
Zwiń, aby przełączyć widoczność treści
Listy rozwijane do wyświetlania i pozycjonowania (wymaga również Poppera )
Tryby wyświetlania, pozycjonowania i zachowania przewijania
Pasek nawigacyjny do rozszerzania naszych wtyczek Collapse i Offcanvas w celu wdrożenia zachowań responsywnych
Navs z wtyczką Tab do przełączania paneli treści
Offcanvases do wyświetlania, pozycjonowania i zachowania przewijania
Scrollspy dla zachowania przewijania i aktualizacji nawigacji
Toasty za wystawienie i odrzucenie
Etykietki narzędzi i okienka popover do wyświetlania i pozycjonowania (wymaga również Poppera )

Ważne globalne

Bootstrap wykorzystuje kilka ważnych globalnych stylów i ustawień, z których wszystkie są prawie wyłącznie nastawione na normalizację stylów w różnych przeglądarkach. Zanurzmy się.

Typ dokumentu HTML5

Bootstrap wymaga użycia doctype HTML5. Bez tego zobaczysz funky i niekompletną stylizację.

<!doctype html>
<html lang="en">
  ...
</html>

Responsywny metatag

Bootstrap jest rozwijany mobile first , strategia, w której najpierw optymalizujemy kod dla urządzeń mobilnych, a następnie w razie potrzeby skalujemy komponenty za pomocą zapytań o media CSS. Aby zapewnić prawidłowe renderowanie i powiększanie dotykiem na wszystkich urządzeniach, dodaj do <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

Możesz zobaczyć przykład tego w akcji w Szybkim wprowadzeniu .

Rozmiar pudełka

Aby uzyskać prostszy rozmiar w CSS, zmieniamy globalną box-sizingwartość z content-boxna border-box. Gwarantuje to, że paddingnie ma to wpływu na ostateczną obliczoną szerokość elementu, ale może powodować problemy z niektórymi programami innych firm, takimi jak Mapy Google i Twoja wyszukiwarka Google.

W rzadkich przypadkach, gdy musisz to zmienić, użyj czegoś takiego:

.selector-for-some-widget {
  box-sizing: content-box;
}

W przypadku powyższego fragmentu zagnieżdżone elementy — w tym wygenerowana zawartość za pośrednictwem ::beforei — ::afterbędą dziedziczyć określone box-sizingdla tego .selector-for-some-widget.

Dowiedz się więcej o modelu pudełkowym i rozmiarze na stronie Sztuczki CSS .

Restart

Aby poprawić renderowanie w różnych przeglądarkach, używamy Reboot , aby poprawić niespójności w różnych przeglądarkach i urządzeniach, zapewniając jednocześnie nieco bardziej zdecydowane resetowanie typowych elementów HTML.

Wspólnota

Bądź na bieżąco z rozwojem Bootstrap i skontaktuj się ze społecznością dzięki tym pomocnym zasobom.

Przeczytaj i zasubskrybuj Oficjalny blog Bootstrap .
Zapytaj i zapoznaj się z naszymi Dyskusjami na GitHubie .
Porozmawiaj z innymi Bootstrapperami na IRC. Na irc.libera.chatserwerze, w #bootstrapkanale.
Pomoc w zakresie implementacji można znaleźć w Stack Overflow (otagowane bootstrap-5).
Deweloperzy powinni używać słowa kluczowego bootstrapw pakietach, które modyfikują lub dodają funkcje Bootstrap podczas dystrybucji za pośrednictwem npm lub podobnych mechanizmów dostarczania, aby zapewnić maksymalną wykrywalność.

Możesz także śledzić @getbootstrap na Twitterze , aby otrzymywać najnowsze plotki i niesamowite teledyski.