Số liệu

Bất cứ khi nào bạn cần hiển thị một phần nội dung — chẳng hạn như một hình ảnh với chú thích tùy chọn, hãy cân nhắc sử dụng a <figure>.

Sử dụng các lớp và được .figurebao gồm để cung cấp một số kiểu đường cơ sở cho HTML5 và các phần tử. Hình ảnh trong hình không có kích thước rõ ràng, vì vậy hãy đảm bảo thêm lớp vào của bạn để làm cho nó đáp ứng..figure-img.figure-caption<figure><figcaption>.img-fluid<img>

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

Căn chỉnh chú thích của hình thật dễ dàng với các tiện ích văn bản của chúng tôi .

<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

Biến

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