Bootstrap Siatka Przykład: Drobny sprzęt
Załóżmy, że mamy prosty układ z dwoma kolumnami. Chcemy kolumny mają być podzielone 25%/75% dla małych urządzeń.
Wskazówka: Małe urządzenia są definiowane jako mający szerokość ekranu z 768 do 991 pikseli.
Dla małych urządzeń użyjemy .col-sm-* zajęcia.
Dodamy następujące klasy dla naszych dwóch kolumnach:
<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>Teraz Bootstrap powie "przy niewielkich rozmiarów, wygląda na zajęcia z -sm- w nich i korzystać z tych".
Poniższy przykład spowoduje 25%/75% podziałem na małe (oraz średnich i dużych) urządzeń. Na dodatkowych małych urządzeń, zostanie ona automatycznie stos (100%):
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> Spróbuj sam " Uwaga: Upewnij się, że suma zawsze dodaje się do 12.
Dla 33,3% / 66,6% Podział, należałoby użyć .col-sm-4 i .col-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> Spróbuj sam " Kolejny rozdział pokazuje, jak dodać inny podziału procent dla średnich urządzeń.