In effetti, se usi contenitoree riga(le versioni non fluide esistono ancora) quindi ti ritroverai con tutti i tuoi contenuti nella colonna centrale da 1024 pixel, e sarai in grado di usare l'intera larghezza della pagina se non lo fai. 

Migrazione del sistema a griglia 

Quindi il prossimo cambiamento di classe più grande è il sistema di griglia stesso. 

Nella versione 2 in genere hai creato griglie nel modo seguente: 

 
Contenuto qui
 
Contenuto qui
 

Questo codice ti darebbe due contenitori che riempivano ordinatamente i 12 quadrati di griglia orizzontalmente che avevano tutti i layout (tipicamente una barra laterale). 

Nella versione 3, la griglia di "livello medio" ora è l'equivalente della v2 campataclassi, quindi per riscrivere il codice precedente per V3 devi semplicemente fare quanto segue: 

 
Contenuto qui
 
Contenuto qui
 

Tuttavia, mentre la versione 2 aveva solo un livello di dimensione della griglia, la versione 3 ora ha quattro livelli. Ogni livello è personalizzato per il dispositivo target principale atteso per il quale il prodotto finale verrà eseguito. 

Queste unità della griglia sono ora denominate come segue: 

• Piccoli dispositivi extra: col-XS- *
• Piccoli dispositivi: col-SM- *
• Dispositivi medi: col-MD- *
• Grandi dispositivi: col-LG- *

Le query multimediali sono utilizzate internamente per BS3 per decidere solo quale delle suddette classi di griglia utilizzare, e le diverse dimensioni sono definite come segue: 

• Extra piccolo: larghezza dello schermo inferiore a 768 pixel 
• Piccolo: larghezza di visualizzazione maggiore o uguale a 768 pixel o inferiore a 992 pixel 
• Medio: larghezza di visualizzazione maggiore o uguale a 992 pixel o inferiore a 1.200 pixel 
• Grande: larghezza di visualizzazione maggiore o uguale a 1.200 pixel 

È possibile codificare più versioni della griglia per BS3 per decidere quale tipo utilizzare quando si scelgono più display. Ad esempio se hai fatto quanto segue: 

 
Contenuto qui
 
Contenuto qui
 
Contenuto qui
 
Contenuto qui
 
Contenuto qui
 
Contenuto qui
 
Contenuto qui
 
Contenuto qui
 

BS3 nasconderà e mostrerà i contenitori come richiesto, in base alla larghezza della visualizzazione del dispositivo e al funzionamento delle query multimediali. 

Come con le versioni precedenti del sistema a griglia, ci sono 12 colonne orizzontali in tutte le diverse dimensioni, quindi, indipendentemente dalla dimensione della griglia, avrai sempre 12 griglie su ogni dispositivo. 

Tuttavia, la larghezza della colonna cambia, pertanto potrebbe essere necessario pianificare il contenuto di tali griglie per sfruttare le diverse dimensioni. Le dimensioni per ognuna di esse sono le seguenti: 

• col-XS- *= Ridimensionamento automatico, senza dimensioni fisse 
• col-SM- *= 60 pixel 
• col-MD- *= 78 pixel 
• col-LG- *= 95 pixel 

Il margine di gronda in tutti i casi rimarrà a 15 pixel su ciascun lato del contenitore della griglia, fornendo una grondaia complessiva di 30 pixel. Questa dimensione sarà coerente indipendentemente dal livello di dimensioni della griglia che stai utilizzando. 

Nesting e offset funzionano come hanno fatto in precedenza, ma come con le griglie stesse, con una leggera ridenominazione delle classi effettive utilizzate. 

Per applicare un offset, basta usare col-md-Offset- *, ricordando di sostituire il mdcon xs, sm, o lgse necessario, in base alla dimensione della griglia. 

La nidificazione avviene semplicemente annidando i contenitori sotto il controllo di col-xx- *classi l'una dentro l'altra, dove si ridimensionano e si comportano come nelle precedenti versioni BS. 

I seguenti esempi mostrano il modo corretto per ottenere entrambe queste tecniche: 

 Livello 1: .col-md-9 
 
 Livello 2: .col-md-6 
 
 Livello 2: .col-md-6 
 

Questo esempio ti fornirà una griglia simile alla seguente: 

 .col-md-4 
 
 .col-md-4 .col-md-offset-4 
 
 .col-md-3 .col-md-offset-3 
 
 .col-md-3 .col-md-offset-3 
 
 .col-md-6 .col-md-offset-3 

Questo esempio ti darà un layout come segue: 

BS3 porta anche qualcosa di nuovo al tavolo quando si tratta di compensare e nidificare, e questo è qualcosa chiamato ordine delle colonne. 

Se vuoi che le tue colonne vengano presentate in un ordine diverso da come le definisci nel tuo documento HTML, puoi usare il nuovo col-xx-pull *e col-xx-push *classi per spingere o tirare i tuoi schemi di griglia nell'ordine che desideri. Per esempio: 

8 colonne di contenuti
 
4 colonne di contenuti

Se li rendi nel tuo documento, come previsto, otterrai quanto segue: 

Se, tuttavia, si modifica il codice precedente per aggiungere i modificatori push e pull come segue: 

8 colonne di contenuti
 
4 colonne di contenuti

Quando esegui il rendering del tuo documento, dovresti vedere il tuo layout cambiare come segue: 

Infine, se stai usando il Di meno Versioni origine CSS di Bootstrap, hai il controllo completo sulle dimensioni della griglia modificando le seguenti variabili: 

• @ grid-colonne: controlla il numero di griglie in orizzontale (predefinito 12) 
• @ Griglia gronda larghezza: il margine totale attorno a ciascuna griglia (predefinito 30 pixel) 
• @ Grid-flottante breakpoint: la dimensione minima sotto la quale abbiamo dispositivi "extra small" (768 pixel predefiniti) 

Quindi ora che abbiamo il nuovo sistema di rete sotto controllo, c'è qualcos'altro che devi sapere? 

Il più astuto di voi potrebbe pensare: "Ma è pazzesco, con tutte quelle serie multiple di

 
Contenuto qui
 
Contenuto qui