Wstęp

Zacznij od Bootstrap, najpopularniejszego na świecie frameworku do tworzenia responsywnych witryn zorientowanych na urządzenia mobilne, z jsDelivr i szablonem strony startowej.

Na tej stronie

Szybki start

Chcesz szybko dodać Bootstrapa do swojego projektu? Użyj jsDelivr, darmowego CDN o otwartym kodzie źródłowym. Korzystasz z menedżera pakietów lub potrzebujesz pobrać pliki źródłowe? Przejdź do strony pobierania .

CSS

Skopiuj i wklej arkusz stylów <link>do swojego <head>przed wszystkimi innymi arkuszami stylów, aby załadować nasz CSS.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

JS

Wiele naszych komponentów do działania wymaga użycia JavaScriptu. W szczególności wymagają naszych własnych wtyczek JavaScript i Poppera . Umieść jeden z poniższych <script>s na końcu stron, tuż przed </body>tagiem zamykającym, aby je włączyć.

Pakiet

Dołącz każdą wtyczkę i zależność Bootstrap JavaScript do jednego z naszych dwóch pakietów. Oba bootstrap.bundle.jsi bootstrap.bundle.min.jsdołącz Poppera do naszych podpowiedzi i okienek popover. Aby uzyskać więcej informacji o tym, co zawiera Bootstrap, zapoznaj się z sekcją treści .

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

Oddzielny

Jeśli zdecydujesz się na oddzielne rozwiązanie skryptów, Popper musi być pierwszy (jeśli używasz podpowiedzi lub popoverów), a następnie nasze wtyczki JavaScript.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

Moduły

Jeśli używasz <script type="module">, zapoznaj się z sekcją dotyczącą używania Bootstrap jako modułu .

składniki

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 rozszerzenia naszej wtyczki Collapse w celu wdrożenia responsywnego zachowania
Toasty za wystawienie i odrzucenie
Etykietki narzędzi i okienka popover do wyświetlania i pozycjonowania (wymaga również Poppera )
Scrollspy dla zachowania przewijania i aktualizacji nawigacji

Szablon startowy

Upewnij się, że Twoje strony są skonfigurowane zgodnie z najnowszymi standardami projektowania i rozwoju. Oznacza to użycie doctype HTML5 i dołączenie metatagu widocznego obszaru, aby zapewnić prawidłowe działanie responsywne. Połącz to wszystko razem, a Twoje strony powinny wyglądać tak:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Aby zapoznać się z kolejnymi krokami, zapoznaj się z dokumentacją dotyczącą układu lub naszymi oficjalnymi przykładami , aby rozpocząć układanie zawartości i składników witryny.

Ważne globalne

Bootstrap wykorzystuje kilka ważnych globalnych stylów i ustawień, o których musisz pamiętać podczas korzystania z niego, 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, niekompletną stylizację, ale włączenie jej nie powinno powodować żadnych poważnych problemów.

<!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 szablonie startowym .

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 .
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.