Stampi

Dokumentazzjoni u eżempji biex jintgħażlu immaġini f'imġieba reattiva (għalhekk qatt ma jsiru usa 'mill-ġenitur tagħhom) u żid stili ħfief magħhom—kollha permezz ta' klassijiet.

Fuq din il-paġna

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-wisa 'ġenitur.

<img src="..." class="img-fluid" alt="...">

Miniaturi ta' l-immaġini

Minbarra l -utilitajiet tar-raġġ tal-fruntiera tagħna , tista 'tuża .img-thumbnailbiex 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 . blockimmaġini tal-livell jistgħu jiġu ċċentrata bl - użu tal- .mx-autoklassi 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;