Ebifaananyi
Ebiwandiiko n’ebyokulabirako eby’okulonda ebifaananyi mu nneeyisa ey’okuddamu (kale tebifuuka bigazi okusinga muzadde waabwe) n’okubigattako emisono egy’obuzito —byona nga biyita mu bibiina.
Ebifaananyi ebiddamu
Ebifaananyi mu Bootstrap bikolebwa nga biddamu ne .img-fluid
. Kino kikola max-width: 100%;
era height: auto;
ku kifaananyi ne kigerageranya n’obugazi bw’omuzadde.
<img src="..." class="img-fluid" alt="...">
Ebifaananyi ebitonotono
Ng’oggyeeko border-radius utilities zaffe , osobola okukozesa .img-thumbnail
okuwa ekifaananyi endabika y’ensalosalo eya 1px eyeetooloovu.
<img src="..." class="img-thumbnail" alt="...">
Okusengeka ebifaananyi
Laganya ebifaananyi n'ebika by'omuyambi ebitengejja oba kiraasi z'okulaganya ebiwandiiko . block
-level ebifaananyi bisobola okuteekebwa wakati nga tukozesa margin .mx-auto
utility class .
<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" alt="...">
<img src="..." class="rounded mx-auto d-block" alt="...">
<div class="text-center">
<img src="..." class="rounded" alt="...">
</div>
Ekifaananyi
Bw’oba okozesa <picture>
ekintu okulaga <source>
ebintu ebingi ku specific <img>
, kakasa nti ogattako .img-*
kiraasi ku <img>
so si ku <picture>
tag.
<picture>
<source srcset="..." type="image/svg+xml">
<img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>
Sass nga bwe kiri
Enkyukakyuka ezikyukakyuka
Enkyukakyuka ziriwo ku bifaananyi ebitonotono.
$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;