Siatka Bootstrap 5

System siatki Bootstrap 5

System siatki Bootstrap jest zbudowany na podstawie flexbox, a strona może mieć maksymalnie 12 kolumn.

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

span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1
span 4 span 4 span 4
span 4 span 8
span 6 span 6
span 12

System siatki jest szybki i reaktywny, kolumny automatycznie przestawiają się w zależności od rozmiaru ekranu.

Upewnij się, że suma wynosi 12 lub mniej (jeśli nie używasz wszystkich 12 dostępnych kolumn).

Klasy siatki

System siatki Bootstrap 5 ma sześć klas:

  • .col- (bardzo małe urządzenia - szerokość ekranu wynosi mniej niż 576px)
  • .col-sm- (małe urządzenia - szerokość ekranu wynosi 576px lub więcej)
  • .col-md- (średnie urządzenia - szerokość ekranu wynosi 768 pikseli lub więcej)
  • .col-lg- (duże urządzenia - szerokość ekranu wynosi 992 pikseli lub więcej)
  • .col-xl- (urządzenia xlarge - szerokość ekranu wynosi 1200px lub więcej)
  • .col-xxl- (urządzenia xxlarge - szerokość ekranu wynosi 1400px lub więcej)

Możesz łączyć powyższe klasy, aby stworzyć bardziej dynamiczny i elastyczny układ.

Wskazówka:Każda klasa jest skalowana proporcjonalnie, więc jeśli chcesz, aby sm i md Aby ustawić tę samą szerokość, 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>

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

Drugi przykład: nie przypisuj każdemu col Dodaj liczbę, zamiast pozwolić Bootstrapowi na obsługę układu, aby utworzyć równej szerokości kolumn: dwa "col" Element = każda col ma szerokość 50%, a trzy cols mają szerokość 33.33%. Cztery kolumny mają szerokość 25%, itd. Możesz również użyć .col-sm|md|lg|xl|xxl Umożliwia kolumnom uzyskanie reaktywności.

Poniżej przedstawiamy kilka podstawowych przykładów układu siatek Bootstrap 5.

Kolumny podzielone na trzy części

Poniższy przykład pokazuje, jak tworzyć trzy równej szerokości kolumn na wszystkich urządzeniach i szerokościach ekranów:

Przykład

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

Spróbuj sam

Reaktywne kolumny

Poniższy przykład pokazuje, jak od tabletu zacząć tworzyć cztery równej szerokości kolumn, a następnie rozszerzyć je na超大型桌面。Na szerokości mniejszej niż 576px w telefonach lub ekranach, kolumny automatycznie składają się razem:

Przykład

<div class="row">
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
</div>

Spróbuj sam

Dwie różne reaktywne kolumny

Poniższy przykład pokazuje, jak uzyskać dwa różne szerokości kolumn na tablecie i rozszerzyć je na超大型桌面：

Przykład

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>

Spróbuj sam

Wskazówka:Na końcu tego kursu nauczysz się więcej o System siatek Więcej treści.