U gudub nuxurka muhiimka ah U gudub dukumentiyada navigation
in English

Sawirada

Dukumeenti iyo tusaalooyin lagu dooranayo sawirada habdhaqan ka jawaab celin ah (si ayan waligood uga weynaan walxaha waalidkooda) oo ku dara qaabab khafiif ah iyaga-dhammaan fasalada.

Sawirro jawaab celin ah

Sawirada ku jira Bootstrap waxaa lagu sameeyay jawaab celin leh .img-fluid. Tani waxay khusaysaa max-width: 100%;iyo height: auto;sawirka si ay ula miisaanto xubinta waalidka.

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

Sawir gacmeed

Marka lagu daro adeegyadayada-radius-ka , waxaad isticmaali kartaa .img-thumbnailinaad siiso sawir muuqaal xuduudeed 1px ah.

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

Isku toosinta sawirada

Ku toosi sawirada cawiyaha fasalada sabaynta ama fasalada toosinta qoraalka . blockSawirada heerka waxa ay noqon karaan kuwo udub dhexaad u ah iyadoo la isticmaalayo fasalka .mx-autoutility margin .

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>

Sawir

Haddii aad u isticmaalayso <picture>curiyaha si aad u qeexdo <source>curiyayaasha kala duwan ee gaar ah <img>, hubi inaad ku darto .img-*fasallada ee <img>ha ku darin <picture>summada.

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

Sass

Kala duwanaansho

Kala duwanaansho ayaa diyaar u ah sawirka thumbnails.

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