Hla mus rau cov ntsiab lus tseem ceeb Hla mus rau docs navigation

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.

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

Duab thumbnails

Ntxiv rau peb cov khoom siv hluav taws xob ciam teb , koj tuaj yeem siv .img-thumbnaillos muab cov duab ib puag ncig 1px ciam teb zoo li.

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

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-autochav kawm margin utility .

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>

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;