Exempel på bootstrap-rutnät

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

I dessa exempel .themed-grid-colläggs klassen till i kolumnerna för att lägga till lite teman. Detta är inte en klass som är tillgänglig i Bootstrap som standard.

Fem rutnätsnivåer

Det finns fem nivåer i Bootstrap-rutnätssystemet, en för varje serie enheter vi stöder. Varje nivå börjar med en minsta visningsportstorlek och tillämpas automatiskt på de större enheterna om de inte åsidosätts.

.col-4

.col-sm-4

.col-md-4

.col-lg-4

.col-xl-4

.col-xxl-4

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

Tre lika stora kolumner alternativ

Genom att använda .row-cols-*klasserna kan du enkelt skapa ett rutnät med lika stora kolumner.

.colBarn till .row-cols-md-3

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-4

Blandat: mobil och stationär

Bootstrap v5-rutnätssystemet har sex klasser: xs (extra liten, denna klassinfix används inte), sm (small), md (medium), lg (large), xl (x-large) och xxl (xx) -stor). 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 md, lg, xl och xxl behöver du bara ange md.

.col-md-8

.col-6 .col-md-4

.col-6

Blandat: mobil, surfplatta och dator

.col-sm-6 .col-lg-8

.col-6 .col-lg-4

.col-6 .col-sm-4

Rännor

Med .gx-*klasser kan de horisontella rännorna justeras.

.colmed .gx-4hängrännor

Använd .gy-*klasserna för att styra de vertikala rännorna.

.colmed .gy-4hängrännor

Med .g-*klasser kan rännorna i båda riktningarna justeras.

.colmed .g-3hängrännor

Behållare

Ytterligare klasser som läggs till i Bootstrap v4.4 tillåter behållare som är 100 % breda fram till en viss brytpunkt. v5 lägger till en ny xxlbrytpunkt.

.behållare

.container-sm

.container-md

.container-lg

.container-xl

.container-xxl

.container-fluid