Grafika w Bootstrap 4

bootstrap tutorials kurs

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



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ż

Grupy przycisków Bootstrap – Button groups Do tej pory zdążyłam już we wcześniejszym wpisie omówić przyciski Bootstrap. Teraz pokażę jak połączyć je w grupy. Najprostszym przykładem takiej g...
Paginacja stron w Bootstrap Paginacja ułatwia ułatwia poruszanie się po stronach danej witryny jeżeli posiada się więcej niż jedną podstronę. Przykładowa paginacja wygląda tak...
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 ...
Zmiana koloru obrazka z użyciem CSS – właści... Istnieje kilka sposobów na zmianę koloru obrazka. To jakiej użyjemy zależy w dużym stopniu od tego jaki efekt chcemy uzyskać. Zdjęcie za pomocą CSS...