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.
<img src="..." class="img-fluid" alt="...">
Mga thumbnail sa imahe
Dugang pa sa among mga gamit sa border-radius , mahimo nimong gamiton .img-thumbnail
aron mahatagan ang usa ka imahe ug usa ka lingin nga 1px nga hitsura sa utlanan.
<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-auto
margin utility class .
<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>
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;