Eksempler på bootstrap-rutenett

Grunnleggende rutenettoppsett for å gjøre deg kjent med bygging innenfor Bootstrap-rutenettsystemet.

I disse eksemplene er .themed-grid-colklassen lagt til kolonnene for å legge til litt tema. Dette er ikke en klasse som er tilgjengelig i Bootstrap som standard.

Fem rutenettlag

Det er fem nivåer i Bootstrap-rutenettsystemet, ett for hver rekke enheter vi støtter. Hvert nivå starter med en minimum visningsportstørrelse og gjelder automatisk for de større enhetene med mindre overstyrt.

.col-4

.col-sm-4

.col-md-4

.col-lg-4

.col-xl-4

.col-xxl-4

Tre like kolonner

Få tre like brede kolonner som starter på stasjonære datamaskiner og skaleres til store stasjonære maskiner . På mobile enheter, nettbrett og under vil kolonnene automatisk stables.

.col-md-4

Tre like kolonner alternativ

Ved å bruke .row-cols-*klassene kan du enkelt lage et rutenett med like kolonner.

.colbarn av .row-cols-md-3

Tre ulike kolonner

Få tre kolonner som starter på stasjonære datamaskiner og skalerer til store stasjonære datamaskiner med forskjellige bredder. Husk at rutenettkolonner skal legge til tolv for en enkelt horisontal blokk. Mer enn det, og kolonner begynner å stables uansett visningsport.

.col-md-3

.col-md-6

.col-md-3

To kolonner

Få to kolonner fra stasjonære datamaskiner og skalering til store stasjonære maskiner .

.col-md-8

.col-md-4

Full bredde, enkel kolonne

Ingen rutenettklasser er nødvendig for elementer i full bredde.

To kolonner med to nestede kolonner

I henhold til dokumentasjonen er nesting enkelt – bare plasser en rad med kolonner i en eksisterende kolonne. Dette gir deg to kolonner som starter på skrivebord og skaleres til store skrivebord , med ytterligere to (like bredder) innenfor den større kolonnen.

På mobilenhetsstørrelser, nettbrett og nedover, vil disse kolonnene og deres nestede kolonner stables.

.col-md-8

.col-md-6

.col-md-4

Blandet: mobil og desktop

Bootstrap v5-nettsystemet har seks klasser: xs (ekstra liten, denne klasseinfikset brukes ikke), sm (liten), md (middels), lg (stor), xl (x-stor) og xxl (xx -stor). Du kan bruke nesten hvilken som helst kombinasjon av disse klassene for å lage mer dynamiske og fleksible oppsett.

Hvert nivå av klasser skaleres opp, noe som betyr at hvis du planlegger å sette de samme breddene for md, lg, xl og xxl, trenger du bare å spesifisere md.

.col-md-8

.col-6 .col-md-4

.col-6

Blandet: mobil, nettbrett og skrivebord

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

.col-6 .col-lg-4

.col-6 .col-sm-4

Takrenner

Med .gx-*klasser kan de horisontale takrennene justeres.

.colmed .gx-4takrenner

Bruk .gy-*klassene til å kontrollere de vertikale takrennene.

.colmed .gy-4takrenner

Med .g-*klasser kan takrennene i begge retninger justeres.

.colmed .g-3takrenner

Containere

Ytterligere klasser lagt til i Bootstrap v4.4 tillater beholdere som er 100 % brede til et bestemt bruddpunkt. v5 legger til et nytt xxlbruddpunkt.

.container

.container-sm

.container-md

.container-lg

.container-xl

.container-xxl

.container-væske