Grundlæggende gitterlayouts for at gøre dig fortrolig med at bygge i Bootstrap-gittersystemet.
I disse eksempler er .themed-grid-colklassen tilføjet til kolonnerne for at tilføje nogle temaer. Dette er ikke en klasse, der er tilgængelig i Bootstrap som standard.
Der er fem niveauer til Bootstrap-gittersystemet, en for hver række af enheder, vi understøtter. Hvert niveau starter ved en minimum viewport-størrelse og gælder automatisk for de større enheder, medmindre de tilsidesættes.
Få tre kolonner med lige bredde, startende ved desktops og skalering til store desktops . På mobile enheder, tablets og derunder vil kolonnerne automatisk stables.
Få tre kolonner, der starter ved desktops og skalerer til store desktops i forskellige bredder. Husk, at gitterkolonner skal lægge op til tolv for en enkelt vandret blok. Mere end det, og kolonner begynder at stables uanset visningsporten.
Få to kolonner, der starter ved desktops og skalerer til store desktops .
Ingen gitterklasser er nødvendige for elementer i fuld bredde.
I henhold til dokumentationen er indlejring let - bare sæt en række kolonner i en eksisterende kolonne. Dette giver dig to kolonner, der starter ved skriveborde og skalerer til store skriveborde med yderligere to (lige bredder) i den større kolonne.
På mobilenhedsstørrelser, tablets og ned, stables disse kolonner og deres indlejrede kolonner.
Bootstrap v4-gittersystemet har fem klasser: xs (ekstra lille, denne klasseinfix bruges ikke), sm (lille), md (medium), lg (stor) og xl (ekstra stor). Du kan bruge næsten enhver kombination af disse klasser til at skabe mere dynamiske og fleksible layouts.
Hvert niveau af klasser skaleres op, hvilket betyder, at hvis du planlægger at indstille de samme bredder for md, lg og xl, behøver du kun at angive md.
Yderligere klasser tilføjet i Bootstrap v4.4 tillader containere, der er 100 % brede indtil et bestemt brudpunkt.