Příklady zaváděcí mřížky
Níže jsme shromáždili několik příkladů základních rozložení mřížky Bootstrap.
Tři stejné sloupce
Následující příklad ukazuje, jak získat tři sloupce stejné šířky počínaje tabletami a škálovat na velké stolní počítače. Na mobilních telefonech se sloupce automaticky skládají:
Příklad
<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>
Tři nestejné sloupce
Následující příklad ukazuje, jak získat tři sloupce různé šířky počínaje tabletami a škálovat na velké stolní počítače:
Příklad
<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>
Dva nestejné sloupce
Následující příklad ukazuje, jak získat dva sloupce různé šířky počínaje tabletami a škálovat na velké stolní počítače:
Příklad
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
Žádné okapy
Použijte .row-no-gutterstřídu k odstranění okapů z řádku a jeho sloupců:
Příklad
<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>
Dva Sloupce S Dvěma Vnořenými Sloupci
Následující příklad ukazuje, jak získat dva sloupce počínaje tabletami a škálovat na velké stolní počítače s dalšími dvěma sloupci (stejné šířky) ve větším sloupci (u mobilních telefonů se tyto sloupce a jejich vnořené sloupce naskládají):
Příklad
<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>
Smíšené: mobilní a stolní počítače
Bootstrap grid systém má čtyři třídy: xs (telefony), sm (tablety), md (stolní počítače) a lg (větší stolní počítače). Třídy lze kombinovat a vytvářet dynamičtější a flexibilnější rozvržení.
Tip: Každá třída se zvětšuje, takže pokud chcete nastavit stejné šířky pro xs a sm, stačí zadat xs.
Příklad
<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>
Tip: Pamatujte, že počet sloupců mřížky by měl být dvanáct na řádek. Kromě toho se sloupce budou skládat bez ohledu na výřez.
Smíšené: Mobil, Tablet a Desktop
Příklad
<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>
Clear Floats
Vymažte plovoucí (s .clearfixtřídou) na konkrétních bodech přerušení, abyste zabránili podivnému zalamování s nerovnoměrným obsahem:
Příklad
<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>
Odsazení sloupců
Přesunout sloupce doprava pomocí .col-md-offset-*tříd. Tyto třídy zvětší levý okraj sloupce o * sloupce:
Příklad
<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 - Změna řazení sloupců
Změňte pořadí sloupců mřížky pomocí .col-md-push-*a
.col-md-pull-*tříd:
Příklad
<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>