Jak zrobić obraz zaokrąglony w Bootstrap 5?

Bootstrap 5, najnowsza wersja, zapewnia wiele zaawansowanych funkcji projektowania responsywnych stron internetowych. Obrazy są popularnymi komponentami, które dodają atrakcyjności wizualnej do aplikacji. W Bootstrap 5 można użyć kilku klas do podania różnych kształtów obrazów. Mówiąc dokładniej, możesz zaokrąglić pożądaną krawędź obrazu za pomocą określonych klas bootstrap, takich jak „bułczasty”,„Zaokrąglony koniec", i wiele więcej.

W tym zapisie opisano, jak zrobić zaokrąglony obraz w Bootstrap 5.

Jak utworzyć obraz zaokrąglony w Bootstrap 5?

Bootstrap 5 oferuje wiele klas, które pomagają w tworzeniu krawędzi elementu. Są one wymienione poniżej:

• • "bułczasty”: Ta klasa sprawia, że ​​cały obraz jest wokół.
  • "zaokrąglona paczka”: Ta klasa nadaje elementowi okrągły kształt pigułki.
  • "zaokrąglony kół”: Ten obraz jest zaokrąglony w koło.
  • "zaokrąglony”: Ta klasa okrąża obraz z góry.
  • "Zaokrąglony start”: Ta klasa okrąża obraz od samego początku.
  • "Zaokrąglony koniec”: Ta klasa okrąża obraz od końca.
  • "Zaokrąglona dana”: Ta klasa okrąża obraz od dołu.

Teraz praktycznie omówmy efekt zaciągniętego bootstrap.

Przykład 1: Jak utworzyć okrągły obraz w Bootstrap 5?

„„zaokrąglony kół„Klasa jest wykorzystywana do utworzenia obrazu w kształcie koła. Aby to zrobić, dodaj „”Oznacz i przypisz to klasę„zaokrąglony kół”W pliku HTML:

Wyjście

Przykład 2: Jak zrobić okrągłą pigułkę w Bootstrap 5?

„„zaokrąglona paczka”Klasa jest określona z obrazem, aby nadać mu okrągły kształt pigułki.

W tym celu wdrożyć klasę „zaokrąglona paczka„Jak wspomniano w poniższym kodzie:

Wyjście

W ten sposób możesz zrobić obrazy w Bootstrap 5.

Wniosek

Aby zrobić zdjęcia w Bootstrap 5, można wykorzystać kilka klas. Zajęcia te obejmują „Zaokrąglony koniec”,„Zaokrąglony start”,„zaokrąglony”,„Zaokrąglona dana", i wiele więcej. W szczególności, aby cały obraz był okrągły kształt, „zaokrąglony kół„Klasa jest używana. Aby był to zaokrąglony kształt pigułki, „zaokrąglona paczka„Klasa jest wykorzystywana. Ten zapis wyjaśnił, jak zrobić obraz zaokrąglony w Bootstrap 5.