Bildeklasser i Bootstrap 5 | Forklart

Vi vet at bilder spiller en veldig viktig rolle i å gjøre nettstedets utseende tiltalende. Selv om det ikke er nok å plassere bilder, er det veldig avgjørende. Bootstrap 5 tilbyr forskjellige klasser som du kan style bilder med stor letthet. Denne rapporten diskuterer disse bootstrap 5 -bildeklassene i detalj.

Forme bilder i bootstrap 5

For å style bildene dine ved å gi dem litt form, er det flere klasser tilgjengelig i Bootstrap 5. Disse klassene sammen med demonstrasjonene deres har blitt diskutert i denne delen.

.avrundet

For å runde hjørnene på bildet, bruk .avrundet klasse. For å gjøre det må du ganske enkelt inkludere denne klassen i taggen.

Html

Vi vet at Bootstrap fungerer med innpakning av elementer i en beholder, derfor har vi laget en DIV -beholder i ovennevnte kode og nestet et bilde inni den. Bildet er tildelt den avrundede klassen sammen med litt bredde og høyde.

Produksjon

Utgangen over viser et bilde med avrundede hjørner.

.avrundet sirkel

Som navnet antyder, gjør klassen som diskuteres i denne delen et bilde til en sirkel. Nedenfor har vi vist demonstrasjonen.

Html

For å gjøre bildet til en sirkel har vi tildelt den avrundede sirkelklassen til bildet.

Produksjon

Bildet ble gjort til en sirkel med suksess.

.IMG-Tobnail

Miniatyrbilder spiller en viktig rolle når du designer et nettsted som viser flere bilder på en enkelt webside. I Bootstrap 5, for å konvertere bilder til et miniatyrbilde .IMG-Tobnail Klasse brukes.

Html

For å få bildet vårt til å vises som miniatyrbilde har vi tildelt det .IMG-Thumnail-klasse. Denne klassen lager i utgangspunktet et miniatyrbilde med en grense.

Produksjon

Det ble opprettet et miniatyrbilde.

Justere bilder i Bootstrap 5

Bortsett fra å forme bilder, er det også veldig viktig å justere dem i riktig posisjon. Denne delen diskuterer flere klasser som hjelper deg med å justere bilder i Bootstrap 5.

.Float-start

Denne klassen plasserer et bilde i starten av beholderen.

Html

Her har vi først laget en beholder og plassert et bilde inni den. For å plassere det bildet ved starten av beholderen, tildeler vi det .FLOAT-START-klasse og litt bredde og høyde.

Produksjon

Bildet har blitt plassert i starten av beholderen.

.Float-end

For å plassere et bilde på slutten av beholderen, brukes denne klassen.

Html

For å plassere bildet ovenfor, for å plassere bildet på slutten av beholderen, har vi gitt taggen .Float-end Class.

Produksjon

Bildet ble plassert med suksess på slutten av beholderen.

.MX-Auto .d-block

Disse klassene brukes til å sentrere et bilde inne i en beholder. De .MX-Auto Klassen justerer marginen til auto og .d-block Klassen viser et bilde som en blokk. Slik brukes disse klassene.

Html

Med det formål å sentrere et bilde .MX-Auto og .D-Block-klasser ble tildelt bildet i kodebiten ovenfor.

Produksjon

Bildet er sentrert.

Responsive bilder i bootstrap 5

For å gjøre bilder responsive som endrer deres oppførsel avhengig av enhetens bredde, bruk den under-nevnte klassen levert av Bootstrap 5.

.IMG-fluid

De .IMG-fluidklasse får et bilde til å endre størrelsen i henhold til skjermstørrelsen. Bilde som bruker denne klassen vil endre størrelsen i korrespondanse til overordnet element, dessuten justerer denne klassen maks bredde på bildet til 100% og høyde til auto.

Html

I koden ovenfor tildeler vi klassen IMG-fluid til bildet. For å se effekten av denne klasseskalaen.

Produksjon

Når skjermbredden er 680px og over.

Ved skjermbredde 400px og under.

Bildet ble vellykket responsivt.

Konklusjon

Bildeklasser i Bootstrap 5 lar deg style bildene som vises på nettstedet ditt. Ved hjelp av disse klassene kan du gi bilder en viss form, justering, eller du kan også gjøre dem responsive. Noen av bootstrap 5 -bildeklassene er .avrundet, .IMG-fluid, .Float-start osv. Disse klassene blir diskutert i detalj, og utdyper formålet de tjener.