Exempel på bootstrap-rutnät

Grundläggande rutnätslayouter för att göra dig bekant med att bygga inom Bootstrap-rutnätssystemet.

Tre lika stora kolumner

Få tre lika breda kolumner från stationära datorer och skala till stora stationära datorer . På mobila enheter, surfplattor och nedan kommer kolumnerna automatiskt att staplas.

.col-md-4
.col-md-4
.col-md-4

Tre ojämna kolumner

Få tre kolumner med början på stationära datorer och skala till stora skrivbord med olika bredder. Kom ihåg att rutnätskolumner bör lägga till upp till tolv för ett enda horisontellt block. Mer än så, och kolumner börjar staplas oavsett visningsport.

.col-md-3
.col-md-6
.col-md-3

Två kolumner

Få två kolumner med början på stationära datorer och skala till stora skrivbord .

.col-md-8
.col-md-4

Full bredd, enkel kolumn

Inga rutnätsklasser behövs för fullbreddselement.

Två kolumner med två kapslade kolumner

Enligt dokumentationen är kapsling enkelt – lägg bara en rad med kolumner i en befintlig kolumn. Detta ger dig två kolumner som börjar på skrivbord och skalas till stora skrivbord , med ytterligare två (lika bredder) inom den större kolumnen.

På mobila enheters storlekar, surfplattor och nedåt, staplas dessa kolumner och deras kapslade kolumner.

.col-md-8
.col-md-6
.col-md-6
.col-md-4

Blandat: mobil och stationär

Bootstrap 3-rutnätssystemet har fyra klasser: xs (telefoner), sm (surfplattor), md (datorer) och lg (större stationära datorer). Du kan använda nästan vilken kombination som helst av dessa klasser för att skapa mer dynamiska och flexibla layouter.

Varje nivå av klasser skalas upp, vilket innebär att om du planerar att ställa in samma bredder för xs och sm, behöver du bara ange xs.

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6

Blandat: mobil, surfplatta och dator

.col-xs-12 .col-sm-6 .col-lg-8
.col-sm-6 .col-lg-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4

Kolumnrensning

Klara flytningar vid specifika brytpunkter för att förhindra besvärlig omslag med ojämnt innehåll.

.col-xs-6 .col-sm-3
Ändra storlek på din visningsport eller kolla in den på din telefon för ett exempel.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

Offset, push och pull återställer

Återställ offset, push och pull vid specifika brytpunkter.

.col-sm-5 .col-md-6
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0