Grafika w Bootstrap 4

Czas czytania: 2 minut

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 {
    border-radius: .25rem!important;
}

.rounded-circle

.rounded-circle {
    border-radius: 50%!important;
}

.img-thumbnail

.img-thumbnail {
    padding: .25rem;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: .25rem;
    max-width: 100%;
    height: auto;
}

.img-fluid

.img-fluid {
    max-width: 100%;
    height: auto;
}