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:
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:
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 lubp
– 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¶
- Dokumentacja Bootstrapa v.4;
- Podstawy flexbox (Mozilla Developer Network);
- Przykłady flexbox (w3schools.com);
- Przykłady układów (Bootstrap grid examples);
Utworzony: | 2022-05-27 o 15:34 w Sphinx 1.4.5 |
---|