Bootstrap 4 Siatka mała
Przykład mał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 |
Załóżmy, że mamy prosty układ z dwiema kolumnami. Chcemy, aby kolumny były podzielone 25%/75% dla małych urządzeń.
Małe urządzenia są definiowane jako mające szerokość ekranu od 576 do 767 pikseli .
Dla małych urządzeń użyjemy .col-sm-*klas.
Do naszych dwóch kolumn dodamy następujące klasy:
<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>
Teraz Bootstrap powie „przy małym rozmiarze poszukaj klas z -sm- i używaj ich”.
Poniższy przykład spowoduje podział 25%/75% na małe (i średnie, duże i bardzo duże) urządzenia. 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 bg-success">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9 bg-warning">
<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):
W przypadku podziału 33,3%/66,6% użyłbyś .col-sm-4i .col-sm-8(a dla podziału 50%/50% użyłbyś .col-sm-6i .col-sm-6):
Przykład
<!-- 33.3/66.6% split: -->
<div class="container-fluid">
<div class="row">
<div class="col-sm-4 bg-success">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-8 bg-warning">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
<!-- 50%/50% split: -->
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 bg-success">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6 bg-warning">
<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ń: wystarczy usunąć numer z .col-sm-*i użyć .col-smklasy 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ż 576px , kolumny zostaną ułożone poziomo:
<!-- Two columns: 50% width on all screens, except for extra small (100%
width) -->
<div class="row">
<div class="col-sm">1 of
2</div>
<div class="col-sm">2 of 2</div>
</div>
<!-- Four
columns: 25% width on all screens, except for extra small (100% width)-->
<div class="row">
<div class="col-sm">1 of 4</div>
<div class="col-sm">2 of 4</div>
<div class="col-sm">3
of 4</div>
<div class="col-sm">4 of 4</div>
</div>
W następnym rozdziale pokazano, jak dodać inny procent podziału dla średnich urządzeń.