Laktawan sa panguna nga sulud Laktaw sa docs navigation
in English

Mga larawan

Dokumentasyon ug mga panig-ingnan alang sa pagpili sa mga hulagway ngadto sa responsive nga kinaiya (aron sila dili mahimong mas dako pa kay sa ilang mga ginikanan nga mga elemento) ug makadugang sa gaan nga mga estilo ngadto kanila—tanan pinaagi sa mga klase.

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 elemento sa ginikanan.

Placeholder Responsive image
<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.

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

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 .

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>

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:            $gray-300;
$thumbnail-border-radius:           $border-radius;
$thumbnail-box-shadow:              $box-shadow-sm;