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-col
klasa 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.
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.
Alternatywa dla trzech równych kolumn
Korzystając z .row-cols-*
klas, możesz łatwo stworzyć siatkę z równymi kolumnami.
.col
dziecko
.row-cols-md-3
.col
dziecko
.row-cols-md-3
.col
dziecko
.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.
Dwie kolumny
Uzyskaj dwie kolumny, zaczynając od komputerów stacjonarnych i skalując do dużych komputerów stacjonarnych .
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.
Mieszane: mobilne i stacjonarne
System siatki Bootstrap v4 ma pięć poziomów klas: xs (bardzo mały, ten wrostek klasy nie jest używany), 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żda warstwa klas skaluje się w górę, co oznacza, że jeśli planujesz ustawić te same szerokości dla md, lg i xl, wystarczy określić md.
Mieszane: telefon komórkowy, tablet i komputer stacjonarny
Rynny
Dzięki .gx-*
klasom poziome rynny można regulować.
.col
z
.gx-4
rynnami
.col
z
.gx-4
rynnami
.col
z
.gx-4
rynnami
.col
z
.gx-4
rynnami
.col
z
.gx-4
rynnami
.col
z
.gx-4
rynnami
Użyj .gy-*
klas do kontrolowania rynien pionowych.
.col
z
.gy-4
rynnami
.col
z
.gy-4
rynnami
.col
z
.gy-4
rynnami
.col
z
.gy-4
rynnami
.col
z
.gy-4
rynnami
.col
z
.gy-4
rynnami
Dzięki .g-*
klasom rynny można regulować w obu kierunkach.
.col
z
.g-3
rynnami
.col
z
.g-3
rynnami
.col
z
.g-3
rynnami
.col
z
.g-3
rynnami
.col
z
.g-3
rynnami
.col
z
.g-3
rynnami
Kontenery
Dodatkowe klasy dodane w Bootstrap v4.4 umożliwiają kontenery o szerokości 100% aż do określonego punktu przerwania. v5 dodaje nowy xxl
punkt przerwania.