Faktisk, hvis du bruker containerog rad(de ikke-flytende versjonene eksisterer fortsatt), så vil du ende opp med at alt innholdet ditt befinner seg i 1024 piksler, midtkolonne automatisk, og kunne bruke hele sidebredden hvis du ikke gjør det. 

Migrerer rutenettet 

Da er neste største klasseskift selve rutenettet. 

I versjon 2 opprettet du vanligvis ruter på følgende måte: 

 
Innhold her
 
Innhold her
 

Denne koden vil gi deg to beholdere som nettopp fylte 12 rutekvadratene horisontalt slik at alle layoutene hadde (vanligvis en sidelinje). 

I versjon 3 er "medium level" nettverket nå ekvivalent til v2 spanklasser, så å omskrive den forrige koden for V3 gjør du bare følgende: 

 
Innhold her
 
Innhold her
 

Imidlertid, mens versjon 2 bare hadde et nivå av gridstørrelse, har versjon 3 nå fire nivåer. Hvert nivå er skreddersydd for den forventede hovedmålingsenheten som du forventer at sluttproduktet skal kjøre på. 

Disse rutenettene heter nå som følger: 

• Ekstra små enheter: col-XS *
• Små enheter: col-SM- *
• Medium enheter: col-MD- *
• Store enheter: col-lg- *

Medieforespørsler brukes internt for BS3 for å bestemme hvilken av de nevnte gridklassene som skal brukes, og de forskjellige størrelsene er definert som følger: 

• Ekstra liten: Skjermbredde mindre enn 768 piksler 
• Liten: Skjermbredde større enn eller lik 768 piksler, eller mindre enn 992 piksler 
• Medium: Skjermbredde større enn eller lik 992 piksler, eller mindre enn 1200 piksler 
• Stor: Skjermbredde større enn eller lik 1200 piksler 

Du kan kodes opp flere versjoner av rutenettet for BS3 for å bestemme hvilken type som skal brukes når du målretter mot flere skjermer. For eksempel hvis du gjorde følgende: 

 
Innhold her
 
Innhold her
 
Innhold her
 
Innhold her
 
Innhold her
 
Innhold her
 
Innhold her
 
Innhold her
 

BS3 vil gjemme og gjemme beholderne etter behov, avhengig av bredden på skjermbildet og driften av medieforespørrelsene. 

Som med tidligere versjoner av rutenettet, er det 12 kolonner horisontalt over alle de forskjellige størrelsene, slik at hvilken gridstørrelse som vises, vil du alltid få 12 ruter på hver enhet. 

Kolonnebredden selv endres imidlertid, så du må kanskje planlegge innholdet i disse nettene for å dra nytte av de forskjellige størrelsene. Størrelsene for hver av dem er som følger: 

• col-XS *= Automatisk størrelse, ingen faste dimensjoner 
• col-SM- *= 60 piksler 
• col-MD- *= 78 piksler 
• col-lg- *= 95 piksler 

Guttermarginen vil i alle tilfeller forbli på 15 piksler på hver side av rutenettbeholderen, noe som gir en samlet renner på 30 piksler. Denne størrelsen vil være konsistent uansett hvilket gridstørrelsesnivå du bruker. 

Nesting og offsets fungerer som de gjorde tidligere, men som med nettene selv, ved en liten omdøping av de faktiske klassene som brukes. 

For å bruke en forskyvning, bruk bare col-md-offset- *, husker å erstatte mdmed xs, sm, eller lgetter behov, avhengig av rutenettstørrelsen. 

Nesting er gjort bare ved å nesting beholdere under kontroll av col-xx- *klasser i hverandre, hvor de vil endre størrelse og oppføre seg som de gjorde i tidligere BS-versjoner. 

Følgende eksempler viser den riktige måten å oppnå begge disse teknikkene på: 

 Nivå 1: .col-md-9 
 
 Nivå 2: .col-md-6 
 
 Nivå 2: .col-md-6 
 

Dette eksempelet gir deg et rutenett som ser ut som følgende: 

 .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 

Dette eksempelet gir deg et oppsett som følger: 

BS3 bringer også noe nytt til bordet når det gjelder offsetting og nesting, og det er noe som kalles kolonnebestilling. 

Hvis du vil at kolonnene dine skal presenteres i en annen rekkefølge til hvordan du definerer dem i HTML-dokumentet ditt, kan du bruke den nye col-xx-trekk- *og col-xx-push *klasser for å skyve eller trekke gridoppsettene i den rekkefølgen du vil ha dem. For eksempel: 

8 kolonner med innhold
 
4 kolonner med innhold

Hvis du gjør dem i dokumentet, får du følgende, som forventet: 

Hvis du imidlertid endrer ovennevnte kode for å legge til trykk og trekk modifikatorer som følger: 

8 kolonner med innhold
 
4 kolonner med innhold

Når du gjør dokumentet ditt, bør du se oppsettendringen din på følgende måte: 

Til slutt, hvis du bruker Mindre CSS kildeversjoner av Bootstrap, du har full kontroll over gridstørrelsene ved å endre følgende variabler: 

• @ gittersøyler: styrer antall rister horisontalt (standard 12) 
• @ Gitter-rennebredde: totalmarginen rundt hvert rutenett (standard 30 piksler) 
• @ Gitter-float-stoppunkt: Minimumstørrelsen under som vi har "ekstra små" enheter (standard 768 piksler) 

Så nå at vi har det nye rutenettet under kontroll, er det noe annet du trenger å vite? 

Jo mer sparsomme av deg kan tenke, "Men det er galt - med alle de flere settene av

 
Innhold her
 
Innhold her