Bootstrap sieciowi
Bootstrap's układ kratowy umożliwia do 12 kolumn w poprzek strony.
Jeśli nie chcesz, aby wykorzystać wszystkie kolumny 12 indywidualnie, można pogrupować kolumny tworząc 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 | |||||||||||
Bootstrap's system sieci jest elastyczny, a kolumny będą re-aranżacji w zależności od rozmiaru ekranu: Na dużym ekranie może wyglądać lepiej z treścią zorganizowanej w trzech kolumnach, lecz na małym ekranie byłoby lepiej, gdyby elementy treści zostały ułożone jedna na drugiej.
Wskazówka: Pamiętaj, że kolumny siatki należy dodać do dwunastej w rzędzie. Ponad że kolumny będą układać bez względu na viewport .
Klasy siatki
Bootstrap system sieci ma cztery klasy:
- xs (dla telefonów)
- sm (dla tabletek)
- md (dla komputerów stacjonarnych)
- lg (dla większych komputerów stacjonarnych)
Klasy powyżej mogą być łączone w celu stworzenia bardziej dynamiczne i elastyczne układy.
Wskazówka: Każda klasa skaluje się, więc jeśli chcesz ustawić te same szerokości do xs i sm , trzeba tylko określić xs .
Siatka Zasady systemowe
Niektóre Bootstrap zasady systemu siatki:
- Wiersze muszą być umieszczone w
.container(stałej szerokości) lub.container-fluid(pełnej szerokości) dla prawidłowego dopasowania i wypełnienia - Użyj wiersze do tworzenia grup poziomych kolumn
- Treść powinna być umieszczone w kolumnach, a tylko kolumny mogą być natychmiastowe dzieci rzędach
- Predefiniowanych klas jak
.rowi.col-sm-4są dostępne do szybkiego tworzenia układów sieciowych - Kolumny stworzenie rynien (luki pomiędzy zawartością kolumny) przez wyściółką. To wypełnienie jest przesunięte w rzędach dla pierwszej i ostatniej kolumny poprzez ujemnej marży na
.rows - kolumny siatki są tworzone przez podanie liczby 12 dostępnych kolumn, które chcesz objąć. Na przykład trzy równe kolumny użyłby trzy
.col-sm-4
Podstawowa struktura Bootstrap siatki
Poniżej znajduje się podstawowa struktura Bootstrap sieci:
<div class="container">
<div
class="row">
<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> Tak więc, aby stworzyć układ, który chcesz utworzyć pojemnik ( <div class="container"> ). Następnie należy utworzyć wiersz ( <div class="row"> ). Następnie należy dodać odpowiednią liczbę kolumn (tagi z odpowiednim .col-*-* zajęcia). Należy pamiętać, że numery w .col-*-* Należy zawsze sumują się do 12 dla każdego wiersza.
Opcje siatki
Poniższa tabela podsumowuje, jak Bootstrap system sieci działa na wielu urządzeniach:
| Extra small devices Phones (<768px) |
Small devices Tablets (>=768px) |
Medium devices Desktops (>=992px) |
Large devices Desktops (>=1200px) |
|
|---|---|---|---|---|
| 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 |
| Class prefix | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| Number 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
Kolejne rozdziały przedstawiają przykłady systemów sieciowych dla różnych urządzeń: