Siatka Bootstrap — małe urządzenia
Przykład siatki Bootstrap: małe urządzenia
| Extra small | Small | Medium | Large | |
|---|---|---|---|---|
| Class prefix | .col-xs |
.col-sm |
.col-md |
.col-lg |
| Screen width | <768px | >=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ń.
Wskazówka: małe urządzenia są definiowane jako urządzenia o szerokości ekranu od 768 do 991 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 (oraz średnie i duże) urządzenia. Na bardzo małych urządzeniach automatycznie układa się w stos (100%):
col-sm-3
kol-sm-9
Przykład
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-3" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Uwaga: Upewnij się, że suma zawsze sumuje się do 12.
W przypadku podziału 33,3%/66,6% użyjesz .col-sm-4i .col-sm-8:
kol-sm-4
kol-sm-8
Przykład
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-4" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-8" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
W następnym rozdziale pokazano, jak dodać inny procent podziału dla średnich urządzeń.