Gambar
Dokuméntasi sareng conto pikeun milih gambar kana paripolah responsif (supaya aranjeunna henteu janten langkung ageung tibatan elemen indungna) sareng nambihan gaya anu hampang pikeun aranjeunna-sadayana ngalangkungan kelas.
Gambar responsif
Gambar dina Bootstrap didamel responsif sareng .img-fluid
. Ieu lumaku max-width: 100%;
jeung height: auto;
ka gambar supados skala jeung unsur indungna.
<img src="..." class="img-fluid" alt="...">
Gambar leutik
Salian utilitas wates-radius kami , anjeun tiasa nganggo .img-thumbnail
pikeun masihan gambar tampilan wates 1px anu bunder.
<img src="..." class="img-thumbnail" alt="...">
aligning gambar
Sejajarkeun gambar sareng kelas ngambang helper atanapi kelas alignment téks . block
gambar -level bisa dipuseurkeun ngagunakeun kelas .mx-auto
utiliti margin .
<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>
Gambar
Upami Anjeun keur make <picture>
unsur pikeun nangtukeun sababaraha <source>
elemen pikeun husus <img>
, pastikeun pikeun nambahkeun .img-*
kelas ka <img>
jeung teu <picture>
tag.
<picture>
<source srcset="..." type="image/svg+xml">
<img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>
Sass
Variabel
Variabel sadia pikeun gambar leutik.
$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;