Wstęp

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

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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

JS

Wiele naszych komponentów do działania wymaga użycia JavaScriptu. W szczególności wymagają jQuery , Poppera i naszych własnych wtyczek JavaScript. Używamy slim build jQuery , ale obsługiwana jest również pełna wersja.

Umieść jeden z poniższych <script>s na końcu stron, tuż przed </body>tagiem zamykającym, aby je włączyć. Najpierw musi być jQuery, potem Popper, a potem nasze wtyczki JavaScript.

Pakiet

Dołącz każdą wtyczkę 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, ale nie jQuery . Najpierw dołącz jQuery, a następnie pakiet JavaScript Bootstrap. 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/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" 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/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

składniki

Zastanawiasz się, które komponenty wprost wymagają jQuery, naszego JavaScriptu i Poppera? Kliknij poniższy link Pokaż komponenty. Jeśli nie masz pewności co do 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
Scrollspy dla zachowania przewijania i aktualizacji nawigacji
Etykietki narzędzi i okienka popover do wyświetlania i pozycjonowania (wymaga również Poppera )

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, shrink-to-fit=no">

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

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

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

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
    -->
  </body>
</html>

To wszystko, czego potrzebujesz do ogólnych wymagań dotyczących strony. 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, shrink-to-fit=no">

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-4).
Deweloperzy powinni używać słowa kluczowego bootstrapw pakietach, które modyfikują lub zwiększają funkcjonalność 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.

Dostawcy CSP i osadzone pliki SVG

Kilka składników Bootstrap zawiera osadzone pliki SVG w naszym CSS, aby stylizować składniki w spójny i łatwy sposób w różnych przeglądarkach i urządzeniach. W przypadku organizacji z bardziej restrykcyjnymi konfiguracjami CSP udokumentowaliśmy wszystkie wystąpienia naszych osadzonych plików SVG (z których wszystkie są stosowane przez background-image), dzięki czemu można dokładniej przejrzeć dostępne opcje.

Przycisk Zamknij (używany w alertach i modalach)
Niestandardowe pola wyboru i przyciski opcji
Przełączniki formularzy
Ikony weryfikacji formularzy
Niestandardowe menu wyboru
Sterowanie karuzelą
Przyciski przełączania paska nawigacyjnego

W oparciu o rozmowę społeczności , niektóre opcje rozwiązania tego problemu we własnej bazie kodu obejmują zastąpienie adresów URL zasobami lokalnie hostowanymi, usunięcie obrazów i użycie obrazów wbudowanych (nie jest to możliwe we wszystkich komponentach) oraz zmodyfikowanie dostawcy CSP. Naszą rekomendacją jest uważne zapoznanie się z własnymi zasadami bezpieczeństwa i podjęcie decyzji o najlepszej ścieżce, jeśli to konieczne.