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ż

Charakterystyka właściwości clip CSS Z pomocą własność CSS clip możemy określić, który fragment danego obiektu (np. grafiki) ma być widoczny lub też nie. W ten sposób możemy nadać obiekto...
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...
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...
Tworzenie Tooltips z wykorzystaniem Bootstrap Zapewne nie wszyscy słyszeli czym jest Tooltip chociaż prawie każdy przynajmniej kilka razy spotkał go na jakiejś stronie internetowej. Czym są Tool...