Bootstrap 笔记

第一章：集成 Bootstrap

一、文件组成

Bootstrap 是一个前端框架。该框架主要是由 CSS 和 JS 组成，但是也会依赖一小部分的 HTML。因此在安装 Bootstrap 时，需要引入相应的 CSS 和 JS 文件，当然也需要添加一些全局的配置。

CSS files

Bootstrap 提供了一些选项，用于包含编写的部分或全部 CSS。

CSS files	Layout	Content	Components	Utilities
`bootstrap.css` `bootstrap.min.css` `bootstrap.rtl.css` `bootstrap.rtl.min.css`	Included	Included	Included	Included
`bootstrap-grid.css` `bootstrap-grid.rtl.css` `bootstrap-grid.min.css` `bootstrap-grid.rtl.min.css`	Only grid system	—	—	Only flex utilities
`bootstrap-utilities.css` `bootstrap-utilities.rtl.css` `bootstrap-utilities.min.css` `bootstrap-utilities.rtl.min.css`	—	—	—	Included
`bootstrap-reboot.css` `bootstrap-reboot.rtl.css` `bootstrap-reboot.min.css` `bootstrap-reboot.rtl.min.css`	—	Only Reboot	—	—

标头解释：

“Layout”指的是用于构建和设计网页布局的一组 CSS 样式和工具。这些工具和样式提供了创建响应式、移动优先的网页布局的能力。
“Content”指的是与文本内容、排版、表格、图像等相关的 CSS 样式。这些样式用于格式化和展示 HTML 文档中的内容部分。
“Components”指的是一系列预先设计好的、可重用的界面元素，它们包括 HTML 和 CSS 样式，并且有时还包括 JavaScript 行为。
“Utilities”是一组 CSS 类，用于快速设计布局、调整间距、改变文本对齐方式、控制可见性等。

文件名中的单词解释：

reboot：为了提升跨浏览器的渲染效果，使用 reboot 来纠正不同浏览器和设备之间的差异，并同时为常见的 HTML 元素提供更多更合适的样式重置。
rtl 代表“从右到左”（Right-To-Left）。这是为了支持那些从右到左书写的语言，如阿拉伯语、希伯来语等。在这些语言中，文本和布局的阅读方向是从右向左，这与大多数西方语言（如英语）的从左向右（Left-To-Right, LTR）阅读方向相反。

JS files

同样，可以选择包含部分或全部已编译的 JavaScript。

JS Files	Popper
`bootstrap.bundle.js` `bootstrap.bundle.min.js`	Included
`bootstrap.js` `bootstrap.min.js`	–

在 Bootstrap 中，Popper 是一个第三方库，它用于定位带有工具提示（tooltips）、弹出框（popovers）和下拉菜单（dropdowns）等浮动元素。Popper.js 提供了智能定位的功能，可以自动计算元素在页面上的位置，确保即使在动态或复杂的布局中，这些元素也能正确地显示在触发它们的元素旁边。

Bootstrap 依赖 Popper.js 来提供这些组件的定位功能，因为它们需要根据视口大小和滚动位置动态调整位置，以保持其可见性和适当的对齐。从 Bootstrap 4 开始，Popper.js 就成为了 Bootstrap JavaScript 插件的一个重要依赖项。在 Bootstrap 5 中，Popper 继续作为一个关键的依赖库，用于提供定位功能。

二、引入

全局配置

a. Bootstrap 要求文档类型（doctype）是 HTML5。

b. 需在 <head> 标签中添加 viewport（视口）。

html

<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0,shrink-to-fit=no">

集成好的 HTML 页面代码

html

<!doctype html>
<html lang="zh-CN">
  <head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0,shrink-to-fit=no">

    <!-- Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">

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

    <!-- JavaScript 文件是可选的。从以下两种建议中选择一个即可！ -->

    <!-- 选项 1：jQuery 和 Bootstrap 集成包（集成了 Popper） -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>

    <!-- 选项 2：Popper 和 Bootstrap 的 JS 插件各自独立 -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"></script>
    -->
  </body>
</html>

在 Bootstrap 5 版本以前，Bootstrap 是依赖 jQuery 的。那么如果使用的是 Bootstrap 5 以下的版本，需在引入 Bootstrap 之前先引入 jQuery 库。

第二章：基本概念

一、断点 breakpoints

Bootstrap 的一大核心就是响应式，即开发一套系统便可以适配不同尺寸的屏幕。它底层原理是使用媒体查询来为我们的布局和页面创建合理的断点 (Breakpoints) ，然后根据这些合理的断点来给不同尺寸屏幕应用不同的 CSS 样式。

Bootstrap 4 设了 5 个断点来构建响应式系统，5 个断点分别为 Extra-Small、Small、Medium、Large、Extra large。
Bootstrap 5 设了 6 个断点来构建响应式系统，6 个断点分别为 Extra-Small、Small、Medium、Large、Extra large、Extra extra larg。
媒体查询是 CSS 的一项功能，它允许你根据浏览器的分辨率来应用不同的 CSS 样式，如 @media (min-width: 576px){}

简单来说，就是屏幕尺寸的分割点，不同设备屏幕大小分类。

Breakpoint	Class infix	Dimensions	适用范围
X-Small	None	< 576px	适用于所有设备尺寸，不使用媒体查询
Small	sm	≥ 576px	适用于超小型设备，如竖屏手机
Medium	md	≥ 768px	适用于小型设备，如横屏手机
Large	lg	≥ 992px	适用于中型设备，如平板电脑
Extra large	xl	≥ 1200px	适用于大型设备，如桌面电脑
Extra extra large	xxl	≥ 1400px	适用于超大型设备，如大屏幕桌面电脑

底层源码：

css

/* 超小型设备(竖屏手机，小于576像素) */
/* 在 Bootstrap 中没有针对 `xs` 的媒体查询, 因为这是默认值。*/

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }

二、响应式容器 Containers

Containers 容器是 Bootstrap 中最基本的布局元素，并且该布局支持响应式。在使用默认网格系统时是必需的。

Containers 容器用于包含、填充，有时也会作为内容居中使用。容器也是可以嵌套，但大多数布局不需要嵌套容器。

Bootstrap 带有三个不同的 Containers 容器：

.container ：它在每个断点处会设置不同的 max-width。
.container-{breakpoint} ：默认是 width: 100%，直到指定断点才会修改为响应的值。且 margin:auto;，使得容器居中。有左右 15px 的内边距。
.container-fluid ：在所有断点处都是 width: 100%。

	Extra small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	X-Large ≥1200px	XX-Large ≥1400px
`.container`	100%	540px	720px	960px	1140px	1320px
`.container-sm`	100%	540px	720px	960px	1140px	1320px
`.container-md`	100%	100%	720px	960px	1140px	1320px
`.container-lg`	100%	100%	100%	960px	1140px	1320px
`.container-xl`	100%	100%	100%	100%	1140px	1320px
`.container-xxl`	100%	100%	100%	100%	100%	1320px
`.container-fluid`	100%	100%	100%	100%	100%	100%

html

<div class="container">默认容器</div>
<div class="container-sm">container-sm 100% wide until small breakpoint</div>
<div class="container-md">container-md 100% wide until medium breakpoint</div>
<div class="container-lg">container-lg 100% wide until large breakpoint</div>
<div class="container-xl">container-xl 100% wide until extra large breakpoint</div>
<div class="container-xxl">container-xxl 100% wide until extra extra large breakpoint</div>
<div class="container-fluid">流式容器</div>

第三章：网格系统

一、什么是网格系统？

Bootstrap 网格系统提供了一种简单而强大的方法来创建各种形状和大小的响应式布局。是用于构建移动设备优先的强大布局系统。可支持 12 列网格、6 个断点和数十个预定义类。底层使用了强大的 flexbox 来构建弹性布局，并支持 12 列的网格布局。

网格系统是使用 container、row 和 col 类来布局，并且布局是支持响应的。那我们应该如何使用网格系统？

① 编写一个 container 或 container-fluid 容器；② 在 container 容器中编写 row 容器；③ 在 row 容器中编写列 col 容器。

二、网格系统的原理

网格系统是有 container、row、col 三部分组成，底层使用 flexbox 来布局，并且支持 12 列网格布局。

container 或 container-fluid 是布局容器，网格系统中必用的容器（该容器也会应用在：内容居中或作为包含其它内容等）。
- width: 100% / 某个断点的宽; --> 布局的宽
- padding-right: 15px; --> 让包含的内容不会靠在布局右边缘
- padding-left: 15px; --> 让包含的内容不会靠在布局左边缘
- margin-right: auto; --> 布局居中
- margin-left: auto; --> 布局居中
row 是网格系统中的每一行，row 是存放在 container 容器中。如果指定列宽，那么一行最多可以存放 12 列，超出列数会换行。
- display: flex; --> 指定 row 为弹性布局（并支持 12 列网格布局）
- flex-wrap: wrap; --> 支持多行展示 flex item。
- margin-right: -15px; --> 抵消 container 右边 15px 的 padding。
- margin-left: -15px; --> 抵消 container 左边 15px 的 padding。
col 是网格系统的每一列，col 是存放在 row 容器中。
- position: relative; --> 相对定位布局。
- flex-grow: 1 / flex:0 0 x%; --> 自动拉伸布局或占百分比。
- max-width: 100% / max-width: x%; --> 最大的宽。
- padding-right: 15px; --> 让包含内容不会靠右边缘。
- padding-left: 15px; --> 让包含内容不会靠左边缘。

嵌套 (nesting)

Bootstrap 的网格系统是可以支持嵌套的，例如：

可以在某个网格系统的某一列上继续嵌套一个网格系统。当网格系统中的某一列嵌套一个网格系统的时候，嵌套的网络系统可以省略 container 容器。因为网格系统中的 col 是可以充当一个 container-fluid 容器来使用（col 的属性和 container-fluid 的属性基本一样）。

下面来做一个案例：用指定列宽（语法：col-{number}）的方式来实现一行 8 列的布局。

html

<!--
  实现一行8列的网格系统 (指定列宽的方式)
-->
<div class="container">
    <div class="row">
        <!-- 这里的列可以充当容器来使用 -->
        <div class="col-6 item">
            <div class="row">
                <div class="col-3 item">1</div>
                <div class="col-3 item">2</div>
                <div class="col-3 item">3</div>
                <div class="col-3 item">4</div>
            </div>
        </div>
        <div class="col-6">
            <div class="row">
                <div class="col-3 item">5</div>
                <div class="col-3 item">6</div>
                <div class="col-3 item">7</div>
                <div class="col-3 item">8</div>
            </div>
        </div>
    </div>
</div>

三、col 类

1. 自动布局（Auto-layout）

col ：等宽列（Equal-width）
底层是 flex-grow: 1; max-width: 100%。该类网格系统仅用 flexbox 布局。
col-auto ：列的宽为 auto（Variable width content）。
底层是 flex: 0 0 auto; width: auto。
宽度为内容宽度。
col-{num} ：指定某个列的宽（支持 12 列网格）。
底层是 flex: 0 0 x%; max-width: x%。

2. 响应式类（Responsive Class）

6 个断点（Breakpoints）

none(xs) : <576px、sm : >=576px、md : >=768px、lg : >=992、xl : >=1200px、xxl : >=1400px

响应式列布局的类

col-sm ：默认 width:100%，当屏幕 >=576px，该类启用（flexbox 布局）, 启用：flex-grow: 1，max-width: 100%。
col-md ：默认 width:100%，当屏幕 >=768px，该类启用（flexbox布局），启用：flex-grow: 1，max-width: 100%。
col-lg ：默认 width:100%，当屏幕 >=992px，该类启用（flexbox布局），启用：flex-grow: 1，max-width: 100%。
col-xl ：默认 width:100%，当屏幕 >=1200px，该类启用（flexbox布局）, 启用：flex-grow: 1，max-width: 100%。
col-xxl ：默认 width:100%，当屏幕 >=1400px，该类启用（flexbox布局）, 启用：flex-grow: 1，max-width: 100%。
col-sm-{num} ：默认 width:100%，当屏幕 >=576px，该类启用 (支持12列网格), 启用：flex: 0 0 x%。
col-md-{num} ：默认 width:100%，当屏幕 >=768px，该类启用 (支持12列网格), 启用：flex: 0 0 x%。
col-lg-{num} ：默认 width:100%，当屏幕 >=992px，该类启用 (支持12列网格), 启用：flex: 0 0 x%。
col-xl-{num} ：默认 width:100%，当屏幕 >=1200px，该类启用 (支持12列网格) , 启用：flex: 0 0 x%。
col-xxl-{num} ：默认 width:100%，当屏幕 >=1400px，该类启用 (支持12列网格) , 启用：flex: 0 0 x%。

Row columns

.row-cols-{num}：设置这行可以放多少个直接子元素。
row-cols-auto：使列具有其自然宽度（子元素内容宽度）。
row-cols-{breakpoint}-{num}：当屏幕 >= {breakpoint}px，这行可以放 {num} 个直接元素。

html

<div class="container text-center">
  <!-- 默认一行一个子元素, 当屏幕大于等于 sm 后是一行两个子元素, 当屏幕大于等于 md 后是一行四个子元素 -->
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

第四章：工具类

一、快速浮动

float-left
float-right

二、文本

text-left、text-right、text-center

text-{sm、md、lg、xl}-left

在 Bootstrap 5 中，Renamed .text-*-left and .text-*-right to .text-*-start and .text-*-end.
更多参见 Migrating to v5

三、边框

borde、border-top、border-left ……

border-primary、border-success

四、截断文本

用省略号截断长文本字符串。使用 text-truncate 类选择器即可。

前提：需要 display: inline-block 或 display: block。

五、display 属性

当我们在开发响应式页面时，可能会有这样的需求：

某个功能在 PC 端可见，但是在移动端不可见。
因为移动端的屏幕比较小，是不能把 PC 端中所有的内容都展示出来，所以有些不重要的内容可能在移动端就被简化了。

这时我们就可以借用响应式的工具来实现该功能。

Bootstrap 的响应式工具类 - Display

为了更快地进行多端的开发，我们可以使用 Bootstrap 提供的响应式工具类（display），该类可按设备显示和隐藏元素。

为了避免为同一个网站开发出多个不同的版本（PC、iPad、iPhone），我们可以针对每个屏幕尺寸响应地隐藏和显示元素，来实现在不同屏幕上显示不同的页面。

如何使用响应工具类（display）?

隐藏元素可以给某个元素添加 .d-none 类或 .d-{sm,md,lg,xl,xxl}-none 类中的任何一个。

显示元素可以给某个元素添加 .d-block 类或 .d-{sm,md,lg,xl,xxl}-block 类中的任何一个。

屏幕尺寸	类名
所有尺寸隐藏	`.d-none`
仅在 xs 隐藏	`.d-none .d-sm-block`
仅在 sm 隐藏	`.d-sm-none .d-md-block`
仅在 md 隐藏	`.d-md-none .d-lg-block`
仅在 lg 隐藏	`.d-lg-none .d-xl-block`
仅在 xl 隐藏	`.d-xl-none .d-xxl-block`
仅在 xxl 隐藏	`.d-xxl-none`
所有尺寸可见	`.d-block`
仅在 xs 可见	`.d-block .d-sm-none`
仅在 sm 可见	`.d-none .d-sm-block .d-md-none`
仅在 md 可见	`.d-none .d-md-block .d-lg-none`
仅在 lg 可见	`.d-none .d-lg-block .d-xl-none`
仅在 xl 可见	`.d-none .d-xl-block .d-xxl-none`
仅在 xxl 可见	`.d-none .d-xxl-block`

第五章：组件

一、导航栏

Bootstrap 的导航组件（Navs / Navbar）提供了一系列的样式和行为，用于创建各种导航元素，比如标签页（Tabs）和导航条（Navbar）。以下是如何在 Bootstrap 中使用 Navs 组件的基本步骤：

创建基本的导航结构：Navs 组件可以通过无序列表 <ul> 来创建，其中包含一系列的列表项 <li> 和链接 <a>。你需要给 <ul> 添加 .nav 类，给每个 <li> 添加 .nav-item 类，给每个 <a> 添加 .nav-link 类。
激活链接：你可以通过添加 .active 类到 .nav-link 来指示当前激活的链接。
可选的样式和行为：Bootstrap 提供了多种样式和行为，例如水平或垂直排列（通过 .flex-column 类）、标签页样式（通过 .nav-tabs 类）、胶囊样式（通过 .nav-pills 类）等。
使用 JavaScript 插件：如果你想要使用标签页或折叠导航的行为，你需要引入 Bootstrap 的 JavaScript 插件。

以下是一个简单的 Bootstrap 导航标签（Navs）示例：

html

<!-- 导航标签 -->
<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">主页</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">特色</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">定价</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">禁用</a>
  </li>
</ul>

在这个例子中，"主页" 链接被激活，因为它有 .active 类。其他的链接则是正常状态，而 "禁用" 链接则不可点击。

请注意，如果你想要使用标签页的切换功能，你需要引入 Bootstrap 的 JavaScript 文件，并且可能需要使用一些额外的数据属性或 JavaScript 代码来初始化这些行为。

二、面包屑导航

Bootstrap 面包屑导航（Breadcrumb）是一种导航辅助，它允许用户了解当前页面在网站层次结构中的位置，并且能够追溯到它的上一级页面。面包屑导航通常位于页面的顶部，并显示为一系列分隔的链接。

以下是如何在 Bootstrap 中使用面包屑导航的基本步骤：

添加面包屑导航的 HTML 结构：面包屑导航的 HTML 结构包括一个带有 .breadcrumb 类的 <nav> 或 <ol> 元素，以及一系列 <li> 元素，每个 <li> 元素代表一个层级，并带有 .breadcrumb-item 类。
添加链接：在每个 <li> 元素内部，你可以添加 <a> 元素来提供指向上一级页面的链接。当前页面通常是不可点击的，并且可以通过添加 .active 类来标识。
设置可访问性：为了提高可访问性，建议在面包屑导航的容器上使用 aria-label="breadcrumb" 属性。

下面是一个简单的 Bootstrap 面包屑导航示例：

html

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">首页</a></li>
    <li class="breadcrumb-item"><a href="#">图书</a></li>
    <li class="breadcrumb-item active">数据科学</li>
  </ol>
</nav>

在这个例子中，用户当前位于“数据科学”页面，它是不可点击的。用户可以通过点击“首页”或“图书”返回到上一级页面。

面包屑导航是一个简单的组件，不需要 JavaScript 初始化或配置。只需按照上述步骤添加正确的 HTML 结构和类，Bootstrap 的 CSS 就会自动应用样式。

三、轮播图

Bootstrap 的轮播图组件（Carousel）是一个用于在页面上创建幻灯片轮播的组件，它可以循环播放一系列内容，如图片、视频或文字。以下是如何在 Bootstrap 中使用轮播图的基本步骤：

添加轮播图的 HTML 结构：轮播图的 HTML 结构包括一个带有 .carousel 类的顶层容器，以及 .carousel-inner 类的子容器，后者包含了所有的轮播项（.carousel-item）。
添加轮播项：每个 .carousel-item 代表一个轮播的内容，通常是一张图片。第一个 .carousel-item 需要添加 .active 类，以标记它为开始时显示的项。
添加控制器：可选地，你可以添加控制器（如前进和后退按钮），允许用户手动切换轮播项。
添加指示器：同样可选地，你可以添加指示器（小圆点），允许用户直接跳转到某个特定的轮播项。
使用 JavaScript 初始化轮播图：虽然轮播图在引入了 Bootstrap 的 JavaScript 文件后会自动工作，但你也可以使用 JavaScript 来初始化轮播图，并提供一些配置选项。

下面是一个简单的 Bootstrap 轮播图示例：

html

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <!-- 指示器 -->
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <!-- 轮播内容 -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
  <!-- 控制器 -->
  <a class="carousel-control-prev" href="#carouselExampleIndicators" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
    <span>Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" data-slide="next">
    <span class="carousel-control-next-icon"></span>
    <span>Next</span>
  </a>
</div>

如果使用的是 Bootstrap 4 或更高版本，data-ride="carousel" 属性会自动初始化轮播图（自动轮播）。如果你使用的是 Bootstrap 5，可以使用 data-bs-ride="carousel" 来初始化轮播图。还ke yi纯 JavaScript 来初始化轮播图：

javascript

var myCarousel = document.querySelector('#carouselExampleIndicators')
var carousel = new bootstrap.Carousel(myCarousel, {
  interval: 2000, // 轮播项之间切换的时间 (毫秒为单位)
  wrap: true // 指定轮播是否循环
})

四、模态框

Bootstrap 的模态框（Modal）是一个多用途的对话框/弹出窗口，可以用来显示从简单的文本和图片到复杂的 HTML 结构的内容。以下是如何在 Bootstrap 中使用模态框的基本步骤：

添加模态框的 HTML 结构：模态框的 HTML 结构包括一个带有 .modal 类的顶层容器，以及 .modal-dialog 类的子容器，后者包含了模态框的内容。
添加模态内容：.modal-content 类的容器包含三个部分：.modal-header（可选的标题和关闭按钮）、.modal-body（主要内容）和 .modal-footer（可选的底部，通常包含操作按钮）。
触发模态框：你需要一个触发器（如按钮或链接），当用户点击时，会打开模态框。触发器需要设置 data-toggle="modal" 和 data-target="#yourModalId" 属性，其中 #yourModalId 是模态框顶层容器的 ID。
使用 JavaScript 初始化模态框：虽然模态框在引入了 Bootstrap 的 JavaScript 文件后会自动工作，但你也可以使用 JavaScript 来初始化模态框，并提供一些配置选项。

下面是一个简单的 Bootstrap 模态框示例：

html

<!-- 按钮触发模态框 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  打开模态框
</button>

<!-- 模态框 -->
<div class="modal fade" id="exampleModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- 模态框头部 -->
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">模态框标题</h5>
        <button type="button" class="close" data-dismiss="modal">
          <span>&times;</span>
        </button>
      </div>
      <!-- 模态框主体 -->
      <div class="modal-body">
        这里是模态框的内容...
      </div>
      <!-- 模态框底部 -->
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">保存更改</button>
      </div>
    </div>
  </div>
</div>

请注意，data-toggle="modal" 和 data-target="#exampleModal" 属性是用于触发模态框的关键。#exampleModal 应该与模态框顶层容器的 ID 相匹配。

如果你使用的是 Bootstrap 5，由于不再依赖 jQuery，你需要使用新的数据属性 data-bs-toggle="modal" 和 data-bs-target="#exampleModal"，并且关闭模态框的属性应该是 data-bs-dismiss="modal"。

此外，你可以使用 JavaScript 来手动触发模态框：

javascript

// 1. 获取模态框
var myModal = new bootstrap.Modal(document.getElementById('exampleModal'), {
  keyboard: false // 当按下键盘上的 `Esc` 键时，模态框是否应该关闭
})
// 2. 显示模态框
myModal.show();

五、下拉菜单

Bootstrap 的下拉菜单（Dropdowns）是一种可以切换显示的组件，通常用于在一个列表中堆叠多个链接或按钮。以下是如何在 Bootstrap 中使用下拉菜单的基本步骤：

添加下拉菜单的 HTML 结构：下拉菜单的 HTML 结构通常包括一个父容器（如 <div>），它包含一个用于切换下拉菜单的按钮和一个包含下拉菜单项的列表。
配置下拉按钮：下拉按钮需要有 data-toggle="dropdown" 属性（Bootstrap 4）或 data-bs-toggle="dropdown" 属性（Bootstrap 5）。
添加下拉菜单项：下拉菜单项通常放在一个带有 .dropdown-menu 类的 <div> 容器中，每个菜单项都是一个 <a> 链接或 <button> 元素。

下面是一个简单的 Bootstrap 下拉菜单示例：

html

<!-- 下拉菜单的父容器 -->
<div class="dropdown">
  <!-- 切换下拉菜单的按钮 -->
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown">
    下拉菜单按钮
  </button>
  <!-- 下拉菜单项 -->
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">操作 1</a>
    <a class="dropdown-item" href="#">操作 2</a>
    <a class="dropdown-item" href="#">操作 3</a>
  </div>
</div>

在 Bootstrap 5 中，你需要将 data-toggle="dropdown" 改为 data-bs-toggle="dropdown"，其他的结构保持不变。

请注意，下拉菜单不需要额外的 JavaScript 初始化，因为 Bootstrap 的 JavaScript 文件会自动处理下拉功能。只要你按照上述步骤添加了正确的 HTML 结构和属性，下拉菜单就应该能够正常工作。

六、工具提示

Bootstrap 的工具提示（Tooltips）是一种小型的悬浮框，用于在鼠标悬停或聚焦元素时显示文本提示。以下是如何在 Bootstrap 中使用工具提示的基本步骤：

添加工具提示的 HTML 属性：首先，你需要在想要添加工具提示的元素上设置 data-toggle="tooltip" 属性（Bootstrap 4）或 data-bs-toggle="tooltip" 属性（Bootstrap 5），并使用 title 属性来指定要显示的提示文本。
初始化工具提示：由于工具提示不是自动激活的，你需要使用 JavaScript 来初始化它们。在 Bootstrap 4 中，你可以使用 jQuery 来初始化所有带有 data-toggle="tooltip" 属性的元素。在 Bootstrap 5 中，由于不再依赖 jQuery，你需要使用原生 JavaScript 或 Bootstrap 的 JavaScript 方法来初始化。
配置选项：Bootstrap 的工具提示可以通过数据属性或 JavaScript 传递选项来配置，例如设置触发事件、放置位置、延迟显示等。

以下是一个简单的 Bootstrap 工具提示示例：

Bootstrap 4 示例：

html

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="工具提示文本">
  悬停我
</button>

<script>
$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})
</script>

Bootstrap 5 示例：

html

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="工具提示文本">
  悬停我
</button>

<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>

在上述示例中，按钮元素上的 data-placement="top" 属性指定了工具提示应该出现在元素的上方。title 属性包含了工具提示的文本内容。

请注意，为了使工具提示能够正常工作，你需要确保已经引入了 Bootstrap 的 JavaScript 文件，并且在文档加载完成后初始化了工具提示。在 Bootstrap 5 中，你还需要引入 Popper.js，因为它是 Bootstrap 5 工具提示功能的依赖库。

Bootstrap 笔记 ​

第一章：集成 Bootstrap ​

一、文件组成 ​

二、引入 ​

第二章：基本概念 ​

一、断点 breakpoints ​

二、响应式容器 Containers ​

第三章：网格系统 ​

一、什么是网格系统？ ​

二、网格系统的原理 ​

三、col 类 ​

1. 自动布局（Auto-layout） ​

2. 响应式类（Responsive Class） ​

第四章：工具类 ​

一、快速浮动 ​

二、文本 ​

三、边框 ​

四、截断文本 ​

五、display 属性 ​

第五章：组件 ​

一、导航栏 ​

二、面包屑导航 ​

三、轮播图 ​

四、模态框 ​

五、下拉菜单 ​

六、工具提示 ​

Bootstrap 笔记

第一章：集成 Bootstrap

一、文件组成

二、引入

第二章：基本概念

一、断点 breakpoints

二、响应式容器 Containers

第三章：网格系统

一、什么是网格系统？

二、网格系统的原理

三、col 类

1. 自动布局（Auto-layout）

2. 响应式类（Responsive Class）

第四章：工具类

一、快速浮动

二、文本

三、边框

四、截断文本

五、display 属性

第五章：组件

一、导航栏

二、面包屑导航

三、轮播图

四、模态框

五、下拉菜单

六、工具提示