Przykłady siatek Bootstrap

Podstawowe układy siatek ułatwiające zapoznanie się z budowaniem w systemie siatek Bootstrap.

Pięć poziomów siatki

Istnieje pięć poziomów systemu Bootstrap, po jednym dla każdego obsługiwanego przez nas zakresu urządzeń. Każda warstwa zaczyna się od minimalnego rozmiaru widocznego obszaru i automatycznie stosuje się do większych urządzeń, chyba że zostanie zastąpiona.

.col-4
.col-4
.col-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-md-4
.col-md-4
.col-md-4
.col-lg-4
.col-lg-4
.col-lg-4
.col-xl-4
.col-xl-4
.col-xl-4

Trzy równe kolumny

Uzyskaj trzy kolumny o równej szerokości, zaczynając od komputerów stacjonarnych i skalując do dużych komputerów stacjonarnych . Na urządzeniach mobilnych, tabletach i niższych kolumny będą się układać automatycznie.

.col-md-4
.col-md-4
.col-md-4

Trzy nierówne kolumny

Uzyskaj trzy kolumny, zaczynając od komputerów stacjonarnych i skalując do dużych komputerów stacjonarnych o różnych szerokościach. Pamiętaj, że kolumny siatki powinny sumować się do dwunastu w pojedynczym bloku poziomym. Co więcej, kolumny zaczynają się układać bez względu na widoczny obszar.

.col-md-3
.col-md-6
.col-md-3

Dwie kolumny

Uzyskaj dwie kolumny, zaczynając od komputerów stacjonarnych i skalując do dużych komputerów stacjonarnych .

.col-md-8
.col-md-4

Pełna szerokość, pojedyncza kolumna

W przypadku elementów o pełnej szerokości nie są wymagane żadne klasy siatki.


Dwie kolumny z dwoma zagnieżdżonymi kolumnami

Zgodnie z dokumentacją zagnieżdżanie jest łatwe — wystarczy umieścić wiersz kolumn w istniejącej kolumnie. Daje to dwie kolumny, zaczynając od komputerów stacjonarnych i skalując do dużych komputerów stacjonarnych , z kolejnymi dwiema (równej szerokości) w większej kolumnie.

W przypadku urządzeń mobilnych, tabletów i niższych rozmiarów te kolumny i ich zagnieżdżone kolumny będą się układać w stos.

.col-md-8
.col-md-6
.col-md-6
.col-md-4

Mieszane: mobilne i stacjonarne

System siatki Bootstrap v4 ma pięć poziomów klas: xs (bardzo mały), sm (mały), md (średni), lg (duży) i xl (bardzo duży). Możesz użyć prawie dowolnej kombinacji tych klas, aby stworzyć bardziej dynamiczne i elastyczne układy.

Każdy poziom klas skaluje się w górę, co oznacza, że ​​jeśli planujesz ustawić te same szerokości dla xs i sm, musisz tylko określić xs.

.col-12 .col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6

Mieszane: telefon komórkowy, tablet i komputer stacjonarny

.col-12 .col-sm-6 .col-lg-8
.col-6 .col-lg-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4