Chuyển đến nội dung chính Chuyển đến điều hướng tài liệu
Check
in English

Số liệu

Tài liệu và ví dụ để hiển thị hình ảnh và văn bản liên quan với thành phần figure trong Bootstrap.

Trên trang này

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>

Placeholder 400x300
Chú thích cho hình ảnh trên.
html
<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 .

Placeholder 400x300
Chú thích cho hình ảnh trên.
html
<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;