副队长BootStrap5探究(6)--画像 Figure (图文组合组件)

点此查看 所有教程、项目、源码导航

文章目录

[1. 开篇介绍与环境引入](#1. 开篇介绍与环境引入)
- [1.1 本章节学习背景](#1.1 本章节学习背景)
- [1.2 引入 Bootstrap 5](#1.2 引入 Bootstrap 5)
[2. 画像 Figure 使用方法](#2. 画像 Figure 使用方法)
- [2.1 基础 Figure](#2.1 基础 Figure)
- [2.2 图注右对齐](#2.2 图注右对齐)
- [2.3 和缩略图组合](#2.3 和缩略图组合)
[3. 底层实现关键点解析](#3. 底层实现关键点解析)
- [3.1 figure 容器](#3.1 figure 容器)
- [3.2 figure-img](#3.2 figure-img)
- [3.3 figure-caption](#3.3 figure-caption)
- [3.4 text-end](#3.4 text-end)
[4. 小结](#4. 小结)

1. 开篇介绍与环境引入

1.1 本章节学习背景

上一节我们学习了图片组件，掌握了响应式图片、圆角、缩略图等工具类。这一节我们学习画像 Figure。

在文章、图库当中，经常出现"一张图片搭配一段说明文字"的组合。原生开发时，我们需要自己布局，控制图文对齐、调整文字样式。HTML 本身提供了 figure、figcaption 语义标签，Bootstrap 在这一组标签之上封装了配套样式，快速实现带图注的图文模块，同时保留良好的语义。

按照本系列固定的学习思路，我们不会仅仅记住类名、复制代码。先学会 Figure 的使用方式，之后通过精简的 CSS 复刻，看懂它背后依靠哪些 CSS 特性实现，反过来巩固我们的 CSS 基础，完善前端技术体系。

画像属于纯 CSS 组件，不需要 JavaScript。

1.2 引入 Bootstrap 5

这里着重强调：引入 Bootstrap，本质就是引用别人提前写好的 CSS 类库以及配套的 JS 函数库，不需要把完整源码复制到我们自己的页面当中，通过外链引用的方式加载。想要使用 figure 组件，只需要引入 Bootstrap 的 CSS 文件即可。推荐使用 CDN 的方式，不需要下载本地文件。

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title></title>
    <!-- Bootstrap 5 CSS -->
    <link rel="stylesheet" href="[https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.8/css/bootstrap.min.css](https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.8/css/bootstrap.min.css)">
</head>

<body>
    <!-- Bootstrap JS + Popper，用于部分交互 -->
    <script src="[https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.8/js/bootstrap.bundle.min.js](https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.8/js/bootstrap.bundle.min.js)"></script>
</body>

</html>

2. 画像 Figure 使用方法

2.1 基础 Figure

figure 作为外层容器，内部放置图片，使用 figcaption 承载图注文字，给 figure 添加 figure 类。

html 复制代码

<figure class="figure">
  <img src="https://picsum.photos/id/1015/600/400" class="figure-img img-fluid rounded" alt="风景">
  <figcaption class="figure-caption">这是一张风景配图，图片下方的说明文字。</figcaption>
</figure>

figure-img 专门用于内部图片，figure-caption 是图注专用类。效果：

2.2 图注右对齐

如果希望说明文字靠右，给 figure-caption 添加 text-end。

html 复制代码

<figure class="figure">
  <img src="https://picsum.photos/id/1025/600/400" class="figure-img img-fluid rounded" alt="人像">
  <figcaption class="figure-caption text-end">图注文字放在右侧。</figcaption>
</figure>

效果：

2.3 和缩略图组合

可以把前面学到的 img-thumbnail 和 figure 一起使用，制作画廊里带说明的缩略卡片。

html 复制代码

<figure class="figure">
  <img src="https://picsum.photos/id/1035/300/300" class="figure-img img-thumbnail" alt="缩略图">
  <figcaption class="figure-caption text-center">画廊缩略项</figcaption>
</figure>

效果：

3. 底层实现关键点解析

下面是精简复刻版本，去掉大量浏览器兼容代码，只保留核心逻辑。

替代CSS代码如下，使用上述的HTML代码片，效果是一样的。

3.1 figure 容器

css 复制代码

.figure {
  /* 使用 inline-block，实现盒子收缩包裹内容，宽度跟随图片 */
  display: inline-block;
  /* 设置外边距，和其他元素隔开距离 */
  margin-bottom: 1rem;
}

3.2 figure-img

css 复制代码

.figure-img {
  /* 设置为块，决定这一组图文的内容宽度 */
  display: block;
  /* 去掉图片下方默认的微小空隙 */
  margin-bottom: 0.5rem;
  /* 继承响应式特性 */
  line-height: 1;
}

3.3 figure-caption

css 复制代码

.figure-caption {
  /* 使用浅灰色，弱化图注，突出图片主体 */
  color: #6c757d;
  /* 设置字号比正文略小 */
  font-size: 0.875em;
}

3.4 text-end

css 复制代码

.text-end {
  /* 在自身内容盒子内部，文字向右对齐 */
  text-align: right;
}

4. 小结

Figure 组件的核心价值不在于复杂样式，而在于把语义标签和常用样式封装在一起。

figure、figcaption 是原生语义标签，搜索引擎、读屏软件可以识别这是图片与对应的说明；
figure-img 主要用来消除图片底部默认间隙；
figure-caption 默认使用灰色小字，区分正文内容；
可以自由搭配之前学过的圆角、响应式、对齐工具类，灵活组合；
如果不需要语义，单纯图片加文字，直接使用普通容器也可以，figure 更适合文章配图场景。