Bootstrap Sistem Grid
Bootstrap's sistem grilă permite până la 12 coloane pe pagină.
Dacă nu doriți să utilizați toate cele 12 coloana individual, puteți grupa coloanele împreună pentru a crea coloane mai largi:
| durata 1 | durata 1 | durata 1 | durata 1 | durata 1 | durata 1 | durata 1 | durata 1 | durata 1 | durata 1 | durata 1 | durata 1 |
| durata 4 | durata 4 | durata 4 | |||||||||
| durata 4 | durata 8 | ||||||||||
| durata 6 | durata 6 | ||||||||||
| durata 12 | |||||||||||
Bootstrap's sistem grid este receptiv, iar coloanele vor re-aranja în mod automat , în funcție de dimensiunea ecranului.
Clase Grid
Bootstrap Sistemul de grilă are patru clase:
- xs (for phones)
- sm (for tablets)
- md (for desktops) - (for desktops)
- lg (for larger desktops)
Clasele de mai sus pot fi combinate pentru a crea aspecte mai dinamice și flexibile.
Structura de bază a unui Bootstrap Grid
Următoarele este o structură de bază a unui Bootstrap grilă:
<div
class="row">
<div class="col-*-*"></div>
</div>
<div
class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div
class="row">
...
</div> Primul; a crea un rând ( <div class="row"> ). Apoi, se adaugă numărul dorit de coloane (tag - uri cu corespunzătoare .col-*-* clase). Rețineți că numerele din .col-*-* ar trebui să adăugați întotdeauna până la 12 pentru fiecare rând.
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 » 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 » Sfat: Vei afla mai multe despre Bootstrap grilelor mai târziu în acest tutorial.