Фигуры
Документация и примеры отображения связанных изображений и текста с помощью компонента figure в Bootstrap.
На этой странице
Всякий раз, когда вам нужно отобразить часть содержимого — например, изображение с необязательной подписью, рассмотрите возможность использования <figure>
.
Используйте включенные классы .figure
, .figure-img
и .figure-caption
, чтобы предоставить базовые стили для HTML5 элементов <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>
Выравнивание подписи фигуры легко выполняется с помощью наших утилит текста.
<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>
CSS
Sass переменные
$figure-caption-font-size: $small-font-size;
$figure-caption-color: var(--#{$prefix}secondary-color);