Przykłady siatki Bootstrap
Poniżej zebraliśmy kilka przykładów podstawowych układów siatki Bootstrap.
Trzy równe kolumny
Poniższy przykład pokazuje, jak uzyskać trzy kolumny o równej szerokości, zaczynając od tabletów i skalując do dużych komputerów stacjonarnych. W telefonach komórkowych kolumny będą się układać automatycznie:
Przykład
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
Trzy nierówne kolumny
Poniższy przykład pokazuje, jak uzyskać trzy kolumny o różnej szerokości, zaczynając od tabletów i skalując do dużych komputerów stacjonarnych:
Przykład
<div class="row">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
Dwie nierówne kolumny
Poniższy przykład pokazuje, jak uzyskać dwie kolumny o różnej szerokości, zaczynając od tabletów i skalując do dużych komputerów stacjonarnych:
Przykład
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
Brak rynien
Użyj .row-no-guttersklasy, aby usunąć rynny z rzędu i jego kolumn:
Przykład
<div class="row row-no-gutters">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
Dwie kolumny z dwoma zagnieżdżonymi kolumnami
Poniższy przykład pokazuje, jak uzyskać dwie kolumny zaczynające się od tabletów i skalowane do dużych komputerów stacjonarnych, z kolejnymi dwiema kolumnami (równej szerokości) w większej kolumnie (w telefonach komórkowych te kolumny i ich kolumny zagnieżdżone będą układane w stos):
Przykład
<div class="row">
<div class="col-sm-8">
.col-sm-8
<div class="row">
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-6">.col-sm-6</div>
</div>
</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
Mieszane: mobilne i stacjonarne
System grid Bootstrap ma cztery klasy: xs (telefony), sm (tablety), md (komputery stacjonarne) i lg (większe komputery stacjonarne). Zajęcia można łączyć, aby tworzyć bardziej dynamiczne i elastyczne układy.
Wskazówka: Każda klasa skaluje się w górę, więc jeśli chcesz ustawić te same szerokości dla xs i sm, musisz tylko określić xs.
Przykład
<div class="row">
<div class="col-xs-9 col-md-7">.col-xs-9 .col-md-7</div>
<div class="col-xs-3 col-md-5">.col-xs-3 .col-md-5</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-10">.col-xs-6 .col-md-10</div>
<div class="col-xs-6 col-md-2">.col-xs-6 .col-md-2</div>
</div>
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
Wskazówka: pamiętaj, że kolumny siatki powinny sumować się do dwunastu w wierszu. Co więcej, kolumny będą się układać w stos bez względu na widoczny obszar.
Mieszane: urządzenia mobilne, tablety i komputery stacjonarne
Przykład
<div class="row">
<div class="col-xs-7 col-sm-6 col-lg-8">.col-xs-7 .col-sm-6 .col-lg-8</div>
<div class="col-xs-5 col-sm-6 col-lg-4">.col-xs-5 .col-sm-6 .col-lg-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-8 col-lg-10">.col-xs-6 .col-sm-8 .col-lg-10</div>
<div class="col-xs-6 col-sm-4 col-lg-2">.col-xs-6 .col-sm-4 .col-lg-2</div>
</div>
Wyczyść pływaki
Wyczyść pływaki (z .clearfixklasą) w określonych punktach przerwania, aby zapobiec dziwnemu zawijaniu z nierówną zawartością:
Przykład
<div class="row">
<div class="col-xs-6 col-sm-3">
Column 1
<br>
Resize the browser window to see the effect.
</div>
<div class="col-xs-6 col-sm-3">Column 2</div>
<!-- Add clearfix for only the required viewport -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3">Column 3</div>
<div class="col-xs-6 col-sm-3">Column 4</div>
</div>
Przesuwanie kolumn
Przenieś kolumny w prawo za pomocą .col-md-offset-*klas. Te klasy zwiększają lewy margines kolumny o * kolumny:
Przykład
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">
</div>
Push and Pull — zmiana kolejności kolumn
Zmień kolejność kolumn siatki za pomocą .col-md-push-*i
.col-md-pull-*klas:
Przykład
<div class="row">
<div class="col-sm-4 col-sm-push-8">.col-sm-4 .col-sm-push-8</div>
<div class="col-sm-8 col-sm-pull-4">.col-sm-8 .col-sm-pull-4</div>
</div>