Tlula eka nhlokomhaka-nkulu Tlula eka docs navigation
Check
in English

Swifaniso

Matsalwa na swikombiso swo hlawula swifaniso eka mahanyelo yo hlamula (leswaku swi nga tshuki swi anama ku tlula mutswari wa swona) na ku engetela switayele swo olova eka swona—hinkwaswo hi ku tirhisa titlilasi.

Swifaniso leswi hlamulaka

Swifaniso eka Bootstrap swi endliwa swi hlamula hi .img-fluid. Leswi swi tirha max-width: 100%;na height: auto;le ka xifaniso leswaku xi ringanisa hi ku anama ka mutswari.

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

Swifaniso leswitsongo swa swifaniso

Ku engetela eka switirhisiwa swa hina swa border-radius , u nga tirhisa .img-thumbnailku nyika xifaniso xivumbeko xa ndzilakano xa xirhendzevutana xa 1px.

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

Ku ringanisa swifaniso

Hlanganisa swifaniso na titlilasi ta float ta mupfuni kumbe titlilasi ta ku ringanisa matsalwa . blockswifaniso swa xiyimo xa le henhla swi nga vekiwa exikarhi hi ku tirhisa tlilasi ya .mx-autovukorhokeri bya margin .

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>

Xifaniso

Loko u tirhisa <picture>elemente ku boxa <source>swiaki swo tala swa specific <img>, tiyisisa leswaku u engetela .img-*titlilasi eka <img>na ku nga ri eka <picture>thegi.

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

Sass

Swilo leswi cinca-cincaka

Swilo leswi cinca-cincaka swi kumeka eka swifaniso leswitsongo swa swifaniso.

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