Siatka Bootstrap 4 — duża
Przykład dużej siatki
| Extra small | Small | Medium | Large | Extra Large | |
|---|---|---|---|---|---|
| Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
| Screen width | <576px | >=576px | >=768px | >=992px | >=1200px |
W poprzednim rozdziale przedstawiliśmy przykład siatki z klasami dla małych i średnich urządzeń. Użyliśmy dwóch divów (kolumn) i daliśmy im podział 25%/75% na małych urządzeniach i 50%/50% na średnich urządzeniach:
<div class="col-sm-3 col-md-6">....</div>
<div class="col-sm-9 col-md-6">....</div>
Ale na dużych urządzeniach projekt może być lepszy jako podział 33%/66%.
Duże urządzenia definiuje się jako mające szerokość ekranu od 992 do 1199 pikseli .
Dla dużych urządzeń zastosujemy .col-lg-*klasy:
<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>
Teraz Bootstrap powie „przy małym rozmiarze spójrz na klasy z -sm- i użyj ich. Przy średnim rozmiarze spójrz na klasy z -md- i użyj ich. Przy dużym rozmiarze spójrz na klas ze słowem -lg- i ich używaj".
Poniższy przykład spowoduje podział 25%/75% na małych urządzeniach, 50%/50% na średnich urządzeniach oraz 33%/66% na dużych i bardzo dużych urządzeniach. Na bardzo małych urządzeniach automatycznie układa się w stos (100%):
Przykład
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-6 col-lg-4">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9 col-md-6 col-lg-8">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Uwaga: Upewnij się, że suma nie przekracza 12 (nie jest wymagane użycie wszystkich 12 dostępnych kolumn):
Korzystanie tylko z dużych
W poniższym przykładzie określamy tylko .col-lg-6klasę (bez .col-md-*i/lub .col-sm-*). Oznacza to, że duże i bardzo duże urządzenia podzielą 50%/50%. Jednak w przypadku średnich, małych ORAZ bardzo małych urządzeń będzie się układać pionowo (100% szerokości):
Przykład
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<p>Lorem ipsum...</p>
</div>
<div class="col-lg-6">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Kolumny z automatycznym układem
W Bootstrap 4 istnieje prosty sposób na utworzenie kolumn o równej szerokości dla wszystkich urządzeń: po prostu usuń liczbę z .col-lg-*i użyj .col-lgklasy tylko na określonej liczbie
elementów col . Bootstrap rozpozna, ile jest kolumn, a każda kolumna otrzyma taką samą szerokość.
Jeśli rozmiar ekranu jest mniejszy niż 992px , kolumny zostaną ułożone poziomo:
<!-- Two columns: 50% width on large and up-->
<div class="row">
<div class="col-lg">1 of
2</div>
<div class="col-lg">2 of 2</div>
</div>
<!-- Four
columns: 25% width on large and up -->
<div class="row">
<div class="col-lg">1 of 4</div>
<div class="col-lg">2 of 4</div>
<div class="col-lg">3
of 4</div>
<div class="col-lg">4 of 4</div>
</div>