3.3. Bootstrap

Bootstrap to otwartoźródłowy zestaw narzędzi do tworzenia responsywnych (zob.: responsywny) stron WWW przy użyciu języków HTML, CSS i JS. Framework ten dostarcza gotowych klas CSS i szablonów związanych z typografią, formularzami, przyciskami, tabelami, oknami dialogowymi i innymi elementami.

3.3.1. Instalacja

Instalacja w tym wypadku oznacza podłączenie arkuszy CSS i skryptów JS Bootstrapa do kodu tworzonej strony. Najprościej skorzystać z zasobów przechowywanych w CDN-ach (ang. content delivery network, rozproszony sieciowy system dostarczania treści).

Typowy szablon HTML 5 używający Bootstrapa wygląda następująco:

index.html nr
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Szablon HTML 5 Bootstrap v.4</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

  </head>
  <body>

    <div class="container">
      <h1>Szablon HTML 5 Bootstrap v.4</h1>
    </div>

  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <!-- Popper JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  </body>
</html>

W zaznaczonych liniach dołączane są komponenty CSS i JS Bootstrapa.

Informacja

Jeżeli korzystamy tylko z CSS-a i nie potrzebujemy komponentów JavaScript, skryptów JS nie musimy dołączać.

3.3.2. Układ strony

Do tworzenia układu strony używamy systemu siatkowego (ang. grid system). Wykorzystuje on dwie klasy kontenerów:

  • container – responsywny kontener o stałej szerokości z marginesami po lewej i prawej,
  • container-fluid – kontener wykorzystujący całą dostępną szerokość

– oraz klasy definiujące podział na rzędy:

  • row – definiuje rząd (wiersz) zawierający kolumny,
  • col- – definuje kolumnę

– i kolumny (maksymalna ilość kolumn w wierszu to 12). Kolumny można grupować w zależności od rozdzielczości za pomocą odpowiednich klas:

  • .col- – szerokość ekranu < 576px (extra small, xs),
  • .col-sm- – szerokość => 576px (small devices, sm),
  • .col-md- – szerokość => 768px (medium devices, md),
  • .col-lg- – szerokość => 992px (large devices, lg),
  • .col-xl- – szerokość => 1200px (xlarge devices, xl).

Przykładowy layout z dwoma równymi węższymi kolumnami bocznymi oraz kolumną środkową o szerokości równej 50%, tj. 6 kolumnom z 12 dostępnych, od rozdzielczości >= 576px:

layout.html nr
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<div class="container">
  <div class="row">
    <div class="col-3">
      kolumna lewa
    </div>
    <div class="col-sm-6">
      kolumna środkowa
    </div>
    <div class="col-3">
      kolumna prawa
    </div>
  </div>
</div>

Wskazówka

Przetetuj powyższy kod. Zwróć uwagę, że w rozdzielczości poniżej 576px kolumny wyświetlane są jedna pod drugą, a w innych rozdzielczościach szerokość kolumn dostosowywana jest automatycznie.

3.3.3. Narzędzia Pokaż/ukryj

Schemat nazewnictwa klas zmieniających właściwość display:

  • .d-{value} – dla xs
  • .d-{breakpoint}-{value} – dla sm, md, lg i xl.

Możliwe wartości (ang. value): none, inline, inline-block, block, table, table-cell, table-row, flex, inline-flex.

Przykłady:

  • .d-block .d-sm-none – pokaż tylko na xs
  • .d-none .d-lg-block .d-xl-none – pokaż tylko na lg
  • .d-none .d-sm-block – ukryj tylko na xs
  • .d-md-none .d-lg-block – ukryj tylko na md

3.3.4. Marginesy i wypełnienia

Schemat nazewnictwa klas zmieniających właściwości margin i padding:

  • {property}{sides}-{size} – dla xs
  • {property}{sides}-{breakpoint}-{size} - dla sm, md, lg, xl
  • property: m – marginesy lub p – wypełnienie
  • sides: t – góra, b – dół, l – lewo, r – prawo, x – lewo i prawo, y – góra i dół
  • sizes0 – brak, 1 – 1/4 odstępu, 2 – 1/2 odstępu, 3 – pełny odstęp, 4 – półtora odstępu, 5 – potrójność odstępu, auto – odstęp automatyczny.

Przykłady:

3.3.5. Materiały

  1. Dokumentacja Bootstrapa v.4;
  2. Podstawy flexbox (Mozilla Developer Network);
  3. Przykłady flexbox (w3schools.com);
  4. Przykłady układów (Bootstrap grid examples);

Utworzony:2022-05-27 o 15:34 w Sphinx 1.4.5