Imej

Dokumentasi dan contoh untuk mengikut sertakan imej menjadi gelagat responsif (supaya imej itu tidak menjadi lebih luas daripada induknya) dan menambah gaya ringan kepada mereka—semuanya melalui kelas.

Pada halaman ini

Imej responsif

Imej dalam Bootstrap dibuat responsif dengan .img-fluid. Ini terpakai max-width: 100%;dan height: auto;pada imej supaya ia berskala dengan lebar induk.

<img src="..." class="img-fluid" alt="...">

Lakaran kenit imej

Sebagai tambahan kepada utiliti jejari sempadan kami , anda boleh gunakan .img-thumbnailuntuk memberikan imej rupa sempadan 1px bulat.

<img src="..." class="img-thumbnail" alt="...">

Menjajarkan imej

Jajarkan imej dengan kelas apungan pembantu atau kelas penjajaran teks . blockimej peringkat boleh dipusatkan menggunakan kelas .mx-autoutiliti 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;