System siatki Bootstrap 5

System siatki

System siatki Bootstrap jest zbudowany na flexbox, co pozwala na maksymalnie 12 kolumn na stronie.

Jeśli nie chcesz używać wszystkich 12 kolumn osobno, możesz połączyć je, aby stworzyć szersze kolumny:

System siatki jest szybko reagujący, kolumny automatycznie przestawiają się w zależności od rozmiaru ekranu.

Upewnij się, że suma wynosi lub jest mniejsza niż 12 (nie musi być używanych wszystkich 12 dostępnych kolumn).

Klasy siatki

System siatki Bootstrap 5 oferuje sześć klas:

  • .col- (Bardzo małe urządzenia - szerokość ekranu mniejsza niż 576px)
  • .col-sm- (Małe urządzenia - szerokość ekranu równa lub większa niż 576px)
  • .col-md- (Średnie urządzenia - 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- (Bardzo duże urządzenia - szerokość ekranu równa lub większa niż 1200px)
  • .col-xxl- (Duże urządzenia - szerokość ekranu równa lub większa niż 1400px)

Kombinując powyższe klasy, można stworzyć bardziej dynamiczne i elastyczne układy.

Wskazówka:Każda klasa jest skalowana proporcjonalnie, więc jeśli chcesz ustawić tę samą szerokość dla sm i md, wystarczy określić sm.

Podstawowa struktura siatki Bootstrap 5

Oto podstawowa struktura siatki Bootstrap 5:

<!-- Kontrole szerokości kolumn oraz ich wyświetlania na różnych urządzeniach -->
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<!-- Lub pozwól Bootstrapowi automatycznie obsługiwać układ -->
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

Spróbuj sam

Pierwszy przykład: utwórz wiersz (<div class = "row">). Następnie dodaj wymagane liczby kolumn (z .col-*-* etykiety klasy). Pierwszy gwiazdka (*) reprezentuje responsywność: sm, md, lg, xl lub xxl, a druga gwiazdka reprezentuje liczbę, która w każdej linii powinna wynosić 12.

Drugi przykład: nie przypisuj każdej col dodać liczbę, zamiast pozwolić bootstrapowi na obsługę układu, aby utworzyć równe kolumny: dwa "col" Element = 50% szerokości każdej kolumny, a trzy kolumny = 33.33% szerokości każdej kolumny. Cztery kolumny = 25% szerokości itd. Możesz również użyć .col-sm|md|lg|xl|xxl Umożliwia kolumnom by były responsywne.

Opcje siatki

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

Super mały (<576px) Mały (>=576px) Średni (>=768px) Duży (>=992px) Super duży (>=1200px) Ekstra duży (>=1400px)
Przedrostek klasy .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
Zachowanie siatki Zawsze poziomo Zwijanie zaczyna się, gdy przekroczona jest granica pozioma Zwijanie zaczyna się, gdy przekroczona jest granica pozioma Zwijanie zaczyna się, gdy przekroczona jest granica pozioma Zwijanie zaczyna się, gdy przekroczona jest granica pozioma Zwijanie zaczyna się, gdy przekroczona jest granica pozioma
Szerokość kontenera Brak (auto) 540px 720px 960px 1140px 1320px
Dla Smartfon w orientacji pionowej Smartfon w orientacji poziomej Tablety Laptopy Laptopy i komputery stacjonarne Laptopy i komputery stacjonarne
Numer kolumny # 12 12 12 12 12 12
Szerokość przestrzeni między kolumnami 1.5rem (po każdej stronie kolumny .75rem ) 1.5rem (po każdej stronie kolumny .75rem ) 1.5rem (po każdej stronie kolumny .75rem ) 1.5rem (po każdej stronie kolumny .75rem ) 1.5rem (po każdej stronie kolumny .75rem ) 1.5rem (po każdej stronie kolumny .75rem )
Wgłębniające Tak Tak Tak Tak Tak Tak
Przesunięcie Tak Tak Tak Tak Tak Tak
Sortowanie kolumn Tak Tak Tak Tak Tak Tak