Grunnleggende rutenettoppsett for å gjøre deg kjent med bygging innenfor Bootstrap-rutenettsystemet.
I disse eksemplene er .themed-grid-col
klassen lagt til kolonnene for å legge til litt tema. Dette er ikke en klasse som er tilgjengelig i Bootstrap som standard.
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.
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.
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.
Få to kolonner fra stasjonære datamaskiner og skalering til store stasjonære maskiner .
Ingen rutenettklasser er nødvendig for elementer i full bredde.
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.
Bootstrap v4-nettsystemet har fem klasser: xs (ekstra liten), sm (liten), md (middels), lg (stor) og xl (ekstra 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 xs og sm, trenger du bare å spesifisere xs.