System Bootstrap 4 Grid

System Bootstrap 4 Grid

System siatki Bootstrap pozwala na umieszczenie do 12 kolumn na stronie.

Jeśli nie chcesz używać wszystkich 12 kolumn pojedynczo, możesz zgrupować kolumny razem, aby utworzyć szersze kolumny:

System siatki Bootstrap jest responsywny, a kolumny zmienią się w zależności od rozmiaru ekranu: na dużym ekranie może wyglądać lepiej z treścią zorganizowaną w trzech kolumnach, ale na małym ekranie byłoby lepiej, gdyby elementy treści były ułożone w stos jeden na drugim.

Klasy siatki

System siatki Bootstrap 4 ma pięć klas:

• .col-(ekstra małe urządzenia - szerokość ekranu poniżej 576px)
• .col-sm-(małe urządzenia - szerokość ekranu równa lub większa niż 576px)
• .col-md-(urządzenia średnie - szerokość ekranu równa lub większa niż 768px)
• .col-lg-(duże urządzenia - szerokość ekranu równa lub większa niż 992px)
• .col-xl-(urządzenia bardzo duże - szerokość ekranu równa lub większa niż 1200px)

Powyższe klasy można łączyć, aby tworzyć bardziej dynamiczne i elastyczne układy.

Wskazówka: Każda klasa skaluje się w górę, więc jeśli chcesz ustawić te same szerokości dla smi md, musisz tylko określić sm.

Zasady systemu siatki

Niektóre zasady systemu Bootstrap 4:

• Rzędy muszą być umieszczone w a .container(stała szerokość) lub .container-fluid(pełna szerokość) w celu prawidłowego wyrównania i wypełnienia
• Użyj wierszy, aby utworzyć poziome grupy kolumn
• Treść powinna być umieszczona w kolumnach, a tylko kolumny mogą być bezpośrednimi dziećmi wierszy
• Wstępnie zdefiniowane klasy, takie jak .row i .col-sm-4są dostępne do szybkiego tworzenia układów siatki
• Kolumny tworzą rynny (przerwy między zawartością kolumny) poprzez dopełnienie. To uzupełnienie jest przesunięte w wierszach dla pierwszej i ostatniej kolumny poprzez włączenie ujemnego marginesu.rows
• Kolumny siatki są tworzone przez określenie liczby 12 dostępnych kolumn, które chcesz objąć. Na przykład trzy równe kolumny użyłyby trzech.col-sm-4
• Szerokości kolumn są wyrażone w procentach, więc zawsze są płynne i mają rozmiar w stosunku do elementu nadrzędnego
• Największą różnicą między Bootstrap 3 i Bootstrap 4 jest to, że Bootstrap 4 używa teraz flexboxa zamiast pływaków. Jedną z wielkich zalet flexbox jest to, że kolumny siatki bez określonej szerokości będą automatycznie układane jako „kolumny o równej szerokości” (i równej wysokości). Przykład: Każdy z trzech elementów z .col-smautomatycznie będzie miał szerokość 33,33% od małego punktu przerwania w górę. Wskazówka: Jeśli chcesz dowiedzieć się więcej o Flexbox, możesz przeczytać nasz samouczek CSS Flexbox .

Podstawowa struktura siatki Bootstrap 4

Poniżej znajduje się podstawowa struktura siatki Bootstrap 4:

Pierwszy przykład: utwórz wiersz ( <div class="row">). Następnie dodaj żądaną liczbę kolumn (tagi z odpowiednimi .col-*-*klasami). Pierwsza gwiazdka (*) reprezentuje responsywność: sm, md, lg lub xl, podczas gdy druga gwiazdka reprezentuje liczbę, która powinna zawsze sumować się do 12 w każdym wierszu.

Drugi przykład: zamiast dodawać liczbę do każdego col, pozwól bootstrapowi obsłużyć układ, aby utworzyć kolumny o równej szerokości: dwa "col"elementy = 50% szerokości dla każdej kolumny. trzy kol. = 33,33% szerokości na każdy kol. cztery kolumny = 25% szerokości itd. Możesz również użyć .col-sm|md|lg|xlopcji, aby kolumny były responsywne.

Opcje siatki

Poniższa tabela podsumowuje, jak system siatki Bootstrap 4 działa na różnych rozmiarach ekranu:

Przykłady

W kolejnych rozdziałach przedstawiono przykłady systemów siatek dla różnych urządzeń i szerokości ekranu:

• Ułożone w poziomie
• Bardzo mały układ
• Małe urządzenia
• Średnie urządzenia
• Duże urządzenia
• Bardzo duże urządzenia
• Więcej przykładów siatki