Eksempler på bootstrap-rutenett

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

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
.col-md-4
.col-md-4

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-6
.col-md-4

Blandet: mobil og desktop

Bootstrap 3-nettsystemet har fire klasser: xs (telefoner), sm (nettbrett), md (stasjonære datamaskiner) og lg (større stasjonære maskiner). 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 xs og sm, trenger du bare å spesifisere 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

Blandet: mobil, nettbrett og skrivebord

.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

Kolonnerydding

Klare flyter ved spesifikke bruddpunkter for å forhindre vanskelig innpakning med ujevnt innhold.

.col-xs-6 .col-sm-3
Endre størrelsen på visningsporten eller sjekk den ut på telefonen for et eksempel.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

Offset, push og pull reset

Tilbakestill forskyvninger, push og pulls ved spesifikke bruddpunkter.

.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