Перейти к основному содержанию

figure

Документация и примеры для отображения связанных изображений и текста с помощью компонента figure в Bootstrap.

Содержание

Каждый раз, когда вам нужно отобразить часть содержимого, например изображение с необязательной подписью, рассмотрите возможность использования файла <figure>.

Используйте входящие в комплект .figure, .figure-img и .figure-caption классы , чтобы обеспечить некоторые базовые стили для HTML5 <figure> и <figcaption> элементов. Изображения на рисунках не имеют явного размера, поэтому обязательно добавьте .img-fluid класс в свой, <img> чтобы сделать его адаптивным.

Placeholder400x300
Подпись к изображению выше.
<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

Выровнять заголовок рисунка легко с помощью наших текстовых утилит .

Placeholder400x300
Подпись к изображению выше.
<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
</figure>