Mafere na isi ọdịnaya Gaa na ntugharị docs
Check
in English

Onyonyo

Akwụkwọ na ihe atụ maka ịhọrọ onyonyo n'ime omume nnabata (ya mere, ha anaghị adị ogologo karịa nne na nna ha) wee tinye ha ụdị dị arọ - niile site na klaasị.

Onyonyo na-anabata

A na-eme ihe onyonyo dị na Bootstrap nke ọma na .img-fluid. Nke a na-emetụta max-width: 100%;na height: auto;onyonyo ka o wee jiri obosara nne na nna tụọ ya.

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

Foto mkpirisi

Na mgbakwunye na akụrụngwa radius anyị , ị nwere ike iji .img-thumbnailnye onyonyo n'ọdịdị oke 1px gbara okirikiri.

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

Na-ahazi onyonyo

Hazie onyonyo na klaasị sere n'elu ma ọ bụ klaasị nhazi ederede . blockEnwere ike ịgbado onyonyo -larịị site na iji .mx-autoklaasị oke .

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

If you are using the <picture>element to specify multiple <source>elements for a specific <img>, jide n'aka na itinye .img-*klaasị na <img>na ọ bụghị na <picture>mkpado.

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

Sass

Mgbanwe

Ọdịiche dị maka obere mkpirisi onyonyo.

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