Przykłady siatki Bootstrap 5
- Poprzednia strona Siatka BS5 XXL
- Następna strona Podstawowy szablon BS5
Poniżej przygotowaliśmy kilka przykładów układu siatki Bootstrap 5.
Trzy równe kolumny
Używaj na określonej liczbie elementów .col Klasa, Bootstrap rozpozna liczbę elementów (i utworzy równe kolumny). W poniższym przykładzie użyliśmy trzech elementów col, każdy z szerokością 33.33%%.
Przykład
<div class="row"> <div class="col">col</div> <div class="col">col</div> <div class="col">col</div> </div>
Trzy równe kolumny z użyciem liczb
Możesz również użyć liczb do kontrolowania szerokości kolumn. Upewnij się, że suma wynosi lub jest mniejsza niż 12 (nie musisz używać wszystkich 12 dostępnych kolumn):
Przykład
<div class="row"> <div class="col-4">col-4</div> <div class="col-4">col-4</div> <div class="col-4">col-4</div> </div>
Trzy nierówne kolumny
Aby utworzyć różne kolumny, musisz użyć liczb. Poniższy przykład utworzy podział 25%/50%/25%:
Przykład
<div class="row"> <div class="col-3">col-3</div> <div class="col-6">col-6</div> <div class="col-3">col-3</div> </div>
Ustawienie szerokości kolumny
Jednak ustawienie szerokości jednej kolumny wystarczy, a braterskie kolumny automatycznie dostosują się do rozmiaru. Poniższy przykład utworzy podział 25%/50%/25%:
Przykład
<div class="row"> <div class="col">col</div> <div class="col-6">col-6</div> <div class="col">col</div> </div>
Więcej równych kolumn
Przykład
<!-- Dwie równe kolumny --> <div class="row"> <div class="col">1 z 2</div> <div class="col">2 z 2</div> </div> <!-- Cztery równe kolumny --> <div class="row"> <div class="col">1 z 4</div> <div class="col">2 z 4</div> <div class="col">3 z 4</div> <div class="col">4 z 4</div> </div> <!-- Sześć równych kolumn --> <div class="row"> <div class="col">1 z 6</div> <div class="col">2 z 6</div> <div class="col">3 z 6</div> <div class="col">4 z 6</div> <div class="col">5 z 6</div> <div class="col">6 z 6</div> </div>
Row Cols
Możesz również użyć .row-cols-* Kontrola klasy powinna pojawić się obok siebie w liczbie kolumn (nieważne, ile jest kolumn):
Przykład
<div class="row row-cols-1"> <div class="col">1 z 2</div> <div class="col">2 z 2</div> </div> <div class="row row-cols-2"> <div class="col">1 z 4</div> <div class="col">2 z 4</div> <div class="col">3 z 4</div> <div class="col">4 z 4</div> </div> <div class="row row-cols-3"> <div class="col">1 z 6</div> <div class="col">2 z 6</div> <div class="col">3 z 6</div> <div class="col">4 z 6</div> <div class="col">5 z 6</div> <div class="col">6 z 6</div> </div>
Więcej różnych kolumn
Przykład
<!-- Dwa różne kolumny --> <div class="row"> <div class="col-8">1 z 2</div> <div class="col-4">2 z 2</div> </div> <!-- Cztery różne kolumny --> <div class="row"> <div class="col-2">1 z 4</div> <div class="col-2">2 z 4</div> <div class="col-2">3 z 4</div> <div class="col-6">4 z 4</div> </div> <!-- Ustawianie szerokości dwóch kolumn --> <div class="row"> <div class="col-4">1 z 4</div> <div class="col-6">2 z 4</div> <div class="col">3 z 4</div> <div class="col">4 z 4</div> </div>
Równa wysokość
Jeśli kolumna jest wyższa niż inna (z powodu tekstu lub wysokości CSS), reszta będzie się podążać:
Przykład
<div class="row"> <div class="col">Lorem ipsum...</div> <div class="col">col</div> <div class="col">col</div> </div>
Wcięte kolumny
Poniżej znajduje się przykład, jak utworzyć układ dwukolumnowy, w którym jedna kolumna zawiera dwie inne kolumny:
Przykład
<div class="row">
<div class="col-8">
.col-8
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
<div class="col-4">.col-4</div>
</div>
Klasy reagujące
System siatek Bootstrap 5 ma pięć klas:
.col-(Ultra-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 połą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 Jeśli ustawiasz tę samą szerokość, wystarczy指定 sm.
Upakowanie do poziomu
Poniżej znajduje się przykład, jak utworzyć układ kolumn, który na początku jest upakowany na małych urządzeniach, a następnie staje się układem poziomym na większych urządzeniach (sm, md, lg i xl):
Przykład
<div class="row"> <div class="col-sm-9">col-sm-9</div> <div class="col-sm-3">col-sm-3</div> </div> <div class="row"> <div class="col-sm">col-sm</div> <div class="col-sm">col-sm</div> <div class="col-sm">col-sm</div> </div>
Mix i Match
Przykład
<!-- Na ultra-małych urządzeniach 50%/50% podział, na dużych urządzeniach 75%/25% podział --> <div class="row"> <div class="col-6 col-sm-9">col-6 col-sm-9</div> <div class="col-6 col-sm-3">col-6 col-sm-3</div> </div> <!-- Na ultra-małych, małych, średnich urządzeniach 58%/42% podział, na dużych i ultra-wielkich urządzeniach 66.3%/33.3% podział --> <div class="row"> <div class="col-7 col-lg-8">col-7 col-lg-8</div> <div class="col-5 col-lg-4">col-5 col-lg-4</div> </div> <!-- Na małych urządzeniach 25%/75% podział, na średnich urządzeniach 50%/50% podział, na dużych i ultra-wielkich urządzeniach 33%/66% podział. Na ultra-małych urządzeniach, automatycznie ustawia się na 100% --> <div class="row"> <div class="col-sm-3 col-md-6 col-lg-4">col-sm-3 col-md-6 col-lg-4</div> <div class="col-sm-9 col-md-6 col-lg-8">col-sm-9 col-md-6 col-lg-8</div> </div>
bez gutter
Aby zmienić odległość między kolumnami (dodatkowe przestrzenie), użyj każdej .g-1|2|3|4|5 klasy (.g-4 jest wartością domyślną).
Aby całkowicie usunąć spacje między kolumnami (gutter), użyj .g-0：
Przykład
<div class="row g-0">
- Poprzednia strona Siatka BS5 XXL
- Następna strona Podstawowy szablon BS5
