Images
Zvinyorwa uye mienzaniso yekusarudza mifananidzo kuita hunhu hwekupindura (kuitira kuti isambova hombe kupfuura zvinhu zvevabereki) uye wedzera masitaera akareruka kwavari — zvese nemakirasi.
Mifananidzo inopindura
Mifananidzo muBootstrap inogadzirwa inopindura ne .img-fluid
. Izvi zvinoshanda max-width: 100%;
uye height: auto;
kune chifananidzo kuitira kuti chiyere nechinhu chemubereki.
<img src="..." class="img-fluid" alt="...">
Image thumbnails
Pamusoro pemuganho-radius utilities , unogona kushandisa .img-thumbnail
kupa mufananidzo wakatenderedzwa 1px muganho chitarisiko.
<img src="..." class="img-thumbnail" alt="...">
Kuenzanisa mifananidzo
Gadzirisa mifananidzo nemubatsiri anoyangarara makirasi kana makirasi ekugadzirisa zvinyorwa . block
-level mifananidzo inogona kuiswa pakati uchishandisa margin .mx-auto
utility kirasi .
<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>
Mufananidzo
Kana iwe uri kushandisa <picture>
chinhu kutsanangura akawanda <source>
maelementi kune chaiyo <img>
, ita shuwa yekuwedzera .img-*
makirasi kune iyo <img>
kwete kune iyo <picture>
tag.
<picture>
<source srcset="..." type="image/svg+xml">
<img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>
Sass
Variables
Variables varipo kune zvidhori zvemufananidzo.
$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;