System siatki Bootstrap
System siatki Bootstrap
System siatki Bootstrap pozwala na umieszczenie do 12 kolumn na stronie.
Jeśli nie chcesz używać wszystkich 12 kolumn pojedynczo, możesz zgrupować kolumny razem, aby utworzyć szersze kolumny:
| rozpiętość 1 | rozpiętość 1 | rozpiętość 1 | rozpiętość 1 | rozpiętość 1 | rozpiętość 1 | rozpiętość 1 | rozpiętość 1 | rozpiętość 1 | rozpiętość 1 | rozpiętość 1 | rozpiętość 1 |
| rozpiętość 4 | rozpiętość 4 | rozpiętość 4 | |||||||||
| rozpiętość 4 | rozpiętość 8 | ||||||||||
| rozpiętość 6 | rozpiętość 6 | ||||||||||
| rozpiętość 12 | |||||||||||
System siatki Bootstrap jest responsywny, a kolumny zmienią się w zależności od rozmiaru ekranu: na dużym ekranie może wyglądać lepiej z treścią zorganizowaną w trzech kolumnach, ale na małym ekranie byłoby lepiej, gdyby elementy treści były ułożone w stos jeden na drugim.
Wskazówka: pamiętaj, że kolumny siatki powinny sumować się do dwunastu w wierszu. Co więcej, kolumny będą się układać w stos bez względu na widoczny obszar.
Klasy siatki
System siatki Bootstrap ma cztery klasy:
xs(dla telefonów - ekrany o szerokości poniżej 768px)sm(dla tabletów - ekrany o szerokości lub większej niż 768px)md(dla małych laptopów - ekrany o szerokości lub większej niż 992px)lg(dla laptopów i komputerów stacjonarnych - ekrany o szerokości lub większej niż 1200px)
Powyższe klasy można łączyć, aby tworzyć bardziej dynamiczne i elastyczne układy.
Wskazówka: Każda klasa skaluje się w górę, więc jeśli chcesz ustawić te same szerokości dla xs i sm, musisz tylko określić xs.
Zasady systemu siatki
Niektóre zasady systemu siatki Bootstrap:
- Rzędy muszą być umieszczone w a
.container(stała szerokość) lub.container-fluid(pełna szerokość) w celu prawidłowego wyrównania i wypełnienia - Użyj wierszy, aby utworzyć poziome grupy kolumn
- Treść powinna być umieszczona w kolumnach, a tylko kolumny mogą być bezpośrednimi dziećmi wierszy
- Wstępnie zdefiniowane klasy, takie jak
.rowi.col-sm-4są dostępne do szybkiego tworzenia układów siatki - Kolumny tworzą rynny (przerwy między zawartością kolumny) poprzez dopełnienie. To uzupełnienie jest przesunięte w wierszach dla pierwszej i ostatniej kolumny poprzez włączenie ujemnego marginesu
.rows - Kolumny siatki są tworzone przez określenie liczby 12 dostępnych kolumn, które chcesz objąć. Na przykład trzy równe kolumny użyłyby trzech
.col-sm-4 - Szerokości kolumn są wyrażone w procentach, więc zawsze są płynne i mają rozmiar w stosunku do elementu nadrzędnego
Podstawowa struktura siatki Bootstrap
Poniżej znajduje się podstawowa struktura siatki Bootstrap:
<div class="container">
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
...
</div>
</div>
Aby więc utworzyć żądany układ, utwórz kontener ( <div
class="container">). Następnie utwórz wiersz ( <div
class="row">). Następnie dodaj żądaną liczbę kolumn (znaczniki z odpowiednimi
.col-*-*klasami). Pamiętaj, że liczby w .col-*-*powinny zawsze sumować się do 12 w każdym wierszu.
Opcje siatki
Poniższa tabela podsumowuje, jak system grid Bootstrap działa na wielu urządzeniach:
| Extra small <768px |
Small >=768px |
Medium >=992px |
Large >=1200px |
|
|---|---|---|---|---|
| Class prefix | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| Suitable for | Phones | Tablets | Small Laptops | Laptops & Desktops |
| Grid behaviour | Horizontal at all times | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints |
| Container width | None (auto) | 750px | 970px | 1170px |
| # of columns | 12 | 12 | 12 | 12 |
| Column width | Auto | ~62px | ~81px | ~97px |
| Gutter width | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) |
| Nestable | Yes | Yes | Yes | Yes |
| Offsets | Yes | Yes | Yes | Yes |
| Column ordering | Yes | Yes | Yes | Yes |
Przykłady
W kolejnych rozdziałach przedstawiono przykłady systemów gridowych dla różnych urządzeń: