Stampi
Dokumentazzjoni u eżempji għall-għażla ta 'immaġini f'imġieba reattiva (għalhekk qatt ma jsiru akbar mill-elementi ġenituri tagħhom) u żid stili ħfief magħhom—kollha permezz ta' klassijiet.
Immaġini li jirrispondu
L-immaġini f'Bootstrap isiru responsivi b' .img-fluid
. Dan japplika max-width: 100%;
u height: auto;
għall-immaġni sabiex tiskala mal-element ġenitur.
<img src="..." class="img-fluid" alt="...">
Miniaturi tal-immaġni
Minbarra l -utilitajiet tar-raġġ tal-fruntiera tagħna , tista 'tuża .img-thumbnail
biex tagħti immaġni dehra ta' fruntiera tond ta' 1px.
<img src="..." class="img-thumbnail" alt="...">
Allinjament immaġini
Allinja immaġini mal- klassijiet float helper jew klassijiet ta ' allinjament test . block
immaġini tal-livell jistgħu jiġu ċċentrata bl - użu tal- .mx-auto
klassi ta 'utilità tal-marġni .
<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>
Stampa
Jekk qed tuża l- <picture>
element biex tispeċifika <source>
elementi multipli għal <img>
, kun żgur li żżid il- .img-*
klassijiet mat -tikketta <img>
u mhux mat- <picture>
tikketta.
<picture>
<source srcset="..." type="image/svg+xml">
<img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>
Sass
Varjabbli
Varjabbli huma disponibbli għal thumbnails tal-immaġni.
$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;