Bootstrap Grid System
Bootstrap's sistema di rete consente fino a 12 colonne sulla pagina.
Se non si desidera utilizzare tutte le 12 colonne singolarmente, è possibile raggruppare le colonne insieme per creare colonne più ampie:
| Periodo 1 | Periodo 1 | Periodo 1 | Periodo 1 | Periodo 1 | Periodo 1 | Periodo 1 | Periodo 1 | Periodo 1 | Periodo 1 | Periodo 1 | Periodo 1 |
| arco di 4 | arco di 4 | arco di 4 | |||||||||
| arco di 4 | arco 8 | ||||||||||
| arco di 6 | arco di 6 | ||||||||||
| arco di 12 | |||||||||||
Bootstrap's sistema di griglia è sensibile, e le colonne si ri-organizzare in base alle dimensioni dello schermo: Su un grande schermo potrebbe sembrare meglio con i contenuti organizzati in tre colonne, ma su un piccolo schermo che sarebbe stato meglio se erano accatastati gli elementi di contenuto uno sopra l'altro.
Suggerimento: Ricordare che le colonne della griglia dovrebbe aggiungere fino a dodici per una riga. Più di questo, le colonne saranno impilare non importa la viewport .
Classi griglia
Il Bootstrap sistema di griglia ha quattro classi:
- xs (per i telefoni)
- sm (per le tavolette)
- md (per desktop)
- lg (per i desktop più grandi)
Le classi sopra possono essere combinati per creare layout più dinamici e flessibili.
Suggerimento: Ogni classe scale up, quindi se si desidera impostare le stesse larghezze per xs e sm , avete solo bisogno di specificare xs .
Griglia regole di sistema
Alcuni Bootstrap regole di sistema di griglia:
- Le righe devono essere collocati all'interno di un
.container(a dimensione fissa) o.container-fluid(full-width) per il corretto allineamento e imbottitura - Utilizzare file per creare gruppi orizzontali di colonne
- Il contenuto deve essere collocato all'interno di colonne, e solo le colonne può essere figli immediati di righe
- Classi predefinite come
.rowe.col-sm-4sono disponibili per fare rapidamente i layout della griglia - Colonne creano grondaie (fughe tra il contenuto della colonna) tramite imbottitura. Che imbottitura è compensato in fila per la prima e ultima colonna tramite margine negativo sulla
.rows - colonne della griglia sono creati specificando il numero di 12 colonne disponibili si desidera estendersi. Per esempio, tre colonne uguali userebbero tre
.col-sm-4
Struttura di base di un Bootstrap griglia
Quanto segue è una struttura di base di un Bootstrap griglia:
<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> Così, per creare il layout desiderato, creare un contenitore ( <div class="container"> ). Successivamente, creare una riga ( <div class="row"> ). Quindi, aggiungere il numero desiderato di colonne (tag con adeguate .col-*-* classi). Si noti che i numeri in .col-*-* devono sempre aggiungere fino a 12 per ogni riga.
Opzioni griglia
La seguente tabella riassume come il Bootstrap sistema di rete funziona su più dispositivi:
| Extra small devices Phones (<768px) |
Small devices Tablets (>=768px) |
Medium devices Desktops (>=992px) |
Large devices Desktops (>=1200px) |
|
|---|---|---|---|---|
| Grid behaviour | Horizontal at all times | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints |
| Container width | None (auto) | 750px | 970px | 1170px |
| Class prefix | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| Number of columns | 12 | 12 | 12 | 12 |
| Column width | Auto | ~62px | ~81px | ~97px |
| Gutter width | 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) |
| Nestable | Yes | Yes | Yes | Yes |
| Offsets | Yes | Yes | Yes | Yes |
| Column ordering | Yes | Yes | Yes | Yes |
Esempi
I prossimi capitoli mostra alcuni esempi di sistemi di rete per i vari dispositivi:
- Stacked-to-orizzontale
- dispositivi di piccole dimensioni
- dispositivi di media
- dispositivi di grandi dimensioni