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.
<img src="..." class="img-fluid" alt="...">
Sawir gacmeed
Marka lagu daro adeegyadayada-radius-ka , waxaad isticmaali kartaa .img-thumbnail
inaad siiso sawir muuqaal xuduudeed 1px ah.
<img src="..." class="img-thumbnail" alt="...">
Isku toosinta sawirada
Ku toosi sawirada cawiyaha fasalada sabaynta ama fasalada toosinta qoraalka . block
Sawirada heerka waxa ay noqon karaan kuwo udub dhexaad u ah iyadoo la isticmaalayo fasalka .mx-auto
utility margin .
<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>
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;