Przykłady siatek Bootstrap

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

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 3 ma cztery poziomy klas: xs (telefony), sm (tablety), md (komputery stacjonarne) i lg (większe komputery stacjonarne). 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-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6

Mieszane: telefon komórkowy, tablet i komputer stacjonarny

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

Rozliczenie kolumn

Wyczyść pływaki w określonych punktach przerwania, aby zapobiec niewygodnemu zawijaniu z nierówną zawartością.

.col-xs-6 .col-sm-3
Zmień rozmiar widocznego obszaru lub sprawdź na przykład na telefonie.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

Resetowanie przesunięcia, pchania i ciągnięcia

Resetuj przesunięcia, pchania i wyciągania w określonych punktach przerwania.

.col-sm-5 .col-md-6
.col-sm-5 .col-sm-przesunięcie-2 .col-md-6 .col-md-przesunięcie-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0