Mai jos am colectat câteva exemple de bază Bootstrap machete grilă.
Trei coloane, aproximativ egale
Următorul exemplu arată cum să obțineți un trei coloane egal cu lățime începând de la tablete și scalare la desktop-uri de mari dimensiuni. Pe telefoanele mobile, coloanele vor stiva automat:
Exemplu
<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> Încearcă - l singur » Trei coloane inegale
Următorul exemplu arată cum să obțineți un coloane de trei diferite lățime începând de la tablete și scalare la desktop-uri mari:
Exemplu
<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> Încearcă - l singur » Două coloane inegale
Următorul exemplu arată cum să obțineți două coloane diferite lățime începând de la tablete și scalare la desktop-uri mari:
Exemplu
<div class="row">
<div
class="col-sm-4">.col-sm-4</div>
<div
class="col-sm-8">.col-sm-8</div>
</div> Încearcă - l singur » Două coloane cu două coloane imbricate
Următorul exemplu arată cum să obțineți două coloane începând de la tablete și scalare la desktop - uri mari, cu alte două coloane (equal widths) în coloana mai mare (la telefoanele mobile, aceste coloane și coloanele lor imbricate vor stiva):
Exemplu
<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> Încearcă - l singur » Mixt: mobile și pentru desktop
Bootstrap Sistemul grilă are patru clase: xs (phones) , sm (tablets) , md (desktops) și lg (larger desktops) - (larger desktops) . Clasele pot fi combinate pentru a crea aspecte mai dinamice și flexibile.
Sfat: Fiecare clasă de cântare în sus, așa că , dacă doriți să stabilească aceleași lățimi pentru xs și sm , trebuie doar să specificați xs .
Exemplu
<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> Încearcă - l singur » Sfat: nu uitați că coloanele de rețea ar trebui să adăugați până la douăsprezece pentru un rând. Mai mult decât atât, coloane se vor cumula indiferent de viewport de viewport .
Mixt: dispozitiv mobil, tabletă și desktop
Exemplu
<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> Încearcă - l singur » Clear pluteste
Flotoare clare (with the .clearfix class) la punctele de întrerupere specifice pentru a preveni ambalaj ciudat cu conținut inegale:
Exemplu
<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> Încearcă - l singur » Coloane compensabile
Mutați coloanele la dreapta folosind .col-md-offset-* clase. Aceste clase crește marginea din stânga a unei coloane de * coloane:
Exemplu
<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> Încearcă - l singur » Prin împingere și tragere - Modificare coloană comandă
Modificarea ordinii coloanelor de rețea cu .col-md-push-* și .col-md-pull-* clase:
Exemplu
<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> Încearcă - l singur »