Bootstrap 5 er den nyeste versjonen av Bootstrap-rammeverket som lar brukerne lage responsive nettsteder med en mobil-første tilnærming. Bootstrap 5 har mange kjennetegn som den har raske stilark og forbedret responsivitet. En grunnleggende nødvendighet av dette rammeverket er en beholder for å pakke inn elementene som vises på et nettsted. En beholder er den mest grunnleggende utformingen av Bootstrap 5 som vi vil diskutere dyptgående i denne artikkelen.

La oss begynne.

Hva er containere

Som allerede nevnt anses containere som den mest grunnleggende utformingen av Bootstrap 5. Disse enhetene pakker inn elementer inni dem sammen med visse polstring og margin. Dessuten er disse viktige for å bygge et nettoppsett.

Det er totalt tre containertyper i Bootstrap 5 som vi har vervet nedenfor.

1. Containere med fast bredde
2. Containere med full bredde
3. Containere med responsive bruddpunkter

La oss diskutere dem i detalj.

Containere med fast bredde

Du kan opprette en responsiv beholder med fast bredde ved hjelp av .Containerklasse. Denne bredden vil endres avhengig av type enhet og skjermstørrelse. La oss nå utforske denne typen beholder med et eksempel.

Eksempel

Her pakker vi inn noe innhold ved hjelp av beholderen med fast bredde.

Html

Her er vi først og fremst inkludert Bootstrap 5 ved å legge til CDN for CSS, og JavaScript i taggen til HTML -filen vår.

Html

Hei Verden

Bootstrap 5 er fantastisk.

Vi lærer containere i bootstrap 5.

Dette er en demonstrasjon av den fast bredde beholderen som bruker .Containerklasse.

Nå lager vi en div container og tildelte den klassebeholderen. Så har vi nestet en

, og tre

elementer i den div beholderen.

Produksjon

Vi skal vise utdataene i tilfeldige skjermstørrelser. For eksempel vises utgangen ved 699px og over.

Ved 351px og mindre.

De .container Klassen ble implementert vellykket.

Containere med full bredde

For å lage containere med full bredde, bruk .Container-fluid klasse. Bredden på beholderen vil være 100% uansett hva skjermstørrelsen er. Eksemplet presentert nedenfor viser en beholder i full bredde.

Html

Hei Verden

Bootstrap 5 er fantastisk.

Vi lærer containere i bootstrap 5.

Dette er en demonstrasjon av den fast bredde beholderen som bruker .Containerklasse.

Her bruker vi .Container-fluid-klasse for å lage et divelement og hekke en overskrift, og noen avsnitt i den diven.

Produksjon

Vi vil vise utgangen i tilfeldige skjermstørrelser. Den første utgangen er for skjermbredde 700px og over.

Ved 355px og under.

De .Container-fluid Klassen fungerer som den skal.

Containere med responsive bruddpunkter

Du kan også opprette containere som vil beholde 100% bredde til et bruddpunkt er spesifisert. Dette betyr at bredden vil begynne å endre seg etter det aktuelle bruddpunktet. For en bedre forståelse har vi demonstrert et eksempel her.

Eksempel

Her har vi demonstrert alle brytepunktene nevnt ovenfor.

Du kan også opprette containere som vil beholde 100% bredde til et bruddpunkt er spesifisert. Dette betyr at bredden vil begynne å endre seg etter det aktuelle bruddpunktet. For en bedre forståelse har vi demonstrert et eksempel her.
Eksempel
Her har vi demonstrert alle brytepunktene nevnt ovenfor.
[cce_html bredde = "100%" høyde = "100%" rømte = "true" tema = "blackboard" nowrap = "0"]
Liten
Medium
Stor
Ekstra stor
Ekstra ekstra stort

I koden ovenfor har vi opprettet fem DIV -containere, og hver har fått tildelt en bestemt klasse som tilsvarer et spesifikt bruddpunkt.

Produksjon

Breakpoints ble implementert vellykket.

Merk: Besøk det offisielle nettstedet til Bootstrap 5 for å sjekke bredden til forskjellige containere i Bootstrap 5 på tvers av visse breakpoints.

Konklusjon

Containere anses å være den mest grunnleggende utformingen av Bootstrap 5 som brukes til å pakke inn elementer inni dem sammen med visse polstring og margin. Dessuten er disse viktige for å bygge et nettoppsett. Det er totalt tre containertyper som er; Containere med fast bredde, containere med full bredde og beholder med responsive bruddpunkter. Det er visse innebygde klasser som er assosiert med disse containerne. Alle disse beholdertypene er forklart i artikkelen sammen med passende eksempler.