Bootstrap 5 Grid System | Forklart

Bootstraps rutenettsystem er bygget med Flexbox. Den konverterer websiden til 12 kolonner. Et rutenettsystem er en todimensjonal layout som betyr at det kan fungere med både rader og kolonner om gangen. En bruker kan slå sammen kolonner for å få de nødvendige resultatene eller en spesifikk layout.

Rutenettsystem

Bootstraps nettsystem deler siden i 12 kolonner. Som i eksemplet nedenfor .COL -klasse brukes til å lage kolonner, og alt nettsystemet er avhengig av dette .Col -klasse. Dette rutenettsystemet er den beste tilnærmingen for å stable innholdet horisontalt og la sideutnyttelsen maksimalt.

Kode

.col
.col
.col
.col
.col
.col
.col
.col
.col
.col
.col
.col

For å lage forskjellige oppsett vi bruker .rad og .col klasse.

Col -klasse uten noen størrelse

Hvis du ikke spesifiserer størrelsen på kolonnene, .col klasse deler automatisk raden likt i henhold til antall divs med .col klasser i det.

Kode

.col
.col
.col

I dette eksemplet legger jeg bare til tre div med .col klasse uten å spesifisere antall kolonner, men .col Klasse gir automatisk sammenslåing av 4 kolonner til hver div og dekker 12 kolonner kollektivt.

Col -klasse med størrelse

Hvis kolonnestørrelsene er spesifisert, så .Col-klasse deler raden i henhold til den spesifiserte størrelsen fra 0-12.

Kode

.col-4
.col-6
.col-2

I dette eksemplet legger jeg til tre div med .col klasse og spesifiser antall kolonner som 4, 6 og 2. Nå dekker disse tre kolonnene fortsatt 12 kolonner plass, men nå med forskjellige størrelser. Dette hjelper en bruker til å administrere innholdet på en side og bruke det til maksimum.

Eksempel 2

Dette eksemplet er for problemet der størrelsen på divene overstiger 12.

Kode

.col-4
.col-6
.col-5

I dette eksemplet dekker de første 2 divene allerede 10 kolonner på rad og etterlater plassen til to kolonner til, men den tredje div kommer med kolonnens størrelse 5 som resulterer i å flytte den tredje div til neste rad for å dekke 5 kolonneplass som forlater 2 kolonner plass i den første raden tom. Så for å unngå denne typen problemer, må du alltid sørge for å dele kolonner på en måte som dekker 12 kolonner plass kollektivt på rad.

Col -klasse med breakpoints

.col Klasse brukes også med forskjellige bruddpunkter for å kontrollere innholdsvisningen på forskjellige skjermer.

• .col-xxl
• .col-xl
• .col-lg
• .col-md
• .Col-SM

Kode

.col-md
.col-md
.col-md

I eksemplet ovenfor er det opprettet tre divs ved hjelp av .col-md Klassen er å handle akkurat som .col klasse men forskjellen mellom enkel .col klasse og .col-md Klasse er det .col Klassen distribuerer kolonner likt til hver div, og handle deretter samme på hver skjermstørrelse, men .col-md Klasse distribuerer også kolonner likt mellom hver div, men den forblir bare på XXL, XL, LG og MD Skjermstørrelser, men så snart den går under middels skjermstørrelse, dekker alle divs hele 12 kolonner hver som resulterer i å lage tre rader og stable dem vertikalt.

Col -klasse med breakpoints og størrelser

.col Klasse brukes også med forskjellige bruddpunkter for å kontrollere innholdsvisningen på forskjellige skjermer, men for å se disse klassene i aksjon må også spesifisere størrelsene deres.

• .col-*
• .col-xxl-*
• .col-xl-*
• .col-lg-*
• .col-md-*
• .Col-SM-*

Bytt ut * med nummeret fra 0-12.

Kode

.Col-MD-4
.Col-MD-6
.Col-MD-2

I eksemplet ovenfor søker jeg .col-md-* Klasse på tre div med størrelsen 4,6,2, da den viste at denne klassen er anvendelig på Double Extra Large (XXL), Extra Large (XL), Large (LG) og Medium (MD) -skjerm så snart skjermstørrelse går under medium (MD) skjerm alle divs endrer størrelse på dem og dekker 12 kolonner hver som resulterer i 3 rader og hver rad er stablet vertikalt. Slik opprettes dynamiske og fleksible oppsett.

Konklusjon

For å jobbe i et bootstrap -rutenett, bruk .rad klasse og pakk den rundt .col klasse Hvis du vil tilordne like kolonner til hver div, men hvis du vil tilordne forskjellige antall kolonner til hver div, så bruk så .col- størrelse (0-12) til divs som ditt krav. Imidlertid, hvis du vil gjøre mer fleksibel og dynamisk utforming .col klasse med Breakpoints (XXL/XL/LG/MD/SM), pluss spesifiser størrelsene deres (0-12) også .col- breakpoint-størrelse.