Angka

Pada bila-bila masa anda perlu memaparkan sekeping kandungan—seperti imej dengan kapsyen pilihan, pertimbangkan untuk menggunakan <figure>.

.figureGunakan kelas yang disertakan .figure-imgdan .figure-captionuntuk menyediakan beberapa gaya garis dasar untuk HTML5 <figure>dan <figcaption>elemen. Imej dalam rajah tidak mempunyai saiz yang jelas, jadi pastikan anda menambah .img-fluidkelas pada anda <img>untuk menjadikannya responsif.

<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

Menjajarkan kapsyen angka adalah mudah dengan utiliti teks kami .

<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption text-end">A caption for the above image.</figcaption>
</figure>

Sass

Pembolehubah

$figure-caption-font-size:          $small-font-size;
$figure-caption-color:              $gray-600;