in English

Awọn aworan

Iwe ati awọn apẹẹrẹ fun jijade awọn aworan sinu ihuwasi idahun (nitorinaa wọn ko di gbooro ju obi wọn lọ) ati ṣafikun awọn aza iwuwo fẹẹrẹ si wọn — gbogbo nipasẹ awọn kilasi.

Lori iwe yi

Awọn aworan idahun

Awọn aworan ni Bootstrap jẹ idahun pẹlu .img-fluid. Eyi kan max-width: 100%;ati height: auto;aworan naa ki o le ṣe iwọn pẹlu iwọn obi.

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

Awọn eekanna atanpako aworan

Ni afikun si awọn ohun elo redio aala wa , o le lo .img-thumbnaillati fun aworan ni irisi aala 1px yika.

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

aligning images

Ṣe afiwe awọn aworan pẹlu awọn kilasi leefofo oluranlọwọ tabi awọn kilasi titete ọrọ . blockAwọn aworan ipele le jẹ dojukọ nipa lilo kilasi .mx-autoIwUlO ala .

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

Aworan

If you are using the <picture>element to specify multiple element <source>for a specific <img>, rii daju pe o fi awọn .img-*kilasi kun si <img>kii ṣe si <picture>tag.

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

Sass

Awọn oniyipada

Awọn oniyipada wa fun awọn eekanna atanpako aworan.

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