Przykłady siatek Bootstrap

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

W tych przykładach .themed-grid-colklasa jest dodawana do kolumn w celu dodania motywu. To nie jest klasa, która jest domyślnie dostępna w 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-sm-4

.col-md-4

.col-lg-4

.col-xl-4

.col-xxl-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

Alternatywa dla trzech równych kolumn

Korzystając z .row-cols-*klas, możesz łatwo stworzyć siatkę z równymi kolumnami.

.coldziecko .row-cols-md-3

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-4

Mieszane: mobilne i stacjonarne

System siatki Bootstrap v5 ma sześć poziomów klas: xs (bardzo mały, ten wrostek klasy nie jest używany), sm (mały), md (średni), lg (duży), xl (x-duży) i xxl (xx -wielki). Możesz użyć prawie dowolnej kombinacji tych klas, aby stworzyć bardziej dynamiczne i elastyczne układy.

Każda warstwa klas zwiększa się, co oznacza, że jeśli planujesz ustawić te same szerokości dla md, lg, xl i xxl, wystarczy określić md.

.col-md-8

.col-6 .col-md-4

.col-6

Mieszane: telefon komórkowy, tablet i komputer stacjonarny

.col-sm-6 .col-lg-8

.col-6 .col-lg-4

.col-6 .col-sm-4

Rynny

Dzięki .gx-*klasom poziome rynny można regulować.

.colz .gx-4rynnami

Użyj .gy-*klas do kontrolowania rynien pionowych.

.colz .gy-4rynnami

Dzięki .g-*klasom rynny można regulować w obu kierunkach.

.colz .g-3rynnami

Kontenery

Dodatkowe klasy dodane w Bootstrap v4.4 umożliwiają kontenery o szerokości 100% aż do określonego punktu przerwania. v5 dodaje nowy xxlpunkt przerwania.

.pojemnik

.kontener-sm

.kontener-md

.kontener-lg

.kontener-xl

.kontener-xxl

.pojemnik-płyn