Bootstrap 5 kolonner og rutenettsystem | Forklart

Bootstrap 5 er den nyeste versjonen av Bootstrap -rammeverket som lar brukerne lage fantastiske nettsteder med raske CSS -stilark og forbedret responsivitet. Bootstrap fungerer ved å bygge et rutenettsystem som deler en webside i forskjellige rader og kolonner som er pakket inn i en beholder. Dette innlegget diskuterer nettsystemet i Bootstrap 5 i detalj sammen med de forskjellige komponentene.

Rutenettsystem i bootstrap 5

Et rutenettsystem i Bootstrap 5 deler en side i rader og kolonner, med hver rad med 12 kolonner. Du kan enten bruke alle de 12 kolonnene hvis du ønsker det, men hvis ikke kan du kombinere kolonner for å lage bredere kolonner. Du må bruke kolonner på en måte som summen legger opp til 12 eller mindre enn 12. For eksempel kan du bruke alle 12 kolonnene med en bredde på 1 eller 2 kolonner med en bredde på 6. Uansett hva kombinasjonen er, skal totalen være 12 eller mindre.

Dette rutenettsystemet består av Flexbox og gjør elementene til stede i nettet responsive, noe som betyr at oppsettet vil endre strukturen avhengig av enheten den vises på. Her er en visuell fremstilling av et rutenettsystem.

Rutenettklasser i bootstrap 5

For å bruke nettsystemet er det flere klasser tilgjengelig som vi har diskutert nedenfor. Alle disse klassene kan grupperes sammen for å lage mer fleksible og responsive strukturer.

1. -XS- Klasse

Denne klassen brukes til å lage et rutenettsystem for ekstra små enheter med en skjermbredde <576px.

2. -SM- klasse

Denne klassen brukes til å lage et rutenettoppsett for små enheter med en skjermbredde> = 576px.

3. -MD- Klasse

Denne klassen brukes til å lage et rutenettsystem for middels enheter med en skjermbredde> = 768px.

4. -LG- Klasse

Denne klassen brukes til å lage et rutenettsystem for store enheter med en skjermbredde> = 992px.

5. -XL- Klasse

Denne klassen brukes til å lage et rutenettsystem for ekstra store enheter med en skjermbredde> = 1200px.

6. -xxl- klasse

Denne klassen brukes til å lage et rutenettsystem for ekstra store enheter med en skjermbredde> = 1400px.

Merk: Ovennevnte klasser har muligheten til å øke i bredden, hvis du for eksempel må bruke den samme bredden til middels og store klasser, må du bare spesifisere bredden for middels klasse.

Komponenter i et rutenettsystem

Et rutenettsystem fungerer med tre komponenter som er diskutert i denne delen.

1. Containere

En beholder er et grunnleggende element i et rutenettsystem uten at systemet ikke fungerer. Disse pakker inn alt innholdet på et nettsted inni dem. Containere pakker innhold på en slik måte at disse holder radelementer og radelementer holder kolonneelementer.

2. Rader

Rader i et rutenettsystem blir referert til som den horisontale kolonnegruppen. Disse radene kan genereres ved hjelp av .rad klasse og er pakket inn i en beholder enten ved hjelp av .container, eller .Container-fluid klasse.

3. Kolonner

Et rutenettsystem består av 12 kolonner som er pakket inn i rader. For å lage disse kolonnene .col Klasse brukes sammen med kombinasjonen av noen av klassene som er nevnt i forrige seksjon. For eksempel, hvis du oppretter en layout for ekstra små enheter, så bruk .col-xs klasse.

Bygge et grunnleggende rutenettsystem i bootstrap 5

Her skal vi demonstrere hvordan du kan lage et grunnleggende nettsystem i to forskjellige scenarier.

Scenario 1

Når du vil kontrollere bredden på kolonnene og spesifisere oppsettet for forskjellige typer enheter som vil vise den.

På denne måten kan du bygge en grunnleggende struktur i et rutenettsystem når du vil spesifisere kolonnebredder selv for forskjellige enhetstyper. De .rad Klasse brukes til å generere rader, for eksempel skaper ovennevnte to rader. Den første raden grupperer tre kolonner, mens den andre raden har to kolonner.

Når generering av kolonner bruker .col klasse sammen med å spesifisere enhetstypen og et tall som skal legge opp til totalt 12 for hver rad.

Scenario 2

Når du vil at Bootstrap skal håndtere bredden på kolonnene automatisk.

Når du ikke spesifiserer størrelsen på enheten og verken noe tall som legger opp til totalt 12, vil Bootstrap 5 håndtere bredder automatisk, og oppsettet vil endre atferden i henhold til enhetstypen.

Noen eksempler

Nå skal vi utforske noen eksempler for å bedre forstå et rutenettsystem og kolonner i Bootstrap 5.

Eksempel 1

Her vil vi generere fire kolonner med lik bredde.

Html

I koden ovenfor for å lage fire kolonner med lik bredde bruker vi .Container-fluid Klasse for å få en full breddebeholder som spenner over hele visningsbredden. Så genererer vi en rad og pakker opp fire kolonner med lik bredde inne i den raden. Hver kolonne har fått en viss polstring ved hjelp av .P-4 Polstring og verktøyklasse, dessuten har hver kolonne fått noen bakgrunnsfarge og tekstfarge.

Produksjon

Kolonner med like bredder ble opprettet med hell.

Eksempel 2

I eksemplet ovenfor så vi hvordan vi kan lage fire kolonner med lik bredde. La oss nå gjøre disse kolonnene lydhøre.

Html

Vi gjør kolonnene lydhøre ved å bruke .Col-MD-3 Klasse som spesifiserer at kolonnene vil stable seg på hverandre når skjermbredden er mindre enn 768px.

Produksjon

Når skjermbredden er lik og større enn 768px.

Når skjermbredden er mindre enn 768px.

Responsive kolonner er generert.

Eksempel 3

De responsive kolonnene ovenfor var like i bredden. La oss nå generere responsive søyler med ulik bredde.

Html

De .Col-MD-4, og .Col-MD-8 Klasser lager to responsive kolonner med ulik bredde for middels enheter.

Produksjon

Når skjermbredden er> = 768px.

Når skjermbredden er <768px.

To responsive kolonner med ulik bredde ble generert.

Konklusjon

Et rutenettsystem i Bootstrap 5 fungerer med tre komponenter som er en beholder, rader og kolonner. Den deler i utgangspunktet en side i rader og kolonner, med hver rad med 12 kolonner. Kolonnene i et rutenettsystem brukes på en måte som summen legger opp til 12 eller mindre enn 12. Dessuten bruker den noen klasser for å bygge responsive oppsett for forskjellige enhetstyper. Dette innlegget diskuterer nettsystemet og kolonnene i detalj ved hjelp av passende eksempler.