Source

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, udostępnionego za darmo przez ludzi z jsDelivr. 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-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" 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. Umieść następujące <script>s na końcu stron, tuż przed zamykającym </body>tagiem, aby je włączyć. Najpierw musi być jQuery, potem Popper.js, a na końcu nasze wtyczki JavaScript.

Używamy slim build jQuery , ale obsługiwana jest również pełna wersja.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

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 ogólnej struktury strony, czytaj dalej, aby znaleźć przykładowy szablon strony.

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 .

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
  • 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 zachowania 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-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

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

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" 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 niego 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.

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