Bililingi

Mikanda mpe bandakisa mpo na kopona bilili na bizaleli ya koyanola (yango wana ekomaka ata moke te monene koleka moboti na bango) mpe kobakisa mitindo ya pete na yango —nyonso na nzela ya bakelasi.

Na lokasa oyo

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:            $gray-300;
$thumbnail-border-radius:           $border-radius;
$thumbnail-box-shadow:              $box-shadow-sm;