Bootstrap 4 siatki
System Bootstrap 4 Grid
System siatki Bootstrap jest zbudowany z flexbox i pozwala na umieszczenie do 12 kolumn na stronie.
Jeśli nie chcesz używać wszystkich 12 kolumn pojedynczo, możesz je zgrupować, 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 jest responsywny, a kolumny zmienią się automatycznie w zależności od rozmiaru ekranu.
Upewnij się, że suma wynosi 12 lub mniej (nie jest wymagane użycie wszystkich 12 dostępnych kolumn).
Klasy siatki
System siatki Bootstrap 4 ma pięć klas:
.col-(ekstra małe urządzenia - szerokość ekranu poniżej 576px).col-sm-(małe urządzenia - szerokość ekranu równa lub większa niż 576px).col-md-(urządzenia średnie - szerokość ekranu równa lub większa niż 768px).col-lg-(duże urządzenia - szerokość ekranu równa lub większa niż 992px).col-xl-(urządzenia bardzo duże - szerokość ekranu równa lub większa 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
smi md, musisz tylko określić sm.
Podstawowa struktura siatki Bootstrap 4
Poniżej znajduje się podstawowa struktura siatki Bootstrap 4:
<!-- Control the column width, and how they should appear on different
devices -->
<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>
<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
Pierwszy przykład: utwórz wiersz ( <div
class="row">). Następnie dodaj żądaną liczbę kolumn (znaczniki z odpowiednimi
.col-*-*klasami). Pierwsza gwiazdka (*) reprezentuje responsywność: sm, md, lg lub xl, podczas gdy druga gwiazdka reprezentuje liczbę, która powinna dać 12 w każdym wierszu.
Drugi przykład: zamiast dodawać liczbę do każdego col, pozwól bootstrapowi obsłużyć układ, aby utworzyć kolumny o równej szerokości: dwa "col"elementy = 50% szerokości dla każdej kolumny. trzy kol. = 33,33% szerokości na każdy kol. cztery kolumny = 25% szerokości itd. Możesz również użyć .col-sm|md|lg|xlopcji, aby kolumny były responsywne.
Poniżej zebraliśmy kilka przykładów podstawowych układów siatki Bootstrap 4.
Trzy równe kolumny
Poniższy przykład pokazuje, jak utworzyć trzy kolumny o równej szerokości na wszystkich urządzeniach i szerokościach ekranu:
Przykład
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
Responsywne kolumny
Poniższy przykład pokazuje, jak utworzyć cztery kolumny o równej szerokości, zaczynając od tabletów i skalując do bardzo dużych komputerów stacjonarnych. Na telefonach komórkowych lub ekranach o szerokości mniejszej niż 576 pikseli kolumny będą się automatycznie układać jedna na drugiej :
Przykład
<div class="row">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
Dwie nierówne responsywne kolumny
Poniższy przykład pokazuje, jak uzyskać dwie kolumny o różnej szerokości, zaczynając od tabletów i skalując do dużych dodatkowych komputerów stacjonarnych:
Przykład
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
Wskazówka: Więcej o siatkach Bootstrap 4 dowiesz się w dalszej części tego samouczka.