Zajęcia obrazów w Bootstrap 5 | Wyjaśnione

Wiemy, że obrazy odgrywają bardzo znaczącą rolę w uczynieniu wyglądu stron internetowych. Chociaż samo umieszczenie obrazów nie wystarczy, nadanie im odpowiedniego kształtu, pozycji i reakcji jest bardzo ważne. Bootstrap 5 zapewnia różne klasy, z którymi możesz stylizować obrazy z wielką łatwością. W tym raporcie szczegółowo omawia te klasy obrazów Bootstrap 5.

Kształtowanie obrazów w Bootstrap 5

W celu stylizacji zdjęć poprzez zapewnienie im kształtu, w Bootstrapie dostępnych jest wiele klas. Zajęcia te wraz z ich demonstracjami zostały omówione w tym rozdziale.

.bułczasty

Aby zaokrąglić rogi obrazu, użyj .bułczasty klasa. Za to musisz po prostu dołączyć tę klasę w znaczniku.

Html

Wiemy, że Bootstrap działa z elementami owijania wewnątrz kontenera, dlatego stworzyliśmy kontener DIV w powyższym kodzie i zagnieżdżyliśmy obraz w nim. Obrazowi przypisano zaokrągloną klasę wraz z pewną szerokością i wysokością.

Wyjście

Powyższe wyjście pokazuje obraz z zaokrąglonymi narożnikami.

.zaokrąglony kół

Jak sama nazwa wskazuje, klasa omawiana w tej sekcji sprawia, że ​​obraz jest okrągiem. Poniżej pokazaliśmy jego demonstrację.

Html

Aby obraz był okrągiem, przypisaliśmy klasę zaokrąglonego okręgu do obrazu.

Wyjście

Obraz został z powodzeniem wykonany w kręgu.

.IMG-BUTBINAIL

Miniatury odgrywają istotną rolę przy projektowaniu strony internetowej, która wyświetla wiele obrazów na jednej stronie internetowej. W Bootstrap 5, aby przekonwertować obrazy w miniaturę .IMG-BUTBINAIL Klasa jest używana.

Html

Aby nasz obraz pojawił się jako miniatura, przypisaliśmy ją .Klasa IMG-Brzb. Ta klasa zasadniczo tworzy miniaturę z granicą.

Wyjście

Miniatura została utworzona pomyślnie.

Wyrównanie obrazów w Bootstrap 5

Oprócz kształtowania obrazów, wyrównanie ich we właściwej pozycji jest również bardzo znaczące. W tej sekcji omówiono wiele klas, które pomagają wyrównać obrazy w Bootstrap 5.

.float-start

Ta klasa pozycjonuje obraz na początku pojemnika.

Html

Przede wszystkim stworzyliśmy pojemnik i umieściliśmy w nim obraz. Aby umieścić ten obraz na początku pojemnika, przypisujemy mu .klasa float-start oraz pewna szerokość i wysokość.

Wyjście

Obraz został umieszczony na początku pojemnika.

.float-end

Aby umieścić obraz na końcu pojemnika, ta klasa jest używana.

Html

W powyższym kodzie, aby ustawić obraz na końcu kontenera, który podaliśmy tag .klasa float-end.

Wyjście

Obraz został pomyślnie umieszczony na końcu pojemnika.

.MX-AUTO .D-block

Klasy te służą do wyśrodkowania obrazu wewnątrz pojemnika. .MX-AUTO klasa dostosowuje margines do automatycznego i .D-block Klasa wyświetla obraz jako blok. Oto jak te klasy są używane.

Html

W celu skoncentrowania obrazu .MX-AUTO i .Klasy D-Block zostały przypisane do obrazu w fragmencie kodu powyżej.

Wyjście

Obraz został wyśrodkowany.

Responsywne obrazy w Bootstrap 5

W celu reakcji obrazów, które zmieniają ich zachowanie w zależności od szerokości urządzenia, użyj poniżej wspomnianej klasy dostarczonej przez Bootstrap 5.

.IMG-Fluid

.Klasa IMG-Fluid sprawia, że ​​obraz zmienia swój rozmiar w zależności od rozmiaru ekranu. Obraz korzystający z tej klasy zmieni rozmiar w korespondencji elementu nadrzędnego, co ponadto ta klasa dostosowuje maksymalną szerokość obrazu do 100% i wysokość do automatycznego.

Html

W powyższym kodzie przypisujemy klasę IMG-Fluid do obrazu. Aby zobaczyć efekt tej skali klasy, okno przeglądarki w górę iw dół.

Wyjście

Gdy szerokość ekranu wynosi 680px i powyżej.

Na szerokości ekranu 400px i poniżej.

Obraz został pomyślnie responsywny.

Wniosek

Zajęcia obrazów w Bootstrap 5 pozwalają stylizować obrazy pojawiające się na Twojej stronie internetowej. Korzystając z tych klas, możesz nadać obrazom określony kształt, wyrównanie lub możesz je również reagować. Niektóre z klas obrazów Bootstrap 5 to .bułczasty, .IMG-Fluid, .float-start itp. Zajęcia te są szczegółowo omówione, opracowując cel, którym służą.