Mga larawan

Dokumentasyon ug mga panig-ingnan alang sa pagpili sa mga hulagway ngadto sa responsive nga kinaiya (aron dili kini mahimong mas lapad kay sa ilang ginikanan) ug idugang ang mga lightweight nga mga estilo niini—tanan pinaagi sa mga klase.

Niini nga panid

Matubag nga mga imahe

Ang mga imahe sa Bootstrap gihimo nga responsive sa .img-fluid. Kini magamit max-width: 100%;ug height: auto;sa imahe aron kini motimbang sa gilapdon sa ginikanan.

html

<img src="..." class="img-fluid" alt="...">

Mga thumbnail sa imahe

Dugang pa sa among mga gamit sa border-radius , mahimo nimong gamiton .img-thumbnailaron mahatagan ang usa ka imahe ug usa ka lingin nga 1px nga hitsura sa utlanan.

html

<img src="..." class="img-thumbnail" alt="...">

Pag-align sa mga imahe

I-align ang mga hulagway sa helper float nga mga klase o text alignment nga mga klase . block-level nga mga hulagway mahimong masentro gamit ang .mx-automargin utility class .

html

<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" alt="...">

html

<img src="..." class="rounded mx-auto d-block" alt="...">

html

<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>

Hulagway

Kung gigamit nimo ang <picture>elemento aron mahibal-an ang daghang <source>mga elemento alang sa usa ka piho <img>, siguruha nga idugang ang mga .img-*klase sa <img>ug dili sa <picture>tag.

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

Sass

Mga variable

Anaa ang mga variable alang sa mga thumbnail sa imahe.

$thumbnail-padding:                 .25rem;
$thumbnail-bg:                      $body-bg;
$thumbnail-border-width:            $border-width;
$thumbnail-border-color:            var(--#{$prefix}border-color);
$thumbnail-border-radius:           $border-radius;
$thumbnail-box-shadow:              $box-shadow-sm;