Duab
Cov ntaub ntawv thiab cov piv txwv rau kev xaiv cov duab rau hauv tus cwj pwm teb (yog li ntawd lawv yeej tsis ua dav dua li lawv niam lawv txiv) thiab ntxiv cov qauv hnyav rau lawv - tag nrho ntawm cov chav kawm.
Teb cov duab
Cov duab hauv Bootstrap tau teb nrog .img-fluid
. Qhov no siv max-width: 100%;
thiab height: auto;
rau cov duab kom nws scales nrog niam txiv dav.
<img src="..." class="img-fluid" alt="...">
Duab thumbnails
Ntxiv rau peb cov khoom siv hluav taws xob ciam teb , koj tuaj yeem siv .img-thumbnail
los muab cov duab ib puag ncig 1px ciam teb zoo li.
<img src="..." class="img-thumbnail" alt="...">
Aligning cov duab
Teem cov duab nrog cov pab cuam ntab cov chav kawm lossis cov chav kawm nyeem ntawv . block
-qib cov duab tuaj yeem nyob nruab nrab siv cov .mx-auto
chav kawm margin utility .
<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>
Duab
Yog tias koj siv lub <picture>
caij los qhia ntau lub <source>
ntsiab lus rau ib qho tshwj xeeb <img>
, nco ntsoov ntxiv cov .img-*
chav kawm rau qhov <img>
thiab tsis yog rau lub <picture>
cim.
<picture>
<source srcset="..." type="image/svg+xml">
<img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>
Sass
Hloov pauv
Cov kev hloov pauv muaj rau cov duab 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;