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<!DOCTYPE html>
 2<html>
 3  <head>
 4    <meta charset="utf-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1">
 6    <meta http-equiv="x-ua-compatible" content="ie=edge">
 7    <title>Szablon HTML 5 Bootstrap v.4</title>
 8
 9    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
10
11  </head>
12  <body>
13
14    <div class="container">
15      <h1>Szablon HTML 5 Bootstrap v.4</h1>
16    </div>
17
18  <!-- jQuery library -->
19  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
20
21  <!-- Popper JS -->
22  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
23
24  <!-- Latest compiled JavaScript -->
25  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
26  </body>
27</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<div class="container">
 2  <div class="row">
 3    <div class="col-3">
 4      kolumna lewa
 5    </div>
 6    <div class="col-sm-6">
 7      kolumna środkowa
 8    </div>
 9    <div class="col-3">
10      kolumna prawa
11    </div>
12  </div>
13</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ół

  • sizes – 0 – 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:

2024-04-23 o 08:28 w Sphinx 7.3.7