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.
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.
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.
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.
Uzyskaj dwie kolumny, zaczynając od komputerów stacjonarnych i skalując do dużych komputerów stacjonarnych .
W przypadku elementów o pełnej szerokości nie są wymagane żadne klasy siatki.
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.
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.