Skip to main content Skip to docs navigation
View on GitHub

Figures插图

Documentation and examples for displaying related images and text with the figure component in Bootstrap.用于在Bootstrap中使用figure组件显示相关图像和文本的文档和示例。

On this page本页内容

Anytime you need to display a piece of content—like an image with an optional caption, consider using a <figure>.任何时候,你需要显示一个内容,像一个带有可选标题的图像,请考虑使用<figure>

Use the included .figure, .figure-img and .figure-caption classes to provide some baseline styles for the HTML5 <figure> and <figcaption> elements. 使用包含的.figure.figure-img.figure-caption类为HTML5<figure>元素和<figcaption>元素提供一些基线样式。Images in figures have no explicit size, so be sure to add the .img-fluid class to your <img> to make it responsive.插图中的图像没有明确的大小,因此请确保给<img>元素添加.img-fluid类使其具有响应性。

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

Aligning the figure’s caption is easy with our text utilities.使用我们的文本实用程序很容易对齐图形的标题。

Placeholder400x300
A caption for the above image.
<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

Variables变量

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