Tlolela go diteng tše kgolo Tlolela go docs navigation
in English

Diswantšho

Ditokomane le mehlala ya go kgetha diswantšho go boitshwaro bjo bo arabelago (ka fao le ka mohla di se ke tša ba tše di nabilego go feta motswadi wa tšona) le go oketša mekgwa ye bofefo go tšona—ka moka ka diklase.

Diswantšho tše di arabelago

Diswantšho ka go Bootstrap di dirwa gore di arabele ka .img-fluid. Se se šoma max-width: 100%;le height: auto;go seswantšho gore se lekanyetše ka bophara bja motswadi.

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

Diswantšho tše dinyenyane tša seswantšho

Go tlaleletša go didirišwa tša rena tša mollwane-radius , o ka šomiša .img-thumbnailgo fa seswantšho ponagalo ya mollwane wa 1px wo o kgokologilego.

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

Go logaganya diswantšho

Logaganya diswantšho le diklase tša go phaphamala tša mothuši goba diklase tša go logaganya sengwalwa . block-maemo a diswantšho di ka tsepama ka go šomiša sehlopha sa utility ya .mx-automargin .

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>

Seswantšho

Ge o šomiša <picture>elemente go laetša dielemente tše ntši <source>tša ye e itšego <img>, kgonthiša gore o tlaleletša .img-*diklase go <img>le e sego go <picture>thepo.

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

Sass

Diphetogo

Diphetogo di a hwetšagala bakeng sa diswantšho tše dinyenyane tša seswantšho.

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