Ale nan kontni prensipal la Ale nan navigasyon dokiman yo

Dokimantasyon ak egzanp pou chwazi imaj nan konpòtman reponn (konsa yo pa janm vin pi laj pase paran yo) epi ajoute estil ki lejè nan yo-tout atravè klas yo.

Imaj reponn

Imaj nan Bootstrap yo reponn ak .img-fluid. Sa a aplike max-width: 100%;ak height: auto;imaj la pou li echèl ak lajè paran an.

Placeholder Responsive image
<img src="..." class="img-fluid" alt="...">

Miniatures imaj

Anplis sèvis piblik fwontyè-reyon nou yo , ou ka itilize .img-thumbnailpou bay yon imaj yon aparans fwontyè awondi 1px.

A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera 200x200
<img src="..." class="img-thumbnail" alt="...">

Aliman imaj yo

Aliman imaj yo ak klas flote asistan yo oswa klas aliyman tèks yo . block-level imaj yo ka santre lè l sèvi avèk klas sèvis .mx-autopiblik Marge .

Placeholder 200x200 Placeholder 200x200
<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" alt="...">
Placeholder 200x200
<img src="..." class="rounded mx-auto d-block" alt="...">
Placeholder 200x200
<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>

Foto

Si w ap itilize <picture>eleman nan pou presize plizyè <source>eleman pou yon espesifik <img>, asire w ke ou ajoute .img-*klas yo nan tag la <img>epi yo pa nan <picture>tag la.

<picture>
  <source srcset="..." type="image/svg+xml">
  <img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>

Sass

Varyab

Varyab yo disponib pou miniatures imaj yo.

$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;