De fapt, dacă utilizați recipientși rând(versiunile non-lichide există în continuare), atunci veți ajunge la tot conținutul dvs. să fiți în coloana centrală de 1024 pixeli și să puteți utiliza întreaga lățime a paginii dacă nu. 

Migrarea sistemului Grid 

Apoi, schimbarea celei mai mari clase este sistemul propriu-zis al rețelei. 

În versiunea 2, ați creat în mod tipic rețele în modul următor: 

 
Conținutul aici
 
Conținutul aici
 

Acest cod vă va oferi două containere care au umplut cu grijă cele 12 patrate grilă orizontal pe care toate planșele au avut (de obicei o bară laterală). 

În versiunea 3, grila "nivel mediu" este acum echivalentul v2 deschidereastfel încât să rescrieți codul anterior pentru V3, pur și simplu faceți următoarele: 

 
Conținutul aici
 
Conținutul aici
 

Cu toate acestea, în timp ce versiunea 2 avea doar un nivel de dimensiune a rețelei, versiunea 3 are acum patru niveluri. Fiecare nivel este adaptat pentru dispozitivul țintă principal așteptat pe care anticipați că produsul dvs. final va fi rulat. 

Aceste unități de rețea sunt denumite acum după cum urmează: 

• Dispozitive foarte mici: col-xs- *
• Dispozitivele mici: -col * SM
• Dispozitive medii: col-MD- *
• Dispozitivele mari: col-lg- *

Interogările media sunt utilizate intern pentru ca BS3 să decidă care dintre clasele de grilă menționate anterior să le folosească, iar diferitele dimensiuni sunt definite după cum urmează: 

• Extra mic: afișare mai mică de 768 de pixeli 
• Mic: o lățime de afișare mai mare sau egală cu 768 pixeli sau mai mică de 992 de pixeli 
• Mediu: o lățime de afișare mai mare sau egală cu 992 pixeli sau mai mică de 1200 de pixeli 
• Large: o lățime a afișajului mai mare sau egală cu 1200 de pixeli 

Puteți codifica mai multe versiuni ale rețelei dvs. pentru BS3 pentru a decide ce tip să utilizeze atunci când vizează mai multe afișări. De exemplu, dacă ați făcut următoarele: 

 
Conținutul aici
 
Conținutul aici
 
Conținutul aici
 
Conținutul aici
 
Conținutul aici
 
Conținutul aici
 
Conținutul aici
 
Conținutul aici
 

BS3 va ascunde și va afișa containerele după cum este necesar, în funcție de lățimea afișajului dispozitivului și de funcționarea interogărilor media. 

Ca și în versiunile anterioare ale sistemului de grilă, există 12 coloane orizontal peste toate dimensiunile diferite, astfel încât, indiferent de mărimea grilei să fie afișată, veți primi întotdeauna 12 grile pe fiecare dispozitiv. 

Însă lățimea coloanei însăși se schimbă, astfel încât este posibil să aveți nevoie să planificați conținutul în acele grile pentru a profita de dimensiunile diferite. Dimensiunile pentru fiecare dintre acestea sunt următoarele: 

• col-xs- *= Dimensiunea automată, fără dimensiuni fixe 
• -col * SM= 60 de pixeli 
• col-MD- *= 78 de pixeli 
• col-lg- *= 95 de pixeli 

Marja de jgheab în toate cazurile va rămâne la 15 pixeli pe fiecare parte a recipientului de rețea, dând un jgheab total de 30 de pixeli. Această dimensiune va fi consecventă indiferent de nivelul de dimensiune a rețelei pe care îl utilizați. 

Instalațiile și compensările funcționează așa cum au făcut-o anterior, dar ca și în cazul rețelelor în sine, printr-o ușoară redenumire a claselor folosite. 

Pentru a aplica o compensare, pur și simplu utilizați col-md-offset- *, amintindu-i să înlocuiască mdcu xs, sm, sau lgdupă caz, în funcție de dimensiunea grilei. 

Nesting se face simplu prin cuiburi de containere sub controlul col-xx- *clase în interiorul celeilalte, unde vor redimensiona și se vor comporta așa cum au procedat în versiunile anterioare BS. 

Următoarele exemple arată modul corect de realizare a ambelor tehnici: 

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

Acest exemplu vă va oferi o rețea care arată după cum urmează: 

 .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 

Acest exemplu vă va oferi un aspect după cum urmează: 

BS3 aduce, de asemenea, ceva nou la masă atunci când vine vorba de compensare și cuibărit, și asta este ceva numit comanda coloanelor. 

Dacă doriți ca coloanele dvs. să fie prezentate într-o ordine diferită de modul în care le definiți în documentul HTML, puteți utiliza noul col-xx-pull- *și col-xx-reactualizării *clase pentru a împinge sau trage machetele dvs. de rețea în ordinea în care doriți să le. De exemplu: 

8 coloane de conținut
 
4 coloane de conținut

Dacă îi faci pe cei din documentul tău, după cum era de așteptat, vei primi următoarele: 

Dacă, totuși, modificați codul de mai sus pentru a adăuga modificatori de împingere și tragere după cum urmează: 

8 coloane de conținut
 
4 coloane de conținut

Când faceți documentul, ar trebui să vedeți modificarea aspectului după cum urmează: 

În cele din urmă, dacă utilizați Mai puțin Versiunile CSS ale Bootstrap, aveți control complet asupra dimensiunilor rețelei schimbând următoarele variabile: 

• @ grid-coloane: controlează numărul de grile orizontal (implicit 12) 
• @ Grilă-jgheab-lățime: marja totală din jurul fiecărei rețele (implicit 30 de pixeli) 
• @ Grid-float-breakpoint: dimensiunea minimă sub care dispunem dispozitive "extra mici" (implicit 768 pixeli) 

Deci, acum, când avem noul sistem de rețea sub control, mai este ceva ce trebuie să știți? 

Cu cât te gândești mai mult despre tine, dar asta e nebun - cu toate acele seturi multiple

 
Conținutul aici
 
Conținutul aici