Bootstrap Siatka Przykład: średnio Devices
W poprzednim rozdziale przedstawiliśmy przykładowe siatki z zajęć dla małych urządzeń. Użyliśmy dwa DIV (kolumny) i daliśmy im 25%/75% dzielone:
<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>Ale średnich urządzeń konstrukcja może być lepiej jako 50%/50% rozłamu.
Wskazówka: Urządzenia średnie definiuje się jako mający szerokość ekranu z 992 pikseli do 1199 pikseli.
Dla średnich urządzeń użyjemy .col-md-* zajęcia.
Teraz dodamy szerokości kolumn dla urządzeń średnich:
<div class="col-sm-3 col-md-6">....</div>
<div class="col-sm-9 col-md-6">....</div>
Teraz Bootstrap powie "w małym rozmiarze, spojrzeć na zajęciach z -sm- w nich i korzystać z nich. Na średniej wielkości, spojrzeć na zajęciach z -md- w nich i korzystać z tych".
Poniższy przykład spowoduje 25%/75% pęknięciem na małych urządzeniach i 50%/50% pęknięciem na ś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
col-md-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9 col-md-6" 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.
Korzystanie jedynym medium
W poniższym przykładzie, tylko określić .col-md-6 klasy (bez .col-sm-* ). Oznacza to, że urządzenia średnich i dużych podzieli 50%/50% - ponieważ klasa skaluje się. Jednakże, w przypadku małych urządzeń, to stos pionowo (100% szerokości):
Przykład
<div
class="row">
<div class="col-md-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-md-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
Spróbuj sam " Kolejny rozdział pokazuje, jak dodać inny podziału procent dla dużych urządzeń.