学习 Bootstrap 打通任督二脉（一）

本文旨在根据官方文档全面学习 Bootstrap. 学习其目标在于为之后使用其他更加高级的组件库打下坚实的基础。同时由于 Bootstrap 在移动端的亮眼表现，到目前为止，已经是不可逾越的技术点，因此在本文中，让我们下定决心一起突破，拿下 Bootstrap, 打通任督二脉。

Introduction · Bootstrap v5.1 | Bootstrap官方文档中国镜像 (getbootstrap.cn)

1. 概述 1

Bootstrap 不仅是其他框架的基础，也是非常适合用于开发移动端网页的。

Get started with Bootstrap, the world's most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.

1.1 必要的元素

既然是适配移动端，那么就需要做一些基础准备，这些准备包括：

html 必须的 meta 信息
在 head 标签中引入 Bootstrap 的 css 样式文件
在 body 最后引入 Bootstrap 的 js 代码文件

所有的代码如下所示：

html 复制代码

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

1.2 使用 Bootstrap 的网络资源

使用 CDN 资源导入 bootstrap 资源，如下所示：

html 复制代码

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

或者按需引入 popper:

html 复制代码

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

把上面的代码放在 head 标签中就可以了！

小技巧！ 这里介绍一个小技巧，我们可以同时引入本地的资源问价和线上文件，以避免本地文件由于各种问题失效的时候造成系统的崩溃：

1.3 对浏览器的支持情况和兼容性

对浏览器的兼容性如下所示：

plaintext 复制代码

>= 0.5%
last 2 major versions
not dead
Chrome >= 60
Firefox >= 60
Firefox ESR
iOS >= 12
Safari >= 12
not Explorer <= 11

移动端的支持如下所示：

关于 IE 浏览器：第 5 版 Bootstrap 不支持 IE 浏览器，请使用第 4 版。

1.4 模块化按需引入示例

html 复制代码

<script type="module">
  import { Toast } from 'bootstrap.esm.min.js'

  Array.from(document.querySelectorAll('.toast'))
    .forEach(toastNode => new Toast(toastNode))
</script>

有一些个别的组件并不支持按需导入，因为它们依赖于 popper:

Due to browser limitations, some of our plugins, namely Dropdown, Tooltip and Popover plugins, cannot be used in a <script> tag with module type because they depend on Popper.

1.5 Bootstrap 和 jQuery

Bootstrap 对 jQuery 提供了全面的支持，你如果同时使用了 Bootstrap 5 和 jQuery, 那么恭喜你，你可以使用 jQuery 中的 API 选择 Bootstrap 组件，就如同选择原生标签一样！

Bootstrap 5 is designed to be used without jQuery, but it's still possible to use our components with jQuery. If Bootstrap detects jQuery in the window object it'll add all of our components in jQuery's plugin system; this means you'll be able to do $('[data-bs-toggle="tooltip"]').tooltip() to enable tooltips. The same goes for our other components.

1.6 在工程化项目中的按需加载和全量加载

1.7 在工程化项目中引入 Bootstrap 样式文件

在入口文件 (例如 index.js) 中直接引入即可！

需要注意的是，这不是唯一的方式！这只是最简单的方式。其他方式可能要配合 webpack

1.8 可访问性

对于残疾人士需要提供额外的可访问性，这些通常会被屏幕阅读器识别到，但是却不需要出现在健康人士的屏幕上，对于此，Bootstrap 提供了它的解决方案，如下所示：

1.9 响应式字体

Bootstrap 依托 sass 提供了更加强大的支持，例如 RFS 就是其中的一个典型。RFS 实际上是 responsive font size 的简写，它依据多种参考来响应化的改变字体的大小，在编译之后本质上是 css 中的 calc 函数。

1.10 RTL

Bootstrap 还对阿拉伯语等从右向左的书写语言提供了支持。如果需要官方网站上提供了相应的配置示例：RTL · Bootstrap v5.1 | Bootstrap官方文档中国镜像 (getbootstrap.cn)

2. 定制化

对 Bootstrap 的定制化，主要是扩展 sass 配置或者改变 css 变量的值。相关介绍见下：Customize · Bootstrap v5.1 | Bootstrap官方文档中国镜像 (getbootstrap.cn) 由于其必须将 sass 作为预先的知识，因此在此跳过，后续再补充。

Learn how to theme, customize, and extend Bootstrap with Sass, a boatload of global options, an expansive color system, and more.

3. 布局

这是 Bootstrap 中的重点中的重点！！

3.1 经典布局 1 - 固定响应式布局

html 复制代码

<style>
    .a {background: red; height: 24px;}
</style>
<div class="container"><a></a></div>

class=container 的布局原理在于：

3.2 经典布局 2 - 流式布局（又称为百分比布局）

html 复制代码

<style>
    .a {background: red; height: 24px;}
</style>
<div class="container-fluid"><a></a></div>

流式布局的 div 的宽度总是 100% 的。

3.3 固定布局和流式布局的原理

在Bootstrap框架中，响应式布局主要通过容器类来实现。.container 和 .container-fluid 是两种常见的容器类，它们分别对应于固定宽度和流体宽度的布局。以下是如何结合代码来拓展你提到的内容：

固定宽度响应式布局

使用 .container 类可以创建固定宽度的响应式布局。Bootstrap 会根据屏幕宽度的不同自动应用不同的固定宽度。例如：

html 复制代码

<div class="container">
  <!-- 你的固定宽度内容 -->
  <p>这里是固定宽度的响应式布局内容。</p>
</div>

Bootstrap 会根据屏幕的宽度，应用不同的CSS类，如 .container-sm, .container-md, .container-lg, .container-xl 等，来控制 .container 的宽度。

如果说 <=576px 表示的是老年机，那么 576-768 表示的就是正常手机的尺寸；而以此类推，接下来就是平板、老式台式机、笔记本电脑、大屏。

而为了记忆方便：

-sm- 表示的就是：智能手机上的显示效果
-md- 表示的就是：平板电脑上的显示效果
-lg- 表示的就是：老式电脑上的显示效果
-xl- 表示的就是：笔记本电脑上的显示效果
-xxl- 表示的就是：大屏上的显示效果

而 Boostrap 的响应式功能的底层原理其实是 媒体查询。断点原理在于：

流体宽度响应式布局

使用 .container-fluid 类可以创建流体宽度的响应式布局。这种布局会随着屏幕宽度的变化而变化，始终占据100%的视口宽度（viewport width）：

html 复制代码

<div class="container-fluid">
  <!-- 你的流体宽度内容 -->
  <p>这里是流体宽度的响应式布局内容。</p>
</div>

响应式布局的工作原理

Bootstrap 使用媒体查询（Media Queries）来实现响应式设计。它会根据不同的屏幕宽度区间，应用不同的CSS规则。例如，对于 .container，Bootstrap 可能定义了如下的媒体查询：

css 复制代码

/* 基础样式 */
.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

/* 小于576px的屏幕 */
@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

/* 小于768px的屏幕 */
@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

/* 小于992px的屏幕 */
@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

/* 小于1200px的屏幕 */
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

/* 大于1200px的屏幕 */
@media (min-width: 1400px) {
  .container {
    max-width: 1320px;
  }
}

这些媒体查询确保了在不同的屏幕尺寸下，.container 的宽度是固定的，并且随着屏幕尺寸的增加而增加。而 .container-fluid 则不使用这些媒体查询，始终占据100%的宽度。

4. row 和 col

给 div 添加 row 类名，表明其子元素中可能出现带有 col 类名，并且认为此元素的宽度可以被分成 12 份。

一旦子元素带有 col 类名，就会将 row 的空间按照预先设定的分割进行分配。如果分配成功则带有 col 类名的子元素便不会独占一行。

而每个子元素占用多少空间则是由类似于 col-1 这样的类名指定的。 col-1 表示占 row 控件的 1/24/.

而如果需要等分空间，我们只需给每一个子元素绑定 col 类名即可，不必指定 col-* 这样就算是 13 个子元素，也能平分 row 元素的空间

col-* 加起来最好等于 12，少了会显示空白，多了会挤到下一行去：

row col 和响应式

我们可以结合 col-* 和 breakpoints 来指定在不同的屏幕宽度下子元素宽度占 row 的比例。例如，如果我们想要某个子元素在 lg xl xxl 屏幕下都占 row 的 1/24. 那么就可以写成：

html 复制代码

<div class="col-lg-1 col-xl-1 col-xxl-1">1</div>

发现，xl 和 xxl 的占比与 lg 相同。于是上述可简写为：

html 复制代码

<div class="col-lg-1">1</div>

也即是：如果宽屏幕与窄屏幕设置相同，就可以省略窄屏幕。

下面的栅格布置就实现了，大屏一行小屏两行的效果：

布置页面内容

Bootstrap 对 h1-h6 的样式都进行了修改：

这是浏览器的默认样式：

这是被 Bootstrap 处理之后的样式：

同理还有 ul 和 li 标签，以及 code pre var kbd 等标签。

使用假的 h1-h6

我们可以使用 p 标签 + 类名的方式模拟 h 标签

使用 Display-* 类名制作更大的标题

这一小节的主要内容是通过举例的方式，证明了：Bootstrap 会对既有的浏览器某些标签的样式进行统一和美化，更加具体的内容详见：

Typography · Bootstrap v5.1 | Bootstrap官方文档中国镜像 (getbootstrap.cn)

响应式图片

Images in Bootstrap are made responsive with .img-fluid. This applies max-width: 100%; and height: auto; to the image so that it scales with the parent width.

可以简单的将 .img-fluid 理解成 max-width: 100%; and height: auto;

html 复制代码

<img src="..." class="img-fluid" alt="...">

thumbnail

In addition to our border-radius utilities, you can use .img-thumbnail to give an image a rounded 1px border appearance.

html 复制代码

<img src="..." class="img-thumbnail" alt="...">

插入一个让图片居中的好办法

html 复制代码

<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>

html 复制代码

<img src="..." class="rounded mx-auto d-block" alt="...">

Bootstrap 让图片靠左或者靠右布局

html 复制代码

<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" alt="...">

表格

首先使用原生的 html 实现一个表格：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Simple HTML Table</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>

    <table>
        <caption>员工名单</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>职位</th>
                <th>部门</th>
                <th>入职日期</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>软件工程师</td>
                <td>研发部</td>
                <td>2021-06-01</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>产品经理</td>
                <td>产品部</td>
                <td>2022-03-15</td>
            </tr>
            <tr>
                <td>王五</td>
                <td>设计师</td>
                <td>设计部</td>
                <td>2023-01-20</td>
            </tr>
            <!-- 更多行可以继续添加 -->
        </tbody>
    </table>

</body>
</html>

效果如下：

然后通过 Bootstrap 的类名对其进行改造：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap Styled Table</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script></head>
<body>

    <div class="container">
        <table class="table table-bordered text-center table-striped table-hover table-dark">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>职位</th>
                    <th>部门</th>
                    <th>入职日期</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>张三</td>
                    <td>软件工程师</td>
                    <td>研发部</td>
                    <td>2021-06-01</td>
                </tr>
                <tr>
                    <td>李四</td>
                    <td>产品经理</td>
                    <td>产品部</td>
                    <td>2022-03-15</td>
                </tr>
                <tr>
                    <td>王五</td>
                    <td>设计师</td>
                    <td>设计部</td>
                    <td>2023-01-20</td>
                </tr>
                <!-- 更多行可以继续添加 -->
            </tbody>
        </table>
    
    </div>
</body>
</html>

改造之后的效果如下：

其中：下面是每个类名的含义：

.table: 这是基本的表格类，为表格提供了基本的样式。
.table-bordered: 这个类为表格添加边框。
.text-center: 这个类将表格中所有单元格的文本居中对齐。
.table-striped: 这个类为表格添加斑马线效果，即隔行变色，以提高可读性。
.table-hover: 当鼠标悬停在行上时，这个类会为行添加高亮效果。
.table-dark: 这个类将表格的背景色设置为暗色，同时调整文本颜色以确保可读性。

扩展：

你可以使用 class="bg-primary" 给某个 tr 设置背景颜色。此外还有：bg-dark bg-warning 等。
你可以使用 class="text-white" 给某个 td 设置字体颜色。
需要注意的是 text-white 不能设置在 tr 上，会没有效果；tr 上的背景色会被 table 的风格覆盖，比如 table-dark 会覆盖 tr 上的 bg-primary. 这个时候你可以通过内链 style 或者指定更高优先级的 class 来覆盖样式。

背景色

常见的背景色，通过类名进行设置，它们是：

bg-primary
bg-secondary
bg-success
bg-danger
bg-warning
bg-info
bg-light
bg-dark
bg-body
bg-white
bg-transparent

上面的类名对应的样式文件在源码层面都加上了 !important 因此想要修改其样式是不容易的！

在指定背景颜色的基础之上，如果能够再指定名为 bg-gradient 的类名，那么就会获得一个具有柔和的渐变色的背景，例如：

html 复制代码

<div class="p-3 mb-2 bg-secondary bg-gradient text-white">.bg-secondary.bg-gradient</div>

背景色的原理

如果我们使用了类名 .bg-secondary 那么这个时候施加到此元素上的样式为：

css 复制代码

.bg-secondary {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity)) !important;
}

也就是说我们可以在使用此类名的元素的 style 中修改 css 变量 --bs-bg-opacity 的值，从而达到修改其透明度的效果。

html 复制代码

<div class="bg-secondary p-2" style="--bs-bg-opacity: .5;">
  This is 50% opacity secondary background
</div>

那么更进一步，我们还可以修改 css 变量 --bs-secondary-rgb 的值，从而突出这个元素，实现定制化。

html 复制代码

<div 
  class="bg-success p-2" 
  style="--bs-bg-opacity: .5;--bs-success-rgb: 255,0,0;"
>
  This is 50% opacity success background
</div>

这比使用 important 好用多了。