Imazhet
Dokumentacion dhe shembuj për zgjedhjen e imazheve në sjellje reaguese (kështu që ato të mos bëhen kurrë më të mëdha se elementët e tyre prindër) dhe të shtoni stile të lehta në to — të gjitha nëpërmjet klasave.
Imazhe të përgjegjshme
Imazhet në Bootstrap bëhen të përgjegjshme me .img-fluid
. Kjo vlen max-width: 100%;
dhe height: auto;
për imazhin në mënyrë që të shkallëzohet me elementin prind.
<img src="..." class="img-fluid" alt="...">
Miniaturat e imazhit
Përveç shërbimeve tona të rrezes kufitare , mund t'i përdorni .img-thumbnail
për t'i dhënë një imazhi një pamje të rrumbullakosur të kufirit 1 px.
<img src="..." class="img-thumbnail" alt="...">
Përafrimi i imazheve
Përafroni imazhet me klasat float ndihmëse ose klasat e shtrirjes së tekstit . block
Imazhet e nivelit mund të përqendrohen duke përdorur klasën e përdorimit të .mx-auto
marzhit .
<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>
Foto
Nëse po përdorni <picture>
elementin për të specifikuar elementë të shumtë <source>
për një specifik <img>
, sigurohuni që t'i shtoni .img-*
klasat në etiketë <img>
dhe jo në <picture>
etiketë.
<picture>
<source srcset="..." type="image/svg+xml">
<img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>
Sass
Variablat
Variablat janë të disponueshëm për miniaturat e imazheve.
$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;