Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。
Bootstrap5 目前是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 开发的开源工具集。它支持 Sass 变量和 mixins、响应式网格系统、大量的预建组件和强大的 JavaScript 插件，助你快速设计和自定义响应式、移动设备优先的站点。

Bootstrap5 安装使用

Bootstrap 5 CDN

国内推荐使用 Staticfile CDN 上的库：

  1. <!-- 新 Bootstrap5 核心 CSS 文件 -->
  2. <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
  4. <!--  popper.min.js 用于弹窗、提示、下拉菜单 -->
  5. <script src="https://cdn.staticfile.org/popper.js/2.9.3/umd/popper.min.js"></script>
  7. <!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
  8. <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script>

bootstrap.bundle.js （未压缩版）或 bootstrap.bundle.min.js（压缩版） 包含了捆绑的插件如 popper.min.js 及其他依赖脚本，所以我们也可以直接使用以下代码：

  1. <!-- 新 Bootstrap5 核心 CSS 文件 -->
  2. <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
  4. <!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
  5. <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>

下载 Bootstrap 5

你可以去官网 https://getbootstrap.com/ 下载 Bootstrap5 资源库。

创建第一个 Bootstrap 5 页面

1、添加 HTML5 doctype

Bootstrap 要求使用 HTML5 文件类型，所以需要添加 HTML5 doctype 声明。
HTML5 doctype 在文档头部声明，并设置对应编码:

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8"> 
  5.   </head>
  6. </html>

移动设备优先

为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，如下所示：

  1. <meta name="viewport" content="width=device-width, initial-scale=1">

width=device-width 表示宽度是设备屏幕的宽度。
initial-scale=1 表示初始的缩放比例。

Bootstrap5 容器

Bootstrap 需要一个容器元素来包裹网站的内容。
我们可以使用以下两个容器类：

  • .container 类用于固定宽度并支持响应式布局的容器。
  • .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

image.png

固定宽度

.container 类用于创建固定宽度的响应式页面。
注意：宽度 (max-width) 会根据屏幕宽度同比例放大或缩小。

超级小屏幕
<576px		 小屏幕
≥576px		 中等屏幕
≥768px		 大屏幕
≥992px		 特大屏幕
≥1200px		 超级大屏幕
≥1400px
max-width 100% 540px 720px 960px 1140px 1320px

注意：超级大屏幕 (≥1400px) 是 Bootstrap 5 新增加的， Bootstrap 4 最大的是特大屏幕 (≥1200px)。

100% 宽度

.container-fluid 类用于创建一个全屏幕尺寸的容器，容器始终跨越整个屏幕宽度（width 始终为 100%）：

容器内边距

默认情况下，容器都有填充左右内边距，顶部和底部没有填充内边距。 Bootstrap 提供了一些间距类用于填充边距。 比如 .pt-5 就是用于填充顶部内边距：

  1. <div class="container pt-5"></div>

容器的边框和颜色

Bootstrap 也提供了一些边框（border）和颜色（bg-dark、bg-primary等）类用于设置容器的样式：

  1. <div class="container p-5 my-5 border"></div>
  3. <div class="container p-5 my-5 bg-dark text-white"></div>
  5. <div class="container p-5 my-5 bg-primary text-white"></div>

后面章节我们会详细说明这些样式。

响应式容器

你可以使用 .container-sm|md|lg|xl 类来创建响应式容器。
容器的 max-width 属性值会根据屏幕的大小来改变。

Class 超小屏幕
<576px		 小屏幕
≥576px		 中等屏幕
≥768px		 大屏幕
≥992px		 特大屏幕
≥1200px		 超级大屏幕
≥1400px
.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 
  1. <div class="container-sm">.container-sm</div>
  2. <div class="container-md">.container-md</div>
  3. <div class="container-lg">.container-lg</div>
  4. <div class="container-xl">.container-xl</div>
  5. <div class="container-xxl">.container-xxl</div>

``

Bootstrap5 网格系统

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。
我们也可以根据自己的需要，定义列数：

1 1 1 1 1 1 1 1 1 1 1 1
4 4 4
4 8
6 6
12

Bootstrap 5 的网格系统是响应式的，列会根据屏幕大小自动重新排列。
请确保每一行中列的总和等于或小于 12。

网格类

Bootstrap 5 网格系统有以下 6 个类:

  • .col- 针对所有设备。
  • .col-sm- 平板 - 屏幕宽度等于或大于 576px。
  • .col-md- 桌面显示器 - 屏幕宽度等于或大于 768px。
  • .col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px。
  • .col-xl- 特大桌面显示器 - 屏幕宽度等于或大于 1200px。

  • .col-xxl- 超大桌面显示器 - 屏幕宽度等于或大于 1400px。

    网格系统规则

    Bootstrap5 网格系统规则:

  • 网格每一行需要放在设置了 .container (固定宽度) 或 .container-fluid (全屏宽度) 类的容器中，这样就可以自动设置一些外边距与内边距。

  • 使用行来创建水平的列组。
  • 内容需要放置在列中，并且只有列可以是行的直接子节点。
  • 预定义的类如 .row 和 .col-sm-4 可用于快速制作网格布局。
  • 列通过填充创建列内容之间的间隙。 这个间隙是通过 .rows 类上的负边距设置第一行和最后一列的偏移。
  • 网格列是通过跨越指定的 12 个列来创建。 例如，设置三个相等的列，需要使用三个 .col-sm-4 来设置。
  • Bootstrap 5 和 Bootstrap 4 使用 flexbox（弹性盒子） 而不是浮动。 Flexbox 的一大优势是，没有指定宽度的网格列将自动设置为等宽与等高列 。 如果您想了解有关 Flexbox 的更多信息，可以阅读我们的 CSS Flexbox 教程 。

下表总结了 Bootstrap 网格系统如何在不同设备上工作的：

超小设备
<576px		 平板
≥576px		 桌面显示器
≥768px		 大桌面显示器
≥992px		 特大桌面显示器
≥1200px		 超大桌面显示器
≥1400px
容器最大宽度 None (auto) 540px 720px 960px 1140px 1320px
类前缀 .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
列数量和 12
间隙宽度 1.5rem （一个列的每边分别 .75rem）
可嵌套 Yes
列排序 Yes

我们将上述的类组合使用，从而创建更灵活的页面布局。
提示：每个类都是按比例放大的，所以如果你想设置 sm 和 md 具有相同的宽度，你只需要指定 sm 即可。

Bootstrap 5 网格的基本结构

以下代码为 Bootstrap 5 网格的基本结构:

  1. <!-- 第一个例子：控制列的宽度及在不同的设备上如何显示 -->
  2. <div class="row">
  3.   <div class="col-*-*"></div>
  4. </div>
  5. <div class="row">
  6.   <div class="col-*-*"></div>
  7.   <div class="col-*-*"></div>
  8.   <div class="col-*-*"></div>
  9. </div>
  11. <!-- 第二个例子：或让 Bootstrap 者自动处理布局 -->
  12. <div class="row">
  13.   <div class="col"></div>
  14.   <div class="col"></div>
  15.   <div class="col"></div>
  16. </div>

第一个例子：创建一行(

)。然后， 添加需要的列( .col-- 类中设置)。 第一个星号 () 表示响应的设备: sm, md, lg 或 xl, 第二个星号 () 表示一个数字, 同一行的数字相加为 12。
第二个例子: 不在每个 col 上添加数字，让 bootstrap 自动处理布局，同一行的每个列宽度相等： 两个 “col” ，每个就为 50% 的宽度。三个 “col”每个就为 33.33% 的宽度，四个 “col”每个就为 25% 的宽度，以此类推。同样，你可以使用 .col-sm|md|lg|xl 来设置列的响应规则。
接下来我们可以看看实例。

创建相等宽度的列，Bootstrap 自动布局

  1. <div class="row">
  2.   <div class="col">.col</div>
  3.   <div class="col">.col</div>
  4.   <div class="col">.col</div>
  5. </div>

等宽响应式列

以下实例演示了如何在平板及更大屏幕上创建等宽度的响应式列。 在移动设备上，即屏幕宽度小于 576px 时，四个列将会上下堆叠排版:

  1. <div class="col-sm-3">.col-sm-3</div>
  2. <div class="col-sm-3">.col-sm-3</div>
  3. <div class="col-sm-3">.col-sm-3</div>
  4. <div class="col-sm-3">.col-sm-3</div>

不等宽响应式列

以下实例演示了在平板及更大屏幕上创建不等宽度的响应式列。 在移动设备上，即屏幕宽度小于 576px 时，两个列将会上下堆叠排版:

  1. <div class="row">
  2.   <div class="col-sm-4">.col-sm-4</div>
  3.   <div class="col-sm-8">.col-sm-8</div>
  4. </div>

设置某一列宽度

如果只设置一列的宽度，其他列会自动均分剩下的宽度。 以下实例将列宽度为 25%、50%、25%：

  1. <div class="row">
  2.   <div class="col">col</div>
  3.   <div class="col-6">col-6</div>
  4.   <div class="col">col</div>
  5. </div>

平板和桌面端

以下实例演示了在桌面设备的显示器上两个列的宽度各占 50%，如果在平板端则左边的宽度为 25%，右边的宽度为 75%, 在移动手机等小型设备上会堆叠显示。

  1. <div class="container-fluid">
  2.   <div class="row">
  3.     <div class="col-sm-3 col-md-6">
  4.       <p>RUNOOB</p>
  5.     </div>
  6.     <div class="col-sm-9 col-md-6">
  7.       <p>菜鸟教程</p>
  8.     </div>
  9.   </div>
  10. </div>

平板、桌面、大桌面显示器、超大桌面显示器

以下实例在平板、桌面、大桌面显示器、超大桌面显示器的宽度比例为分别为：25%/75%、50%/50%、33.33%/66.67%、16.67/83.33%, 在移动手机等小型设备上会堆叠显示。

  1. <div class="row">
  2.     <div class="col-sm-3 col-md-6 col-lg-4 col-xl-2 p-3 bg-primary text-white">.col</div>
  3.     <div class="col-sm-9 col-md-6 col-lg-8 col-xl-10 p-3 bg-dark text-white">.col</div>
  4. </div>

嵌套列

以下实例创建两列布局，其中一列内嵌套着另外两列：

  1. <div class="row">
  2.   <div class="col-8">
  3.     .col-8
  4.     <div class="row">
  5.       <div class="col-6">.col-6</div>
  6.       <div class="col-6">.col-6</div>
  7.     </div>
  8.   </div>
  9.   <div class="col-4">.col-4</div>
  10. </div>

image.png

偏移列

偏移列通过 offset-- 类来设置。第一个星号( )可以是 sm、md、lg、xl，表示屏幕设备类型，第二个星号( )可以是 1 到 11 的数字。
为了在大屏幕显示器上使用偏移，请使用 .offset-md-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。
例如：.offset-md-4 是把.col-md-4 往右移了四列格。

  1. <div class="row">
  2.   <div class="col-md-4">.col-md-4</div>
  3.   <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
  4. </div>
  5. <div class="row">
  6.   <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  7.   <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  8. </div>
  9. <div class="row">
  10.   <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
  11. </div>

Bootstrap5 文字排版

Bootstrap 5 默认设置

Bootstrap 5 默认的 font-size 为 16px, line-height 为 1.5。
默认的 font-family 为 “Helvetica Neue”, Helvetica, Arial, sans-serif。
此外，所有的

元素 margin-top: 0 、 margin-bottom: 1rem (16px)。

Bootstrap5 导航栏

导航栏一般放在页面的顶部。
我们可以使用 .navbar 类来创建一个标准的导航栏，后面紧跟: .navbar-expand-xxl|xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)。
导航栏上的选项可以使用

    元素并添加 class=”navbar-nav” 类。 然后在
  • 元素上添加 .nav-item 类， 元素上使用 .nav-link 类:

    1. <!-- 小屏幕上水平导航栏会切换为垂直的 -->
    2. <nav class="navbar navbar-expand-sm bg-light">
    4.   <!-- Links -->
    5.   <ul class="navbar-nav">
    6.     <li class="nav-item">
    7.       <a class="nav-link" href="#">Link 1</a>
    8.     </li>
    9.     <li class="nav-item">
    10.       <a class="nav-link" href="#">Link 2</a>
    11.     </li>
    12.     <li class="nav-item">
    13.       <a class="nav-link" href="#">Link 3</a>
    14.     </li>
    15.   </ul>
    16. </nav>

    垂直导航栏

    通过删除 .navbar-expand-xxl|xl|lg|md|sm 类来创建垂直导航栏:

    1. <!-- 垂直导航栏 -->
    2. <nav class="navbar bg-light">
    4.   <!-- Links -->
    5.   <ul class="navbar-nav">
    6.     <li class="nav-item">
    7.       <a class="nav-link" href="#">Link 1</a>
    8.     </li>
    9.     <li class="nav-item">
    10.       <a class="nav-link" href="#">Link 2</a>
    11.     </li>
    12.     <li class="nav-item">
    13.       <a class="nav-link" href="#">Link 3</a>
    14.     </li>
    15.   </ul>
    17. </nav>

    居中对齐的导航栏

    通过添加 .justify-content-center 类来创建居中对齐的导航栏

    不同颜色导航栏

    可以使用以下类来创建不同颜色导航栏：.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light)。
    提示: 对于暗色背景 .navbar-dark 需要设置文本颜色为浅色的，对于浅色背景 .navbar-light 需要设置文本颜色为深色的。
    激活和禁用状态: 可以在 元素上添加 .active 类来高亮显示选中的选项。 .disabled 类用于设置该链接是不可点击的。

    品牌/Logo

    .navbar-brand 类用于高亮显示品牌/Logo:

    <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <a class="navbar-brand" href="#">Logo</a>
  ...
</nav>

    折叠导航栏

    通常，小屏幕上我们都会折叠导航栏，通过点击来显示导航选项。
    要创建折叠导航栏，可以在按钮上添加 class=”navbar-toggler”, data-bs-toggle=”collapse” 与 data-target=”#thetarget“ 类。然后在设置了 class=”collapse navbar-collapse” 类的 div 上包裹导航内容（链接）, div 元素上的 id 匹配按钮 data-target 的上指定的 id:

    <nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <!-- Brand -->
  <a class="navbar-brand" href="#">Navbar</a>

  <!-- Toggler/collapsibe Button -->
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>

  <!-- Navbar links -->
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li> 
    </ul>
  </div> 
</nav>

    导航栏使用下拉菜单

    导航栏上可以设置下拉菜单：

    <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <!-- Brand -->
  <a class="navbar-brand" href="#">Logo</a>

  <!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>

    <!-- Dropdown -->
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-bs-toggle="dropdown">
        Dropdown link
      </a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Link 1</a>
        <a class="dropdown-item" href="#">Link 2</a>
        <a class="dropdown-item" href="#">Link 3</a>
      </div>
    </li>
  </ul>
</nav>

    固定导航栏

    导航栏可以固定在头部或者底部。
    我们使用 .fixed-top 类来实现导航栏的固定

    Bootstrap5 轮播

    如何创建轮播

    以下实例创建了一个简单的图片轮播效果 ：

    <!-- 轮播 -->
<div id="demo" class="carousel slide" data-bs-ride="carousel">

   <!-- 指示符 -->
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
    <button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
    <button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
  </div>

  <!-- 轮播图片 -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://static.runoob.com/images/mix/img_fjords_wide.jpg" class="d-block" style="width:100%">
    </div>
    <div class="carousel-item">
      <img src="https://static.runoob.com/images/mix/img_nature_wide.jpg" class="d-block" style="width:100%">
    </div>
    <div class="carousel-item">
      <img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg" class="d-block" style="width:100%">
    </div>
  </div>

  <!-- 左右切换按钮 -->
  <button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
  </button>
</div>

    以上实例中使用的类说明

    类 描述
    .carousel 创建一个轮播
    .carousel-indicators 为轮播添加一个指示符，就是轮播图底下的一个个小点，轮播的过程可以显示目前是第几张图。
    .carousel-inner 添加要切换的图片
    .carousel-item 指定每个图片的内容
    .carousel-control-prev 添加左侧的按钮，点击会返回上一张。
    .carousel-control-next 添加右侧按钮，点击会切换到下一张。
    .carousel-control-prev-icon 与 .carousel-control-prev 一起使用，设置左侧的按钮
    .carousel-control-next-icon 与 .carousel-control-next 一起使用，设置右侧的按钮
    .slide 切换图片的过渡和动画效果，如果你不需要这样的效果，可以删除这个类。

    Bootstrap5 Flex（弹性）布局

    Bootstrap5 通过 flex 类来控制页面的布局。

    弹性盒子(flexbox)

    Bootstrap 3 与 Bootstrap 4/5 最大的区别就是 Bootstrap 4/5 使用弹性盒子来布局，而不是使用浮动来布局。
    以下实例使用 d-flex 类创建一个弹性盒子容器，并设置三个弹性子元素：

    <div class="d-flex p-3 bg-secondary text-white">
  <div class="p-2 bg-info">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 bg-primary">Flex item 3</div>
</div>

    创建显示在同一行上的弹性盒子容器可以使用 d-inline-flex 类

    水平方向

    .flex-row 可以设置弹性子元素水平显示，这是默认的。
    使用 .flex-row-reverse 类用于设置右对齐显示，即与 .flex-row 方向相反。

    垂直方向

    .flex-column 类用于设置弹性子元素垂直方向显示, .flex-column-reverse 用于翻转子元素

    内容排列

    .justify-content-* 类用于修改弹性子元素的排列方式，* 号允许的值有：start (默认), end, center, between 或 around

    等宽

    .flex-fill 类强制设置各个弹性子元素的宽度是一样的

    扩展

    .flex-grow-1 用于设置子元素使用剩下的空间。以下实例中前面两个子元素只设置了它们所需要的空间，最后一个获取剩余空间。

    排序

    .order 类可以设置弹性子元素的排序，从 .order-1 到 .order-12，数字越低权重越高( .order-1 排在 .order-2 之前)

    外边距

    .ms-auto 类可以设置子元素右外边距为 auto，即 margin-right: auto!important;，.me-auto 类可以设置子元素左外边距为 auto，即 margin-left: auto!important;

    包裹

    弹性容器中包裹子元素可以使用以下三个类： .flex-nowrap (默认), .flex-wrap 或 .flex-wrap-reverse。设置 flex 容器是单行或者多行。

    内容对齐

    我们可以使用 .align-content-* 来控制在垂直方向上如何去堆叠子元素，包含的值有：.align-content-start (默认), .align-content-end, .align-content-center, .align-content-between, .align-content-around 和 .align-content-stretch。
    这些类在只有一行的弹性子元素中是无效的。

    子元素对齐

    如果要设置单行的子元素对齐可以使用 .align-items-* 类来控制，包含的值有：.align-items-start, .align-items-end, .align-items-center, .align-items-baseline, 和 .align-items-stretch (默认)。

    指定子元素对齐

    如果要设置指定子元素对齐对齐可以使用 .align-self-* 类来控制，包含的值有：.align-self-start, .align-self-end, .align-self-center, .align-self-baseline, 和 .align-self-stretch (默认)。