Bootstrap Siatka Przykład: dużych urządzeń
W poprzednim rozdziale przedstawiliśmy przykładowe siatki z klas dla małych i średnich urządzeń. Użyliśmy dwa DIV (kolumny) i daliśmy im 25%/75% podzielone na małych urządzeniach i 50%/50% podzielone na średnich urządzeń:
<div class="col-sm-3 col-md-6">....</div>
<div class="col-sm-9 col-md-6">....</div>Ale w dużych urządzeniach projekt może być lepiej jako 33%/66% rozłamu.
Wskazówka: Duże urządzenia są definiowane jako mający szerokość ekranu z 1200 pikseli i powyżej.
W przypadku dużych urządzeń użyjemy .col-lg-* zajęcia.
Teraz dodamy szerokości kolumn dla dużych urządzeń:
<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 "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 nich. Na dużym rozmiarze, spojrzeć na zajęcia ze słowem -lg- w nich i korzystać z tych ".
Poniższy przykład spowoduje 25%/75% pęknięciem na małych urządzeniach, o 50%/50% pęknięciem na średnich urządzeń oraz 33%/66% pęknięciem na dużych urządzeń:
Przykład
<div class="container-fluid">
<h1>Hello World!</h1>
<div
class="row">
<div class="col-sm-3
col-md-6 col-lg-4" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9 col-md-6 col-lg-8" 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 tylko duże
W poniższym przykładzie, tylko określić .col-lg-6 klasy (bez .col-md-* i / lub .col-sm-* ). Oznacza to, że duże urządzenia podzieli 50% / 50%. Jednak dla średnich i małych urządzeń, będzie układać w pionie (100% szerokości):
Przykład
<div class="container-fluid">
<h1>Hello World!</h1>
<div
class="row">
<div class="col-lg-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-lg-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div> Spróbuj sam "