Laktawan ti kangrunaan a linaon Laktawan ti docs navigation
in English

Dagiti Ladawan

Dokumentasion ken dagiti pagarigan para iti panagpili kadagiti ladawan iti makasungbat a kababalin (isu a pulos a dida agbalin a nalawlawa ngem ti nagannakda) ken manginayon kadagiti nalag-an nga estilo kadagitoy—amin babaen dagiti klase.

Dagiti makasungbat a ladawan

Dagiti ladawan iti Bootstrap ket naaramid a makasungbat babaen ti .img-fluid. Daytoy ket agaplikar max-width: 100%;ken height: auto;iti ladawan tapno daytoy ket ag-scale iti kalawa ti nagannak.

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

Dagiti thumbnail ti ladawan

Malaksid kadagiti border-radius utilities mi , mabalinmo nga usaren .img-thumbnaila mangted ti maysa a ladawan iti nagtimbukel a 1px a langa ti beddeng.

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

Panangitunos kadagiti ladawan

Itunos dagiti ladawan kadagiti klase ti float ti katulongan wenno dagiti klase ti panagtunos ti teksto . block-level a ladawan ket mabalin a maisentro babaen ti panagusar ti klase ti utilidad ti .mx-automargin .

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>

Ladawan

No agus-usar ka ti <picture>elemento tapno mangibaga kadagiti adu <source>nga elemento para iti espesipiko <img>, siguraduem nga inayon dagiti .img-*klase iti <img>ken saan nga iti <picture>etiketa.

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

Sass nga

Dagiti Variable

Dagiti variable ket magun-od para kadagiti thumbnail ti ladawan.

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