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ż

Rusztowanie Szablonu czyli Bootstrap Grid System Grid (czyli siatka) pełni w Bootstrapie wiele funkcji. Jedną z najważniejszych jest utrzymywanie porządku na stronie. Brzmi to może trochę enigmat...
Tabele w Bootstrap Mimo iż za często się ich nie stosuje (a przynajmniej nie powinno się) w bootstrapie zdefiniowane zostały tabele. Działają one tak jak normalne tab...
Flexbox – metody rozmieszczania elementów na... Istnieje kilka różnych metod rozmieszczania elementów na stronie internetowej, jedną z nich jest właśnie flexbox. Metoda ta jest swoistym "lekarstwem"...
Przyciski w Bootstrap (Buttons) Jak zdążyliście zapewne zauważyć bootstrap posiada wiele ciekawych funkcji i rozwiązań. Kolejnym z nich, które chce omówić są przyciski / guziki. W...