Salá koleka na makambo ya ntina Salta na navigation ya docs
Check
in English

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.

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.

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

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="...">

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 .

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>

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;