Poniżej zebraliśmy kilka przykładów podstawowych Bootstrap układów sieciowych.
Trzy równe Kolumny
Poniższy przykład pokazuje, jak zdobyć trzy kolumny o równej szerokości zaczynają się tabletek i skalowanie do dużych komputerów stacjonarnych. W telefonach komórkowych, kolumny automatycznie stosu:
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> Spróbuj sam " Trzy Nierówne Kolumny
Poniższy przykład pokazuje, jak uzyskać kolumny trzy różne szerokości, zaczynając od tabletek i skalowanie do dużych 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> Spróbuj sam " Dwie nierówne Kolumny
Poniższy przykład pokazuje, jak uzyskać dwie różne szerokości kolumn począwszy od tabletek i skalowanie do dużych 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> Spróbuj sam " Dwie kolumny z dwóch zagnieżdżonych Kolumny
Poniższy przykład pokazuje, jak dostać się dwie kolumny począwszy od tabletek i skalowanie dużych pulpitów z kolejnych dwóch kolumnach (równe szerokości) w ramach większej kolumny (w telefonach komórkowych, te kolumny oraz ich zagnieżdżone kolumny będą stack):
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> Spróbuj sam " Mieszane: mobilnych i stacjonarnych
Bootstrap system sieci ma cztery klasy: xs (komórkowych), sm (tabletki), md (desktopy) oraz lg (większe komputery stacjonarne). Klasy mogą być łączone w celu stworzenia bardziej dynamiczne i elastyczne układy.
Wskazówka: Każda klasa skaluje się, więc jeśli chcesz ustawić te same szerokości do xs i sm , trzeba 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> Spróbuj sam " Wskazówka: Pamiętaj, że kolumny siatki należy dodać do dwunastej w rzędzie. Ponad że kolumny będą układać bez względu na viewport .
Mieszane: Komórka, tablety i stacjonarnych
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-8</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> Spróbuj sam " Pogodne pływaków
Pogodne pływaki (z .clearfix klasie) w konkretnych pułapki, aby zapobiec dziwne opakowanie z nierównym treś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> Spróbuj sam " kompensowanie Kolumny
Przenieś kolumnach po prawej stronie za pomocą .col-md-offset-* zajęcia. Klasy te zwiększają lewego marginesu kolumny przez * kolumnach:
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">
.col-sm-5 .col-sm-offset-2 .col-md-6
.col-md-offset-0</div>
</div> Spróbuj sam " Pchają i ciągną - Zmień kolejność kolumn
Zmiana kolejności kolumn siatki z .col-md-push-* i .col-md-pull-* klasach:
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> Spróbuj sam "