in English

Wstęp

Zacznij od Bootstrap, najpopularniejszej na świecie platformy 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-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

JS

Wiele naszych komponentów do działania wymaga użycia JavaScriptu. W szczególności wymagają jQuery , Popper.js 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.js, a na końcu nasze wtyczki JavaScript.

Pakiet

Dołącz wszystko, czego potrzebujesz, w jednym skrypcie w naszym pakiecie. Nasze bootstrap.bundle.jsi bootstrap.bundle.min.jsobejmują Poppera , ale nie jQuery . Aby uzyskać więcej informacji o tym, co zawiera Bootstrap, zapoznaj się z sekcją treści .

<script src="https://code.jquery.com/jquery-3.5.1.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-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

Oddzielny

Jeśli zdecydujesz się na oddzielne rozwiązanie skryptów, najpierw musi być Popper.js, a następnie nasze wtyczki JavaScript.

<script src="https://code.jquery.com/jquery-3.5.1.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-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>

składniki

Zastanawiasz się, które komponenty wprost wymagają jQuery, naszego JS i Popper.js? 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ż Popper.js )
  • 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ż Popper.js )
  • 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, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" 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://code.jquery.com/jquery-3.5.1.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-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

    <!-- Option 2: jQuery, Popper.js, and Bootstrap JS
    <script src="https://code.jquery.com/jquery-3.5.1.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-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" 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 między przeglądarkami i urządzeniami, 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.

  • Śledź @getbootstrap na Twitterze .
  • Przeczytaj i zasubskrybuj Oficjalny blog Bootstrap .
  • Porozmawiaj z innymi Bootstrapperami na IRC. Na irc.freenode.netserwerze, 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.