Bililingi

Bililingi oyo ezali kopesa eyano

Ba images na Bootstrap esalemi responsive na .img-fluid. Yango etali max-width: 100%;mpe height: auto;na elilingi mpo ete esala échelle na bonene ya moboti.

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

Bilili ya mike

En plus ya ba utilitaires na biso ya border-radius , okoki kosalela .img-thumbnailpona kopesa image apparence ya border ya 1px arrondi.

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

Kobongisa bililingi

Bongisa bilili na bakelasi ya flotteur ya mosungi to bakelasi ya boyokani ya makomi . block-niveau bilili ekoki kozala na katikati na kosalelaka kelasi ya utilitaire ya .mx-automarge .

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

Foto

Soki ozali kosalela <picture>eleman mpo na kolakisa <source>biloko mingi mpo na moko ya sikisiki <img>, sala makasi obakisa .img-*bakelasi na <img>mpe te na <picture>elembo.

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

Sass oyo azali

Ba variables oyo ezali

Ba variables ezali mpo na ba miniatures ya bilili.

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