Rekọja si akoonu akọkọ Rekọja si lilọ kiri awọn docs
Check
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.

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.

Placeholder Responsive image
html
<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.

A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera 200x200
html
<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 .

Placeholder 200x200 Placeholder 200x200
html
<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" alt="...">
Placeholder 200x200
html
<img src="..." class="rounded mx-auto d-block" alt="...">
Placeholder 200x200
html
<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:            var(--#{$prefix}border-color);
$thumbnail-border-radius:           $border-radius;
$thumbnail-box-shadow:              $box-shadow-sm;