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 funcție de dimensiunea ecranului: Pe un ecran mare s - ar putea arata mai bine cu conținutul organizat în trei coloane, dar pe un ecran mic ar fi mai bine dacă elementele de conținut au fost stivuite pe partea de sus a reciproc.
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 .
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.
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 .
Reguli de sistem Grid
Unele Bootstrap reguli de sistem grilă:
- Rânduri trebuie plasate într - un
.container(fixed-width) sau.container-fluid(full-width) pentru alinierea corectă și padding - Utilizați rânduri pentru a crea grupuri de coloane orizontale
- Conținutul trebuie să fie plasate în coloane și numai coloanele pot fi imediat copii de rânduri
- Clase predefinite precum
.rowși.col-sm-4sunt disponibile pentru a face rapid layout - grilă - Coloane crea jgheaburi (gaps between column content) prin umplutură. Această umplutură este decalată în rânduri , pentru prima și ultima coloană prin marjă negativă pe
.rows - coloanele Grid sunt create prin specificarea numărului de 12 coloane disponibile pe care doriți să travee. De exemplu, trei coloane egale ar folosi trei
.col-sm-4
Structura de bază a unui Bootstrap Grid
Următoarele este o structură de bază a unui Bootstrap grilă:
<div class="container">
<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>
</div> Deci, pentru a crea aspectul dorit, creați un container ( <div class="container"> ). Apoi, creați 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.
Opțiuni Grid
Tabelul de mai jos rezumă modul în care Bootstrap funcționează sistemul de rețea pe mai multe dispozitive:
| Dispozitive suplimentare mici Telefoanele (<768px) | dispozitive mici Tablete (>=768px) | dispozitive de mediu Desktopuri (>=992px) | dispozitive de mari dimensiuni Desktopuri (>=1200px) | |
|---|---|---|---|---|
| comportamentul Grid | Orizontală în orice moment | Prăbușit pentru a începe, orizontale de mai sus puncte de întrerupere | Prăbușit pentru a începe, orizontale de mai sus puncte de întrerupere | Prăbușit pentru a începe, orizontale de mai sus puncte de întrerupere |
| lăţime container | Nici unul (auto) | 750px | 970px | 1170px |
| Clasa prefix | .col-xs- | .col-SM | .col-MD- | .col-lg- |
| Numar de coloane | 12 | 12 | 12 | 12 |
| Lățimea coloanei | Auto | ~ 62px | ~ 81px | ~ 97px |
| lăţime Jgheab | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) |
| încorporabile | da | da | da | da |
| Offsets | da | da | da | da |
| Coloana de comanda | da | da | da | da |
Exemple
Următoarele capitole prezintă exemple de sisteme de rețea pentru diferite dispozitive: