Слике
Документација и примери за избор слика у реактивном понашању (тако да никада не постану шире од свог родитеља) и додају им лагане стилове—све преко класа.
Респонсиве имагес
Слике у Боотстрапу су прилагођене са .img-fluid
. Ово се односи max-width: 100%;
и height: auto;
на слику тако да се прилагођава ширини родитеља.
<img src="..." class="img-fluid" alt="...">
Сличице слика
Поред наших услужних програма радијуса границе , можете да користите .img-thumbnail
да бисте слици дали заобљен изглед ивице од 1пк.
<img src="..." class="img-thumbnail" alt="...">
Поравнавање слика
Поравнајте слике са помоћним плутајућим класама или класама за поравнање текста . block
слике на нивоу могу да се центрирају коришћењем класе .mx-auto
корисности маргине .
<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" alt="...">
<img src="..." class="rounded mx-auto d-block" alt="...">
<div class="text-center">
<img src="..." class="rounded" alt="...">
</div>
Слика
Ако користите <picture>
елемент да наведете више <source>
елемената за одређени <img>
, обавезно додајте .img-*
класе у ознаку, <img>
а не у <picture>
ознаку.
<picture>
<source srcset="..." type="image/svg+xml">
<img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>
Сасс
Променљиве
Променљиве су доступне за сличице слика.
$thumbnail-padding: .25rem;
$thumbnail-bg: $body-bg;
$thumbnail-border-width: $border-width;
$thumbnail-border-color: $gray-300;
$thumbnail-border-radius: $border-radius;
$thumbnail-box-shadow: $box-shadow-sm;