Svetuka kune chikuru content Svetuka kuenda kudocs navigation
in English

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.

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

Image thumbnails

Pamusoro pemuganho-radius utilities , unogona kushandisa .img-thumbnailkupa mufananidzo wakatenderedzwa 1px muganho chitarisiko.

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

Kuenzanisa mifananidzo

Gadzirisa mifananidzo nemubatsiri anoyangarara makirasi kana makirasi ekugadzirisa zvinyorwa . block-level mifananidzo inogona kuiswa pakati uchishandisa margin .mx-autoutility kirasi .

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>

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;