1、引入 CSS 文件

复制以下 <link> 标签并粘贴到 <head> 标签内，注意，务必放到其它所有 CSS 样式前面。

<link rel="stylesheet" href="./css/bootstrap.min.css" />

2、引入 JS 文件

Bootstrap 自带的大部分组件都需要依赖 JavaScript 才能起作用。具体来说，这些组件依赖 jQuery、Popper 以及我们自己开发的 JavaScript 插件。

复制下面的 <script> 标签粘贴到页面底部，并且是在 </body> 标签之前，就能起作用了。

2.1、集成包

Bootstrap包含Popper

<script src="./js/jquery-3.6.0.min.js"></script>
<script src="./js/bootstrap.bundle.min.js" integrity="sha384-E5Sj1saJVFNzWWK3YIJB4LEDEEVEGaOdfmCprPDkfWUo+xkb6Ep52Q1TMEtgcFwi" crossorigin="anonymous"></script>

2.2、分开加载

务必按如下顺序加载。

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-IjeXbuVdL81ilB5LykkImU8JN0WPja/i9uZAt2qjo2TnYk9NJ2MPfN3vzMH0R8n3" crossorigin="anonymous"></script>

3、HTML5 文档类型（doctype）

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

<!doctype html>
<html lang="zh-CN">
  ...
</html>

4、响应式布局相关的标签

Bootstrap 采用的是移动设备优先（mobile first）的开发策略，因此，我们首先为移动设备优化代码，然后根据需要并利用 CSS 媒体查询功能来缩放组件。为了确保所有设备都能支持正确的渲染和触屏缩放，请务必在 <head> 标签中添加让 viewport（视口）支持响应式布局的标签。

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

5、CSS 盒模型

为了让 CSS 中的尺寸设置更加直观，我们将全局的 box-sizing 从 content-box 调整为 border-box。

在为数不多的情况下，你需要专门覆盖这一些设置，可以使用如下示例代码：

.selector-for-some-widget {
  box-sizing: content-box;
}

6、支持的浏览器

支持 Internet Explorer 10-11 / Microsoft Edge 浏览器。

895500Bootstrap系列之初始化

Bootstrap系列之初始化