Trɔ yi nya veviwo gbɔ Trɔ yi docs navigation gbɔ
in English

Nɔnɔmetatawo

Nuŋlɔɖiwo kple kpɔɖeŋuwo hena nɔnɔmetatawo tiatia ɖe nuwɔna si ɖoa nya ŋu me (ale be woagakeke wu wo dzila gbeɖe o) eye woatsɔ atsyã siwo mesẽ o akpe ɖe wo ŋu—wo katã to klasswo dzi.

Nɔnɔmetata siwo ɖoa nya ŋu

Wowɔa nɔnɔmetata siwo le Bootstrap me be woawɔ dɔ kple .img-fluid. Esia ku ɖe nɔnɔmetata la ŋu max-width: 100%;eye height: auto;wòawɔ dɔ ɖe edzi ale be wòadzidze kple dzila ƒe kekeme.

Placeholder Responsive image
<img src="..." class="img-fluid" alt="...">

Nɔnɔmetata ƒe nɔnɔmetata suewo

Tsɔ kpe ɖe míaƒe border-radius utilities ŋu la, àteŋu azã .img-thumbnailatsɔ ana nɔnɔmetata aɖe nadze abe 1px liƒo ƒe dzedzeme si le goglo ene.

A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera 200x200
<img src="..." class="img-thumbnail" alt="...">

Nɔnɔmetatawo ɖoɖo ɖe ɖoɖo nu

Ðo nɔnɔmetatawo ɖe ɖoɖo nu kple kpeɖeŋutɔ ƒe float klasswo alo nuŋɔŋlɔ ƒe ɖoɖowɔwɔ ƒe klasswo . block-level nɔnɔmetatawo ateŋu aɖo titina to margin utility class zazã me.mx-auto .

Placeholder 200x200 Placeholder 200x200
<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" alt="...">
Placeholder 200x200
<img src="..." class="rounded mx-auto d-block" alt="...">
Placeholder 200x200
<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>

Nutata

Ne èle element la zãm tsɔ le <picture>element geɖe <source>gblɔm na , aɖe koŋ <img>la, kpɔ egbɔ be yetsɔ .img-*klassawo kpe ɖe tag la ŋu <img>eye menye ɖe <picture>tag la ŋu o.

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

Sass ƒe nyawo

Nusiwo trɔna

Trɔtrɔwo li na nɔnɔmetata ƒe nɔnɔmetata suewo.

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