Imej
Dokumentasi dan contoh untuk mengikut sertakan imej ke dalam gelagat responsif (supaya imej itu tidak menjadi lebih besar daripada elemen induknya) dan menambah gaya ringan padanya—semuanya melalui kelas.
Imej responsif
Imej dalam Bootstrap dibuat responsif dengan .img-fluid
. Ini terpakai max-width: 100%;
dan height: auto;
pada imej supaya ia berskala dengan elemen induk.
<img src="..." class="img-fluid" alt="...">
Lakaran kenit imej
Sebagai tambahan kepada utiliti jejari sempadan kami , anda boleh gunakan .img-thumbnail
untuk memberikan imej rupa sempadan 1px bulat.
<img src="..." class="img-thumbnail" alt="...">
Menjajarkan imej
Jajarkan imej dengan kelas apungan pembantu atau kelas penjajaran teks . block
imej peringkat boleh dipusatkan menggunakan 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
Jika anda menggunakan <picture>
elemen untuk menentukan berbilang <source>
elemen untuk <img>
, pastikan anda menambah .img-*
kelas pada <img>
dan bukan pada <picture>
teg.
<picture>
<source srcset="..." type="image/svg+xml">
<img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>
Sass
Pembolehubah
Pembolehubah tersedia untuk lakaran kenit imej.
$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;