Grafika w Bootstrap 4

bootstrap tutorials kurs

Kategoria wpisu Bootstrap 4, Kurs Bootstrap, Kursy Tagi: , , on przez .



Reading Time: 2 minutes

Podobnie jak w Bootstrap 3 w Bootstrap 4 posiadamy już gotowe rozwiązania dla grafik umieszczonych na stronie. Nazewnictwo klas uległo jednak znaczącej zmianie.

Istotne klasy

  • .rounded – zaokrąglenie rogów obrazka
  • .rounded-circle – kształt spłaszczonego okręgu, elipsy
  • .img-thumbnail – kształt thumbnail czyli miniaturki do wpisu
  • .img-fluid – nadanie zdjęciu responsywności (obraz będzie się skalował, dostosowywał do szerokości strony i kontenera)

Jak widać w nazewnictwie pojawiło się kilka istotnych zmian w porównaniu z poprzednią wersją. Porównajmy dla przykładu jedną z klas:

.img-fluid (bootstrap 4) – .img-responsive (bootstrap 3)

Mimo zmiany nazewnictwa zasada działania klas nie uległa zmianie, podobnie jak parametry.

Przykłady:

.rounded

.rounded-circle

.img-thumbnail

.img-fluid

Przeczytaj również

Panele w Bootstrap Bootstrap jest bardzo rozbudowaną biblioteką CSS dla niektórych nawet za bardzo 🙂 jednak dla osób posiadających mniejszą wiedzę z dziedziny CSS jest ...
Rozwijana lista Bootstrap Dropdowns Bootstrap Dropdowns czyli rozwijana lista jest rodzajem menu. Nazwa wzięła się, od sposobu obsługi listy, jest to więc lista rozwijająca się po naciśn...
Efekt Parallax podczas przewijania strony Efekt parallax polega na tym, że fragment lub fragmenty strony przesuwają się z inną szybkością niż pozostałe elementy dając wrażenie trójwymiarowości...
Zmiana koloru obrazka z użyciem CSS – właści... Obecnie istnieje kilka sposobów na zmianę koloru obrazka bez użycia programów do obróbki grafiki. Jedną z takich metod jest zastosowanie filtrów grafi...

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *