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
. max-width: 100%;
sarta height: auto;
dilarapkeun kana gambar sangkan skala jeung unsur indungna.
<img src="..." class="img-fluid" alt="...">
Gambar SVG sareng Internet Explorer
Dina Internet Explorer 10 sareng 11, gambar SVG sareng .img-fluid
ukuranana henteu saimbang. Pikeun ngalereskeun ieu, tambahkeun width: 100%;
atanapi .w-100
upami diperyogikeun. Perbaikan ieu teu leres ukuran format gambar anu sanés, janten Bootstrap henteu otomatis nerapkeunana.
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-left" alt="...">
<img src="..." class="rounded float-right" 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>