轻松上手Bootstrap框架

Polaris_o2026-01-06 18:47

什么是Bootstrap

Bootstrap 是一个用于快速开发Web应用程序和网站的前端框架，Bootstrap是前端开发中比较受欢迎的框架，简洁且灵活，它基于HTML、CSS和JavaScript。Bootscript将HTML、CSS和JavaScript中不同的应用场景封装成了一个一个的功能组件，用起来简洁灵活，使得Web开发更加快捷。

  • 浏览器兼容性：Bootstrap在大多数浏览器都能够正常显示和运行的，只有极少数浏览器或者低版本浏览器不适配具体可在Bootstrap官网查看

本文参考Bootstrap5来进行介绍，Bootstrap5利用Sass变量和大量的mixin、响应式布局、可扩展的预制组件、基于jQuery的强大插件系统，能够快速为我们开发出原型或者构建整个app。

Bootstrap安装

Bootstrap提供了很多中安装方式，官网直接下载生产文件、node.js进行安装等等方式。

官网下载Bootstrap

Bootstrap官网：v5.bootcss.com/docs/gettin...

下载了Bootstrap后我们需要进行解压缩，解压缩后我们就可以看到Bootstrap的 css 和 js 文件，在这两个目录中我们只需要分别引入 css 目录中的<font style="color:rgb(214, 51, 132);">bootstrap.min.css</font>和 js 目录中的<font style="color:rgb(214, 51, 132);">bootstrap.bundle.min.js</font>就行了。

html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Polaris</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
  </head>
  <body>
    <button class="text-primary-emphasis text-bg-warning">Hello Bootstrap!</button>
    <script src="./js/bootstrap.bundle.min.js"></script>
  </body>
</html>

通过node来安装Bootstrap

Bootstrap还提供了node安装方法我们只需要在对于的命令行中输入 npm install bootstrap，注意Bootstrap是基于 sass 的我们还需要安装 sass(npm install sass) 来确保我们的所需的样式没有任何问题。

plain 复制代码 
npm install bootstrap sass

然后我们在对于的文件中引入我们的Bootstrap文件即可。

javascript 复制代码 
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import "bootstrap"
import "bootstrap/dist/css/bootstrap.min.css"

createApp(App).mount('#app')

Bootstrap 容器

容器是Bootstrap中最基本的布局元素，它包含、填充和对齐给定设备或视口中的内容。Bootstrap提供了三种不同的容器：

  • .container：它用于固定宽度并支持响应式布局。
  • .container-{breakpoint}：它占据100%的宽度，直到breakpoint为止。
  • .container-fluid：它占据全部视口的容器。

默认容器 cantainer

默认容器 cantainer 是一个响应式、固定宽度的容器，它会在每一个断点处发生变化，使我们的容器能够适应不同的环境。

html 复制代码 
<div class="container">
  <h1>这是container</h1>
</div>

响应式容器 cantainer-{xxx}

响应式容器允许你指定一个类，在到达指定类之前宽度为100%，之后宽度会随着断点的更改更换不同的宽度。

html 复制代码 
<div class="container-xxl">
  <h1>这是container-xxl</h1>
</div>

液体容器 cantainer-fluid

液体容器用作全宽容器，不管断点如何更改始终占据100%宽度。

html 复制代码 
<div class="container-fluid">
  <h1>这是container-fluid</h1>
</div>

Bootstrap 网格

Bootstrap 的网格系统使用一系列的列容器、行和列来布局和对齐内容，它基于Flexbox构建。网格系统每行提供12个模板列，我们可以创建跨越任意列数的各种元素组合。列类指示要跨越的模板列数。

网格选项

Bootstrap 的网格系统可以适配所有六个默认断点以及我们自定义的任何断点，六个默认网格层级如下：

  • 特小号 (XS)
  • 小号 (sm)
  • 中等 (md)
  • 大号 (lg)
  • 特大号 (XL)
  • 特大号 (XXL)

如上所述，每一个断点都有其自身的容器、唯一类前缀和修饰符，以下是网格在这些断点处变化的情况：

响应式类

Bootstrap 的网格系统包含六层预定义的类，用于构建复杂的响应式布局。您可以根据需要，在超小、小、中、大或超大设备上自定义列的大小。

等宽

我们可以根据需要为每一个断点添加任意数量的无单位类，这样每列的宽度都会相同。

html 复制代码 
<div class="container  mt-10">
      <div class="row text-center">
        <div class="col">
            1/3
        </div>
        <div class="col-6">
            1/3
        </div>
        <div class="col">
            1/3
        </div>
    </div>
</div>
<div class="container mt-10">
    <div class="row text-center">
        <div class="col">
            1/4
        </div>
        <div class="col">
            1/4
        </div>
        <div class="col">
            1/4
        </div>
        <div class="col">
            1/4
        </div>
    </div>
</div>

上面代码效果就是将第一行每列占据 1 / 3 的比例来显示，第二行每列占据 1 / 4 来显示。效果如下：

设置列宽

Bootstrap 除了上述的列等宽，我们还可以对某一列进行单独的设置大小，其他列会随着某一列的调整自动改变它的大小。

html 复制代码 
<div class="container  mt-10">
    <div class="row text-center">
        <div class="col-2">
            1/3
        </div>
        <div class="col-8">
            2/3
        </div>
        <div class="col-2">
            1/3
        </div>
    </div>
</div>

上面代码效果如下：

可变宽度内容

Bootstrap 还可以通过 col-{xxx}-auto类来根据内容的自然宽度调整列宽。

html 复制代码 
<div class="container  mt-10">
    <div class="row text-center">
        <div class="col col-lg-2">
            1/3
        </div>
        <div class="col-md-auto">
            根据内容调整宽度
        </div>
        <div class="col col-lg-2">
            1/3
        </div>
    </div>
</div>

效果如下：

堆叠至水平

我们可以使用 .col-{xxx}-* 来设置到某一个断点后布局变为水平。此次我们用 .col-lg-* 类来举例，当我们视口小于992px时布局会变为水平

html 复制代码 
<div class="container  mt-10">
    <div class="row text-center">
        <div class="col-lg-4">
            第一份
        </div>
        <div class="col-lg-4">
            第二份
        </div>
        <div class="col-lg-4">
            第三份
        </div>
    </div>
</div>

效果如下：

混搭

我们还可以通过设置多个类来实现在不同的断点中展现出不同的效果，此处还是拿 .col-lg-*来举例。

html 复制代码 
<div class="container mt-10">
    <div class="row text-center">
        <div class="col-6 col-lg-3">
            1/4
        </div>
        <div class="col-6 col-lg-3">
            1/4
        </div>
        <div class="col-6 col-lg-3">
            1/4
        </div>
        <div class="col-6 col-lg-3">
            1/4
        </div>
    </div>
</div>

在我们视口大于992px时我们每一个列宽是占据 1 / 4的，效果如下:

当我们视口小于992px时我们的列宽会变成 1 / 2的宽度，效果如下：

行列

我们还可以通过.row-cols-*类来快速的设置最适合我们内容和布局的列数。

html 复制代码 
<div class="container mt-10">
    <div class="row text-center row-cols-2  ">
        <div class="col">
            1/4
        </div>
        <div class="col">
            1/4
        </div>
        <div class="col">
            1/4
        </div>
        <div class="col">
            1/4
        </div>
    </div>
</div>

效果如下：

偏移列

在各种为沾满整个视口使，我们想让格子中有一个的距离我们就可以使用offset-*-*来设置偏移多少个格子。

html 复制代码 
<div class="container mt-10">
    <div class="row text-center row-cols-3  ">
        <div class="col-3">
            col-3
        </div>
        <div class="col-5 offset-2">
            col-5
        </div>
    </div>
</div>

效果图如下：

排序

在网格中我们想让后面的网格显示到我们网格最前面，我们就可以通过order-*来进行设置，但是我们的排序数字是 1-5 这个区间还支持 order-first 和 order-last，且 order-first和 orde-last的优先级高于数字区间。

html 复制代码 
<div class="container mt-10">
    <div class="row text-center row-cols-3  ">
        <div class="col">
            1
        </div>
        <div class="col order-2">
            2
        </div>
        <div class="col order-1">
            3
        </div>
    </div>
</div>

效果如下：

Bootstrap 标签属性

默认标题

我们知道HTML中有<h1-6>标题标签，在Bootstrap中我们有<h1-6>类来设置标签。

html 复制代码 
<h1>HTML标题</h1>
<p class="h1">Bootstrap标题</p>

效果如下：

Display 标题

另外Bootstrap 还提供了 Display 标题来更突出更大的标题。

html 复制代码 
<h1 class="display-1">Display 标题</h1>

效果如下：

段落

放大

此外还提供了突出段落类lead类来让我们的段落更大更突出。

html 复制代码 
<p>这是一个段落</p>
<p class="lead">这是另一个段落</p>

效果如下：

缩小

除了突出段落，还有缩小段落small类来将我们的文字变得更小。(注：此处的缩小是整个对父元素的缩小)

html 复制代码 
<small>这是缩小文字</small>
<small>
  <div class="small">这是另外一个缩小文字</div>
</small>

效果如下：

颜色变浅

我们还可以通过 text-muted来将文字变小颜色变浅。

html 复制代码 
<small>这是缩小文字</small>
<small>
    <div class="text-muted">这是另外一个缩小文字</div>
</small>

效果如下：

文本

默认对齐方式

Bootstrapp 还提供了 text-start 、text-center 和 text-end来设置文本对齐方式

响应式文本对齐

Bootstrap 还提供了响应式对齐方式，根据不同的屏幕来设置不同的对齐方式。我们可以在text-{xxx}-center来进行对齐。

html 复制代码 
<p class="text-lg-center">对齐方式</p>

当视口大于992px时居中对齐：

当视口小于992px时默认对齐：

文本转换

Bootstrap还提供将文本转换为小写、大写、设定单词首字母大写等。

  • .text-lowercase：设定文本小写
  • .text-uppercase：设定文本小写
  • .text-capitalize：设定单词首字母大写

截断长文本

对于较长的文本，可以通过类 .text-truncate用省略号阶段文本，

html 复制代码 
<div class="container  mt-10">
    <div class="row text-center">
        <div class="col-lg-4 text-truncate">
            这是一段很长很长很长很长很长很长很长很长很长很长很长
        </div>
        <div class="col-lg-4">
            第二份
        </div>
        <div class="col-lg-4">
            第三份
        </div>
    </div>
</div>

效果如下：

文本换行和溢出

我们可以通过.text-wrap来进行自动换行，通过.text-nowrap来阻止换行，但是主要可能会导致溢出问题。

文本大小

Bootstrap默认字体初始字体大小为16px。Bootstrap提供了六类文字大小.fs-1到.fs-6，分别对应标题 h1-h6。

html 复制代码 
<p class="fs-1">这是fs-1</p>
<p class="fs-2">这是fs-2</p>
<p class="fs-3">这是fs-3</p>
<p class="fs-4">这是fs-4</p>
<p class="fs-5">这是fs-5</p>
<p class="fs-6">这是fs-6</p>

效果如下：

字体粗细和倾斜

Bootstrap中控制字体粗细分为了五个类：

  • .fw-bold：粗体文字。
  • .fw-bolder：粗体文字(相对于父元素)。
  • .fw-normal：正常的文字。
  • .fw-light：细体文字。
  • .fw-lighter：细体文字(相对于父元素)。

倾斜提供了两个类：

  • .fst-italic：倾斜文字。
  • .fst-normal：正常的文字。

行间距

Bootstrap 默认行高是1.5 它提供了五种类来定义行高：

  • .lh-1：1rem。
  • .lg-sm：1.25rem。
  • .lh-base：1.5rem。
  • .lh-lg：2rem。

颜色

Bootstrap提供了很多颜色来供我们使用，我们此次只做了解部分有代表意义的颜色：

  • .text-metued：浅灰色。
  • .text-primary：蓝色。
  • .text-success：浅绿色。
  • .text-info：浅蓝色。
  • .text-warning：黄色。
  • .text-danger：红褐色。
  • .text-scondary：灰色。
  • .text-dark：黑暗色。
  • .text-body：黑色。
  • .text-light：淡灰色。
  • .text-white：白色。

背景颜色

Bootstrap 提供了很多背景颜色来供我们使用，此处只列出一部分代表色:

  • .bg-primary：蓝色。
  • .bg-success：浅绿色。
  • .bg-info：浅蓝色。
  • .bg-warning：黄色。
  • .bg-danger：红褐色。
  • .bg-scondary：灰色。
  • .bg-dark：黑暗色。
  • .bg-light：淡灰色。

Bootstrap 列表组

删除默认样式

在HTML中我们有ul li无序列表和 ol li有序列表，我们可以通过类 .list-unstyled来删除列表的默认样式。

html 复制代码 
<ul class="list-unstyled">
  <li>HTML</li>
  <li>CSS</li>
  <li>Bootstrap</li>
</ul>

内联列表

如果要使用有序列表或无序列表创建水平表单，我们可以通过类.list-inline添加到ul或ol上并将类.list-inline-item添加到子li元素来完成此操作。

html 复制代码 
<ul class="list-inline">
  <li class="list-inline-item">HTML</li>
  <li class="list-inline-item">CSS</li>
  <li class="list-inline-item">JS</li>
</ul>

效果如下：

列表组

基础列表

我们可以通过list-group和list-group-item来定义一个列表组。如下：

html 复制代码 
<ul class="list-group">
    <li class="list-group-item">第一项</li>
    <li class="list-group-item">第二项</li>
    <li class="list-group-item">第三项</li>
</ul>

效果如下：

设置禁用和活动项

我们可以将类.active添加到.list-group-item类的后面用来指示当前项目元素是活的的，同意，也可以将.disabled添加到后面，使元素看起来是禁用的。

html 复制代码 
<ul class="list-group">
    <li class="list-group-item active">第一项</li>
    <li class="list-group-item">第二项</li>
    <li class="list-group-item disabled">第三项</li>
</ul>

效果图如下：

链接项的列表组

我们可以将li替换为a标签，如果想鼠标悬停显示灰色背景我们可以添加一个类.list-group-item-action来实现。

html 复制代码 
<ul class="list-group">
    <a class="list-group-item list-group-item-action">第一项</a>
    <a class="list-group-item list-group-item-action">第二项</a>
    <a class="list-group-item list-group-item-action">第三项</ai>
</ul>

效果图如下：

移除列表边框

我们如果想移除列表边框的话我们可以通过类 .list-group-flush添加到 .list-group用于移除外边框和圆角。

html 复制代码 
<ul class="list-group list-group-flush">
    <a class="list-group-item list-group-item-action">第一项</a>
    <a class="list-group-item list-group-item-action">第二项</a>
    <a class="list-group-item list-group-item-action">第三项</ai>
</ul>

效果图如下：

水平显示

如果想水平显示列表我们可以通过.list-group-horizontal类添加到.list-group来将我们的列表水平显示。

html 复制代码 
<ul class="list-group list-group-horizontal">
    <a class="list-group-item list-group-item-action">第一项</a>
    <a class="list-group-item list-group-item-action">第二项</a>
    <a class="list-group-item list-group-item-action">第三项</ai>
</ul>

效果图如下：

创建编号列表组

通过.list-group-numbered类添加到.list-group元素上，我们就可以得到带有编号的列表组。(注：编号是通过css来生产的，而不是列表元素的默认样式)

html 复制代码 
<ul class="list-group list-group-numbered">
        <a class="list-group-item list-group-item-action">第一项</a>
        <a class="list-group-item list-group-item-action">第二项</a>
        <a class="list-group-item list-group-item-action">第三项</ai>
    </ul>

效果图如下：

带徽章的列表组

我们还可以将Bootstrap中的徽章组件和列表组合起来。只需要在.list-group-item的基础上追加徽章组件"badge"。

html 复制代码 
<ul class="list-group list-group-numbered">
    <a class="list-group-item list-group-item-action">
        第一项
        <small class="badge bg-primary">
            hot
        </small>
    </a>
    <a class="list-group-item list-group-item-action">第二项</a>
    <a class="list-group-item list-group-item-action">第三项</ai>
</ul>

效果图如下：

列表组背景颜色

跟大多数其他组件一样，可以在列表组上添加相应的类来进行颜色调整：

  • .list-group-item-primary：蓝色。
  • .list-group-item-success：浅绿色。
  • .list-group-item-info：浅蓝色。
  • .list-group-item-warning：黄色。
  • .list-group-item-danger：红褐色。
  • .list-group-item-scondary：灰色。
  • .list-group-item-dark：黑暗色。
  • .list-group-item-light：淡灰色。

自定义列表内容

我们可以通过.list-group-item-heading用于定义列表项头部样式和.list-group-item-text用于定义列表项主要内容，这两个样式主要用于用户自定义列表内容。

html 复制代码 
<div class="container">
  <div class="list-group">
      <a href="#" class="list-group-item">
          <h4 class="list-group-item-heading">Web技术</h4>
      </a>
      <a href="#" class="list-group-item">
          <h3 class="list-group-item-heading">标题</h3>
          <p class="list-grop-item-text">内容 </p>
      </a>
  </div>
</div>

效果图如下：

Bootstrap 徽章

徽章一般用于在网页上标明一些有价值的信息，如重要的标签、警告信息等。

创建徽章

徽章(Badges)用于突出显示信息，我们只需要将.badge类加上带指定的颜色到元素上即可，徽章可以根据父元素的大小变化而变化。

html 复制代码 
<div class="container">
    <span class="badge bg-primary">第一个徽章</span>
</div>

效果图如下：

徽章颜色

徽章颜色和大多的颜色一致，只需要在声明了徽章的后面加入颜色即可:

  • .bg-primary：蓝色。
  • .bg-success：浅绿色。
  • .bg-info：浅蓝色。
  • .bg-warning：黄色。
  • .bg-danger：红褐色。
  • .bg-scondary：灰色。
  • .bg-dark：黑暗色。
  • .bg-light：淡灰色。

胶囊徽章

使用.rounded-pill类来设置类似于药丸效果的徽章

html 复制代码 
<div class="container">
    <span class="badge bg-primary">第一个徽章</span>
    <span class="badge bg-primary rounded-pill">胶囊徽章</span>
</div>

效果图如下：

元素内的徽章

我们还可以将元素内添加徽章如我们之前提到的列表项中添加徽章。

html 复制代码 
<ul class="list-group list-group-numbered">
    <a class="list-group-item list-group-item-action">
        第一项
        <small class="badge bg-primary">
            hot
        </small>
    </a>
    <a class="list-group-item list-group-item-action">第二项</a>
    <a class="list-group-item list-group-item-action">第三项</ai>
</ul>

效果图如下：

Bootstrap 表格

创建基础表格

我们可以通过.table类来进行创建一个基础的表格信息。

html 复制代码 
<div class="container">
    <table class="table">
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>18</td>
                <td>男</td>
            </tr>
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>22</td>
                <td>男</td>
            </tr>
        </tbody>
    </table>
</div>

效果图如下：

表格的颜色

通过指定的颜色类名来修改整体表格的样式。

  • .table-primary：蓝色。
  • .table-success：浅绿色。
  • .table-info：浅蓝色。
  • .table-warning：黄色。
  • .table-danger：红褐色。
  • .table-scondary：灰色。
  • .table-dark：黑暗色。
  • .table-light：淡灰色。

带条纹的表格

我们可以通过.table-striped类，可在<tbody>内的杭商看到条纹，即在基础表格的代码上为标签<table>添加.table-striped类。

html 复制代码 
<div class="container">
    <table class="table table-striped">
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>18</td>
                <td>男</td>
            </tr>
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>22</td>
                <td>男</td>
            </tr>
        </tbody>
    </table>
</div>

效果图如下：

表格的边框

我们可以通过.table-bordered来为我们的表格添加边框效果。也可以通过.table-borderless类来取消表格和所有边的边框。

html 复制代码 
<div class="container">
    <table class="table table-bordered table-striped">
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>18</td>
                <td>男</td>
            </tr>
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>22</td>
                <td>男</td>
            </tr>
        </tbody>
    </table>
</div>

效果图如下：

鼠标悬停表格

我们还可以通过.table-hover类来为我们表格每一行添加鼠标悬停效果：

html 复制代码 
<div class="container">
    <table class="table table-hover table-borderless">
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>18</td>
                <td>男</td>
            </tr>
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>22</td>
                <td>男</td>
            </tr>
        </tbody>
    </table>
</div>

效果图如下：

较小的表格

我们可以通过.table-sm类来剑豪内边距从而使得我们的表格更紧凑并节省空间。

html 复制代码 
<div class="container">
    <table class="table table-sm">
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>18</td>
                <td>男</td>
            </tr>
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>22</td>
                <td>男</td>
            </tr>
        </tbody>
    </table>
</div>

效果图如下：

响应式表格

我们想使我们的表格具备响应式，只需要将.table元素包裹在.table-responsive元素内，即可使表格具备响应式效果，还可以使用类.table-responsive-{sm | md | lg | xl}根据视口调整何时具备滚动条。

Bootstrap 图像

圆角图片

.rounded为图片添加圆角：

html 复制代码 
<img src="./1.png" class="rounded" width="200" height="300">

效果图如下：

圆形

.rounded-circle类可以设置椭圆形图片：

html 复制代码 
<img src="./1.png" class="rounded-circle" width="200" height="300">

效果图如下：

缩略图

.img-thumbnail类用于设置图片缩略图：

html 复制代码 
<img src="./1.png" class="img-thumbnail" width="200" height="300">

效果图如下：

对齐图像

我们可以使用.float-start或.float-end将图片实现向左或向右移动。

图像居中

如果想将图片居中我们可以使用.mx-auto和.d-block类来设置图片居中对齐：

html 复制代码 
 <img src="./1.png" class="img-thumbnail mx-auto d-block" width="200" height="300">

效果图如下：

响应式图片

图片有各种各样的尺寸，我们又是需要根据屏幕大小来调整图片，我们可以通过在<img>标签中添加.img-fluid类来设置响应式图片。

html 复制代码 
<img src="./1.png" class="img-thumbnail img-fluid" width="899" height="900">

效果图如下：

Bootstap 按钮

基础按钮

Bootstrap 按钮内置了几种预定义的按钮样式，并添加了额外的一些按钮，然后带有.btn的元素都会基础圆角按钮的默认外观。

html 复制代码 
<button type="button" class="btn">基本按钮</button>
<button type="button" class="btn btn-primary">主要按钮</button>
<button type="button" class="btn btn-secondary">次要按钮</button>
<button type="button" class="btn btn-success">成功</button>
<button type="button" class="btn btn-info">信息</button>
<button type="button" class="btn btn-warning">警告</button>
<button type="button" class="btn btn-danger">危险</button>
<button type="button" class="btn btn-dark">黑色</button>
<button type="button" class="btn btn-light">浅色</button>
<button type="button" class="btn btn-link">链接</button>

效果图如下：

按钮类可用于 a、button或input标签元素上：

html 复制代码 
<a href="#" class="btn btn-success">链接按钮</a>
<input type="button" class="btn btn-success" value="输入按钮">
<button type="button" class="btn">基本按钮</button>

效果图如下：

按钮边框

Bootstrap 还提供了八个边框按钮，鼠标移动到按钮上突出显示：

html 复制代码 
<button type="button" class="btn btn-outline-primary">主要按钮</button>
<button type="button" class="btn btn-outline-secondary">次要按钮</button>
<button type="button" class="btn btn-outline-success">成功</button>
<button type="button" class="btn btn-outline-info">信息</button>
<button type="button" class="btn btn-outline-warning">警告</button>
<button type="button" class="btn btn-outline-danger">危险</button>
<button type="button" class="btn btn-outline-dark">黑色</button>
<button type="button" class="btn btn-outline-light">浅色</button>
<button type="button" class="btn btn-outline-link">链接</button>

效果图如下：

按钮尺寸

我们可以通过.btn-lg和.btn-small类来分别设置大按钮和小按钮

html 复制代码 
<button type="button" class="btn btn-lg btn-outline-primary">主要按钮</button>
<button type="button" class="btn btn-sm btn-outline-secondary">次要按钮</button>

效果图如下：

块级按钮

如果需要跨越父元素整个宽度的块级按钮，通过添加.btn-block类可以设置块级按钮，.d-grid类设置在父元素中：

html 复制代码 
<div class="d-grid">
    <button type="button" class="btn btn-block btn-outline-success">成功</button>
</div>

效果图如下：

按钮活动/禁止

我们可以通过.actiove类和 disabled属性来控制按钮是不是可以点击的。(注：a标签不支持disabled属性，我们可以通过.disabled类来进行禁止链接点击)

html 复制代码 
<a href="#" class="btn btn-success disabled">链接按钮</a>
<input type="button" class="btn btn-success" disabled value="输入按钮">
<button type="button" class="btn btn-outline-success" disabled>成功</button>

效果图如下：

按钮组

基本按钮组

创建一个按钮组，我们只需要将具有.btn按钮包装在div标签元素中，然后在其上应用.btn-group类，还可以在单个按钮上应用.active类来表明活跃状态。

html 复制代码 
<div class="btn-group">
    <button type="button" class="btn btn-outline-primary active">主要按钮</button>
    <button type="button" class="btn btn-outline-primary">主要按钮</button>
    <button type="button" class="btn btn-outline-primary">主要按钮</button>
</div>

效果图如下：

按钮组的大小

我们可以通过.btn-group-lg | sm | xs来设置按钮的大小，是都整个按钮组的大小调整。

html 复制代码 
<div class="btn-group-lg">
    <button type="button" class="btn btn-outline-primary active">主要按钮</button>
    <button type="button" class="btn btn-outline-primary">主要按钮</button>
    <button type="button" class="btn btn-outline-primary">主要按钮</button>
</div>

效果图如下：

垂直按钮组

我们只需要将.btn-group替换为.btn-group-certical就可以得到一个垂直按钮组。

html 复制代码 
<div class="btn-group-vertical">
    <button type="button" class="btn btn-outline-primary active">主要按钮</button>
    <button type="button" class="btn btn-outline-primary">主要按钮</button>
    <button type="button" class="btn btn-outline-primary">主要按钮</button>
</div>

效果图如下：

Bootstrap 加载器

基础加载器

加载器就是我们在获取一个元素使等待响应的一个加载动画，我们可以使用.spinner-border类来创建一个加载器，我们还可以根据文本颜色类来设置不同的颜色：

html 复制代码 
<div class="spinner-border"></div>
<div class="spinner-border text-warning"></div>

效果图如下：

闪烁加载效果

我们可以通过.spinner-grow类来设置闪烁加载效果：

html 复制代码 
<div class="spinner-grow"></div>
<div class="spinner-border"></div>
<div class="spinner-border text-warning"></div>

效果图如下：

设置加载效果大小

我们可以通过.spinner-border-sm或.spinner-grow-sm来改变加载效果的大小：

html 复制代码 
<div class="spinner-grow spinner-grow-sm"></div>
<div class="spinner-border spinner-border-sm"></div>

效果图如下：

加载按钮

我们还可以在按钮中创建加载效果：

html 复制代码 
<button class="btn btn-primary">
    <span class="spinner-border"></span>
    加载中..
</button>

效果图如下：

Bootstrap 进度条

基础进度条

我们在使用Bootstrap 进度条时我们需要知，Bootstrap进度条分为两层，一层是外部元素使用.progress，用于显示进度条的最大值，一层是内部元素使用.progress-bar，用于指示目前为止的进度。

html 复制代码 
<div class="progress">
    <div class="progress-bar" style="width:50%"></div>
</div>

效果图如下：

进度条高度

我们可以通过给外层.progress来指定其高度高度，默认高度为1rem。

html 复制代码 
<div class="progress" style="height: 1.5rem;">
    <div class="progress-bar" style="width:50%"></div>
</div>

效果图如下：

进度条标签

我们可以在.progress-bar元素内添加文本，以显示可见的百分比。

html 复制代码 
<div class="progress" style="height: 1.5rem;">
    <div class="progress-bar" style="width:50%">
        50%
    </div>
</div>

效果图如下：

进度条颜色

可以使用背景颜色来创建各种颜色的进度条，默认情况下为蓝色进度条。

条纹进度条

通过.progress-bar上添加.progress-bar-striped即可，条纹是通过css渐变生成的可以同不同的背景颜色生成不同的条纹进度条。

html 复制代码 
<div class="progress" style="height: 1.5rem;">
    <div class="progress-bar progress-bar-striped" style="width:50%">
        50%
    </div>
</div>

效果图如下：

进度条动画

将.progress-bar-animated添加到.progress-bar元素上可以为条纹的进度条设置动画。

html 复制代码 
<div class="progress" style="height: 1.5rem;">
    <div class="progress-bar progress-bar-animated progress-bar-striped" style="width:50%">
        50%
    </div>
</div>

效果图如下：

混合色彩进度条

可以在一个进度组件中放多个进度条是它们并排在一起。

html 复制代码 
<div class="progress" style="height: 1.5rem;">
    <div class="progress-bar progress-bar-animated progress-bar-striped" style="width:50%">
        50%
    </div>
    <div class="progress-bar bg-warning progress-bar-animated progress-bar-striped" style="width:20%">
        20%
    </div>
</div>

效果图如下：

Bootstrap 边框

边框类

使用边框类为元素添加或删除内容：

html 复制代码 
<div class="border bg-light border-primary">边框</div>
<div class="border border-3">3边框</div>
<div class="border border-top-0">无顶部边框</div>
<div class="border border-right-0">无右侧边框</div>
<div class="border border-left-0">无左侧边框</div>
<div class="border border-bottom-0">无底部边框</div>
<div class="border-top">顶部边框</div>
<div class="border-end">右侧边框</div>
<div class="border-start">左侧边框</div>
<div class="border-bottom">底部边框</div>

效果图如下：

边框圆角

使用.rounded类为元素添加圆角：

html 复制代码 
<div class="rounded bg-dark" style="width: 100px;margin-top: 10px;">圆角</div>
<div class="rounded-top bg-dark" style="width: 100px;margin-top: 10px;">圆角</div>
<div class="rounded-end bg-dark" style="width: 100px;margin-top: 10px;">圆角</div>
<div class="rounded-bottom bg-dark" style="width: 100px;margin-top: 10px;">圆角</div>
<div class="rounded-start bg-dark" style="width: 100px;margin-top: 10px;">圆角</div>
<div class="rounded-circle bg-dark" style="width: 100px;margin-top: 10px;">圆角</div>
<div class="rounded-pill bg-dark" style="width: 100px;margin-top: 10px;">圆角</div>
<div class="rounded-0 bg-dark" style="width: 100px;margin-top: 10px;">圆角</div>
<div class="rounded-1 bg-dark" style="width: 100px;margin-top: 10px;">圆角</div>
<div class="rounded-2 bg-dark" style="width: 100px;margin-top: 10px;">圆角</div>

效果图如下:

Bootstrap 浮动与清除浮动

基础用法

我们可以通过 .float-end和.float-start分别设置元素向右和向左移动，.clearfix用于清除浮动。

html 复制代码 
<div class="clearfix">
  <div class="float-start">向左</div>
  <div class="float-end">向右</div>
</div>

效果图如下：

响应式浮动

我们可以根据屏幕尺寸来设置浮动效果.float-*-start | end。

  • sm (>= 576px)
  • md (>=768px)
  • lg (>=992px)
  • xl (>=1200px)
  • xxl (>=1400px)

Bootstrap 居中对齐

Bootstrap是使用了.mx-auto来设置元素的居中对齐，原理是将 margin-left和margin-right设置为auto。

Bootstrap 宽度和高度

宽度

Bootstrap 使用w-*来设置宽度：

html 复制代码 
<div class="w-25 bg-primary">宽度25%</div>
<div class="w-50 bg-primary">宽度50%</div>
<div class="w-75 bg-primary">宽度75%</div>
<div class="w-100 bg-primary">宽度100%</div>
<div class="w-auto bg-primary">宽度自适应</div>
<div class="mw-100 bg-primary">最大宽度为100%</div>

效果图如下：

高度

Bootstrap 使用h-*来设置高度：

html 复制代码 
<div class="bg-light" style="height: 300px;">
    <div class="h-25 bg-warning">高度25%</div>
    <div class="h-50 bg-warning">高度50%</div>
    <div class="h-75 bg-warning">高度75%</div>
    <div class="h-100 bg-warning">高度100%</div>
    <div class="h-auto bg-warning">自适应</div>
</div>

效果图如下:

Bootstrap 间距

基础使用

间距是元素与周边元素的距离，Bootstrap 中使用m-*定义外边距，使用p-*定义内边距。间距值为 1-5 如m-2等。

间距的方向

  • 使用*t-*来设置上外边距或上内边距
  • 使用*b-*来设置下外边距或下内边距
  • 使用*s-*来设置左外边距或左内边距
  • 使用*e-*来设置右外边距或右内边距
  • 使用*x-*来设置left或right
  • 使用*y-*来设置top或bottom

响应式间距

我们可以通过mx-*-*来设置在某一个断点如何显示间距等。

html 复制代码 
<div class="mx-lg-2"></div>

Bootstrap 阴影

我们可以通过 .shadow类来为元素添加阴影:

  • .shadow：为元素添加阴影
  • .shadow-sm：为元素添加一个小阴影
  • .shadow-lg：为元素添加一个更大的阴影
  • .shadow-none：移除元素上的阴影

Bootstrap Flex弹性布局

弹性布局是我们经常用到的布局模式，更适合我们开发响应式的设计。

创建弹性盒子

使用.d-flex,创建 Flexbox 容器并将之类转换为flex项。

html 复制代码 
<div class="d-flex">
    <div class="p-2 bg-primary">1</div>
    <div class="p-2 bg-warning">2</div>
    <div class="p-2 bg-secondary">3</div>
</div>

效果图如下：

水平方向

.flex-row可以设置弹性盒子元素水平显示，默认为水平方向。也可以使用.flex-row-reverse用于右对齐显示。

html 复制代码 
<div class="d-flex flex-row-reverse">
    <div class="p-2 bg-primary">1</div>
    <div class="p-2 bg-warning">2</div>
    <div class="p-2 bg-secondary">3</div>
</div>

效果图如下：

垂直方向

.flex-column设置元素垂直方向显示，或使用.flex-column-reverse反转垂直方向。

html 复制代码 
<div class="d-flex flex-column">
    <div class="p-2 bg-primary">1</div>
    <div class="p-2 bg-warning">2</div>
    <div class="p-2 bg-secondary">3</div>
</div>

效果图如下：

换行

默认情况下元素都在一行显示，如果一行排不下我们可以通过以下类进行换行等。

  • .flex-nowrap：不换行，默认
  • .flex-wrap：换行,第一行在上方
  • .flex-wrap-reverse：换行,第一行在下方

对其方式

水平方向

使用.justify-content-*类可改变弹性元素水平方向的对其方式。

  • .justify-content-start：右对齐
  • .justify-content-end：左对齐
  • .justify-content-center：居中对齐
  • .justify-content-between：两端对齐
  • .justify-content-around：两端对齐，与父元素留有边距

单行垂直方向

使用.align-item-*类可改变弹性元素单行垂直方向的对其方式。

  • .align-item-start：交叉轴上对齐
  • .align-item-end：交叉轴下对齐
  • .align-item-center：交叉轴居中对齐
  • .align-item-baseline：交叉轴梯线对齐
  • .align-item-stretch：高度沾满整个容器，默认值

多行垂直方向

使用.align-content-*类可改变弹性元素多行垂直方向的对其方式。

  • .align-content-start：交叉轴上对齐
  • .align-content-end：交叉轴下对齐
  • .align-content-center：交叉轴居中对齐
  • .align-content-between：交叉轴两端对齐
  • .align-content-around：交叉轴两端对齐，与父元素留有边距
  • .align-content-stretch：高度沾满整个容器，默认值

排序

我们也可以通过order-*来对容器进行排序。

等宽

在flex布局中我们可以通过.flex-fill来强制它们等宽。

伸展

在flex布局中我们可以通过.flex-grow-1可占用多余空间。

指定子元素对齐

我们可以对子元素设置.algin-self-*来控制子元素的对其方式。

  • .align-self-start：交叉轴上对齐
  • .align-self-end：交叉轴下对齐
  • .align-self-center：交叉轴居中对齐
  • .align-self-baseline：交叉轴梯线对齐
  • .align-self-stretch：高度沾满整个容器，默认值

响应式flex类

我们也可以根据不同的设备来设置.d-*-flex响应式布局。也可以使用.justify-content-*-*来设置对其方式等。

Bootstrap 字体图标

我们可以使用Bootstrap提供的字体图标来丰富我们的页面效果实现步骤如下：

在HTML文档引入Bootstrap CDN链接

html 复制代码 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">

使用Bootstrap图标

html 复制代码 
<i class="bi bi-airplane-engines-fill"></i>

效果图如下：

Bootstrap 导航

Bootstrap 中提供了一种简单快捷的方法来创建基本导航，它提供了非常灵活和优雅的选修课和Pills等组件。

基本导航

创建简单的水平菜单，我们可以将.nav添加到ul元素中然后再为每个li添加.nav-item并将.nav-link添加到链接元素中。

html 复制代码 
<div class="container">
  <ul class="nav">
      <li class="nav-item">
          <a class="nav-link" href="#">HTML</a>
      </li>
      <li class="nav-item">
          <a class="nav-link" href="#">CSS</a>
      </li>
      <li class="nav-item">
          <a class="nav-link" href="#">Bootstrap</a>
      </li>
  </ul>
</div>

效果图如下：

导航对齐

默认情况下导航是左对齐，我们可以使用flexbox为导航添加对其方式。

html 复制代码 
<div class="container">
  <ul class="nav justify-content-center">
      <li class="nav-item">
          <a class="nav-link" href="#">HTML</a>
      </li>
      <li class="nav-item">
          <a class="nav-link" href="#">CSS</a>
      </li>
      <li class="nav-item">
          <a class="nav-link" href="#">Bootstrap</a>
      </li>
  </ul>
</div>

效果图如下：

垂直导航

我们可以通过.flex-column将导航变成垂直导航。

html 复制代码 
<div class="container">
  <ul class="nav flex-column">
      <li class="nav-item">
          <a class="nav-link" href="#">HTML</a>
      </li>
      <li class="nav-item">
          <a class="nav-link" href="#">CSS</a>
      </li>
      <li class="nav-item">
          <a class="nav-link" href="#">Bootstrap</a>
      </li>
  </ul>
</div>

效果图如下：

选项卡

可以使用.nav-tabs来为我们导航栏生成选项卡式导航，并将.active类添加到活动选项中。

html 复制代码 
<div class="container">
  <ul class="nav nav-tabs">
      <li class="nav-item active">
          <a class="nav-link" href="#">HTML</a>
      </li>
      <li class="nav-item">
          <a class="nav-link" href="#">CSS</a>
      </li>
      <li class="nav-item">
          <a class="nav-link" href="#">Bootstrap</a>
      </li>
  </ul>
</div>

效果图如下：

创建Pills导航

通过.nav-pills来创建基于Pills的导航。

html 复制代码 
<div class="container">
  <ul class="nav nav-pills">
      <li class="nav-item">
          <a class="nav-link active" href="#">HTML</a>
      </li>
      <li class="nav-item">
          <a class="nav-link" href="#">CSS</a>
      </li>
      <li class="nav-item">
          <a class="nav-link" href="#">Bootstrap</a>
      </li>
  </ul>
</div>

效果图如下：

等宽的选项卡

通过.nav-justified对齐标签/胶囊，让标签式或胶囊式的导航菜单与父元素等宽。

html 复制代码 
<div class="container">
  <ul class="nav nav-pills nav-justified">
      <li class="nav-item">
          <a class="nav-link active" href="#">HTML</a>
      </li>
      <li class="nav-item">
          <a class="nav-link" href="#">CSS</a>
      </li>
      <li class="nav-item">
          <a class="nav-link" href="#">Bootstrap</a>
      </li>
  </ul>
</div>

效果图如下：

Bootstrap 导航栏

Bootstrap 导航栏组件是为网站或应用程序创建响应式导航标题，这些响应式导航通常在手机等小视口的设备上会折叠，在大型和中型设备中将正常显示为水平。

基础的导航栏

通过.navbar创建一个标准的导航栏，还可以在导航栏元素上添加.navbar-expand-*来创建响应式导航栏。

html 复制代码 
<div class="navbar navbar-expand-lg">
  <ul class="navbar-nav">
      <li class="nav-item">
          <a class="nav-link active" href="#">HTML</a>
      </li>
      <li class="nav-item">
          <a class="nav-link" href="#">CSS</a>
      </li>
      <li class="nav-item">
          <a class="nav-link" href="#">Bootstrap</a>
      </li>
  </ul>
</div>

效果图如下：

当视口小于992px时：

垂直导航栏

我们可以通过删除.navbar-expand-*来创建失踪垂直的导航栏：

html 复制代码 
 <div class="navbar"></div>

导航栏颜色

我们可以通过.bg-color直接来更改导航栏的背景色，.navbar-dark为导航栏所有链接添加白色文本文字或使用.navbar-light添加黑色文本颜色。

品牌/标志

我们可以通过.navbar-brand用于突出显示页面的品牌/标志/项目名称。

html 复制代码 
<div class="container navbar">
    <ul class="navbar-nav">
        <li class="nav-item">
            <a class="navbar-brand" href="#">Polaris</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">HTML</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">CSS</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Bootstrap</a>
        </li>
    </ul>
</div>

效果图如下：

固定导航栏

导航栏也可以固定到页面顶部或底部。我们可以通过.flxed-top和.flxed-bottom来设置导航停留在顶部还是停留在底部。

html 复制代码 
<div class="container navbar flxed-top">
  <ul class="navbar-nav">
      <li class="nav-item">
          <a class="navbar-brand" href="#">Polaris</a>
      </li>
      <li class="nav-item">
          <a class="nav-link" href="#">HTML</a>
      </li>
      <li class="nav-item">
          <a class="nav-link" href="#">CSS</a>
      </li>
      <li class="nav-item">
          <a class="nav-link" href="#">Bootstrap</a>
      </li>
  </ul>
</div>

效果图如下：

导航栏粘在顶部

通过.sticky-top来创建随页面滚动直到达顶部后如何停留在那里的粘性顶部导航栏。

html 复制代码 
<div class="container navbar navbar-expand-lg sticky-top">
  <ul class="navbar-nav">
      <li class="nav-item">
          <a class="navbar-brand" href="#">Polaris</a>
      </li>
      <li class="nav-item">
          <a class="nav-link" href="#">HTML</a>
      </li>
      <li class="nav-item">
          <a class="nav-link" href="#">CSS</a>
      </li>
      <li class="nav-item">
          <a class="nav-link" href="#">Bootstrap</a>
      </li>
  </ul>
</div>

Bootstrap 下拉菜单

下拉菜单常用于导航标题中，在用户悬停或点击时出发显示相关内容。

基础下拉菜单

我们可以通过.dropdown来定义下拉菜单，使用.dropdown-toggle定义触发元素，而触发器上需要属性data-bs-toggle="dropdown"来切换菜单，带有.dropdown-menu类的元素可构建下拉菜单。

html 复制代码 
<div class="dropdown m-4">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">下拉</button>
  <ul class="dropdown-menu">
      <li>
          <a href="#" class="dropdown-item">1</a>
      </li>
      <li>
          <a href="#" class="dropdown-item">2</a>
      </li>
      <li>
          <a href="#" class="dropdown-item">2</a>
      </li>
  </ul>
</div>

效果图如下：

下拉分割线

我们可以使用.dropdown-divider和.dropdown-header用于水平细边框分割下拉列表的选项卡，和为下拉列表区域添加标题。

html 复制代码 
<div class="dropdown m-4">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">下拉</button>
    <ul class="dropdown-menu">
        <li>
            <a href="#" class="dropdown-item">1</a>
        </li>
        <li>
            <a href="#" class="dropdown-item">2</a>
        </li>
        <li>
            <a href="#" class="dropdown-item">2</a>
        </li>
        <li class="dropdown-divider"></li>
        <li class="dropdown-header">
            Polaris
        </li>
    </ul>
</div>

效果图如下：

导航栏中的下拉菜单

html 复制代码 
<div class="container navbar navbar-expand-lg sticky-top">
  <ul class="navbar-nav">
      <li class="nav-item">
          <a class="navbar-brand" href="#">Polaris</a>
      </li>
      <li class="nav-item">
          <a class="nav-link" href="#">HTML</a>
      </li>
      <li class="nav-item">
          <a class="nav-link" href="#">CSS</a>
      </li>
      <li class="nav-item">
          <a class="nav-link" href="#">Bootstrap</a>
      </li>
      <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">下拉</a>
          <ul class="dropdown-menu">
              <li>
                  <a href="#" class="dropdown-item">1</a>
              </li>
              <li>
                  <a href="#" class="dropdown-item">2</a>
              </li>
              <li>
                  <a href="#" class="dropdown-item">2</a>
              </li>
              <li class="dropdown-divider"></li>
              <li class="dropdown-header">
                  Polaris
              </li>
          </ul>
      </li>
  </ul>
</div>

效果图如下：

Bootstrap 表单

Bootstrap 提供了三种不同类型的表但布局分别是垂直表单(默认)、水平表单和内联表单。

创建基础表单

我们可以通过想元素添加.from-group来创建表单控件。

html 复制代码 
<div class="container m-3">
    <form>
        <div class="form-group">
            <label class="form-labe">名称</label>
            <input type="text" placeholder="请输入名称" class="form-control">
        </div>
    </form>
</div>

效果图如下:

创建内联表单

表单并排显示可以使用.row和.col。

html 复制代码 
<div class="container m-3">
  <form>
      <div class="row">
          <div class="form-group col">
              <label class="form-labe">名称</label>
              <input type="text" placeholder="请输入名称" class="form-control">
          </div>
          <div class="form-group col">
              <label class="form-labe">密码</label>
              <input type="text" placeholder="请输入密码" class="form-control">
          </div>
      </div>
  </form>
</div>

效果图如下：

表单控件尺寸

我们可以通过.form-control-lg和.form-control-sm来更改输入控件的大小。

html 复制代码 
<div class="container m-3">
  <form>
      <div class="row">
          <div class="form-group col">
              <label class="form-labe">名称</label>
              <input type="text" placeholder="请输入名称" class="form-control form-control-lg">
          </div>
          <div class="form-group col">
              <label class="form-labe">密码</label>
              <input type="text" placeholder="请输入密码" class="form-control form-control-sm">
          </div>
      </div>
  </form>
</div>

效果图如下：

提示文本

我们还可以使用.form-text为控件添加提示文本。

html 复制代码 
<div class="container m-3">
    <form>
        <div class="row">
            <div class="form-group col">
                <label class="form-labe">密码</label>
                <input type="text" placeholder="请输入密码" class="form-control form-control-lg">
                <span class="form-text">必8-20个字符长度</span>
            </div>
        </div>
    </form>
</div>

效果图如下：

选择菜单

创建基础选择菜单

我们可以将.form-select添加到select元素中

html 复制代码 
<div class="container m-3">
    <select class="form-select">
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
</div>

效果图如下：

选择菜单大小

我们可以通过.form-select-lg和.form-select-sm来更改输入控件的大小。

多选菜单

我们可以在select选择上添加multiple属性来让我们选择框变为多选框。

html 复制代码 
<div class="container m-3">
  <select class="form-select" multiple>
      <option>1</option>
      <option>2</option>
      <option>3</option>
  </select>
</div>

效果图如下：

复选框与单选框

我们可以通过.form-check来定义多选或者单选按钮。

复选框

html 复制代码 
<div class="container m-3">
    <div class="form-check">
        <input type="checkbox" class="form-check-input">
        <label class="form-check-label">1</label>
    </div>
    <div class="form-check">
        <input type="checkbox" class="form-check-input">
        <label class="form-check-label">2</label>
    </div>
</div>

效果图如下：

单选框

html 复制代码 
<div class="container m-3">
    <div class="form-check">
        <input type="radio" class="form-check-input">
        <label class="form-check-label">1</label>
    </div>
    <div class="form-check">
        <input type="radio" class="form-check-input">
        <label class="form-check-label">2</label>
    </div>
</div>

效果图如下：

开关

我们可以在将.form-switch与.form-check容器一起使用。

html 复制代码 
<div class="container m-3">
    <div class="form-check form-switch">
        <input type="checkbox" checked class="form-check-input">
        <label class="form-check-label">开关</label>
    </div>
</div>

效果图如下：

滑块

我们可以使用.form-range添加到type="range"的input元素中来创建滑块样式。

html 复制代码 
<div class="container m-3">
    <div class="form-check form-switch">
        <input type="range" class="form-range">
        <label class="form-check-label">开关</label>
    </div>
</div>

效果图如下：

表单组

基础使用

.input-group是一种容器，通过在输入的字段的前面或后面添加图标、文字或按钮来增强输入，使用.input-group-text指定帮助文本的样式。

html 复制代码 
<div class="input-group">
    <span class="input-group-text">用户名</span>
    <input type="text" placeholder="用户名" class="form-control">
</div>

效果图如下：

输入组大小

我们可以通过.input-group-lg和.form-select-sm来更改输入控件的大小。

多个输入

html 复制代码 
<div class="input-group">
    <span class="input-group-text">用户名</span>
    <input type="text" placeholder="姓" class="form-control">
    <input type="text" placeholder="名" class="form-control">
</div>

效果图如下：

带按钮的输入组

html 复制代码 
<div class="container m-3">
    <div class="input-group">
        <input type="text" placeholder="请输入用户名" class="form-control">
        <button type="button" class="btn btn-primary">搜索</button>
    </div>
</div>

效果图如下：

带下拉按钮的输入组

html 复制代码 
<div class="container m-3">
  <div class="input-group">
      <input type="text" placeholder="请输入用户名" class="form-control">
      <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">下拉</button>
      
      <ul class="dropdown-menu">
          <li>
              <a href="#" class="dropdown-item">1</a>
          </li>
          <li>
              <a href="#" class="dropdown-item">2</a>
          </li>
          <li>
              <a href="#" class="dropdown-item">2</a>
          </li>
          <li class="dropdown-divider"></li>
          <li class="dropdown-header">
              Polaris
          </li>
      </ul>
  </div>
</div>

效果图如下：

Bootstrap 卡片

Bootstrap 卡片提供了一个灵活的、可扩展的内容容器。可以通过类.card与.card-body可以快速创建一个简单的卡片，卡片可以包含头部、内容、底部以及各种颜色设置。

创建基本卡片

我们可以在外部容器使用.card，内容可以防止.card-body元素内，这样我们就得到了一个简单的卡片元素。

html 复制代码 
<div class="card m-3">
    <div class="card-body">基础卡片</div>
</div>

效果图如下：

页眉与页脚

我们还可以使用.card-header和.card-footer分别为卡片创建页眉与页脚。

html 复制代码 
<div class="card m-3">
    <div class="card-header">页眉</div>
    <div class="card-body">基础卡片</div>
    <div class="card-footer">页脚</div>
</div>

效果图如下：

带标题、文本和链接的卡片

我们还可以使用.card-title、card-text和.card-line分别来为卡片创建标题、文本和链接等等。

html 复制代码 
<div class="card m-3">
        <div class="card-header">页眉</div>
        <div class="card-body">
            <h4 class="card-title">标题</h4>
            <div class="card-text">一些文本</div>
            <a href="#" class="card-link">链接</a>
        </div>
        <div class="card-footer">页脚</div>
    </div>

效果图如下：

设置图片背景

我们通过在图片上设置.card-img-top在内容上设置.card-img-overlay将图片转换为卡片背景

html 复制代码 
<div class="card m-3">
    <img src="./1.png" class="card-img-top" alt="">
    <div class="card-img-overlay">
        <h4 class="card-title">标题</h4>
        <div class="card-text">一些文本</div>
        <a href="#" class="card-link">链接</a>
    </div>
</div>

效果图如下：

Bootstrap 分页

分页策略是在数据多的时候我们一次性加载完全会导致用户体验不佳页面卡顿等问题的一个解决方案。Bootstrap也为我们提供了如何定义分页等效果。

基础的分页

要创建一个分页我们可以在ul元素中添加.pagination,然后在li元素上添加.page-item类，

也可以为元素中的a标签添加.page-link。

html 复制代码 
<ul class="pagination m-3">
    <li class="page-item">
        <a href="#" class="page-link">上一页</a>
    </li>
    <li class="page-item">
        <a href="#" class="page-link">1</a>
    </li>
    <li class="page-item">
        <a href="#" class="page-link">2</a>
    </li>
    <li class="page-item">
        <a href="#" class="page-link">3</a>
    </li>
    <li class="page-item">
        <a href="#" class="page-link">下一页</a>
    </li>
</ul>

效果图如下：

活动状态的分页

.active用于突出显示当前页面。

html 复制代码 
<ul class="pagination m-3">
    <li class="page-item">
        <a href="#" class="page-link">上一页</a>
    </li>
    <li class="page-item active">
        <a href="#" class="page-link">1</a>
    </li>
    <li class="page-item">
        <a href="#" class="page-link">2</a>
    </li>
    <li class="page-item">
        <a href="#" class="page-link">3</a>
    </li>
    <li class="page-item">
        <a href="#" class="page-link">下一页</a>
    </li>
</ul>

效果图如下：

禁用状态分页

.disabled用于不可点击的链接。

html 复制代码 
<ul class="pagination m-3">
    <li class="page-item">
        <a href="#" class="page-link">上一页</a>
    </li>
    <li class="page-item active">
        <a href="#" class="page-link">1</a>
    </li>
    <li class="page-item">
        <a href="#" class="page-link">2</a>
    </li>
    <li class="page-item disabled">
        <a href="#" class="page-link">3</a>
    </li>
    <li class="page-item">
        <a href="#" class="page-link">下一页</a>
    </li>
</ul>

效果图如下：

分页大小

我们可以使用.pagination-lg和.pagination-sm来分别设置分页按钮更大或更小。

分页对齐

默认我们分页是左对齐，我们也可以使用.justify-content-center来设置居中对齐。

html 复制代码 
<ul class="pagination justify-content-center m-3">
    <li class="page-item">
        <a href="#" class="page-link">上一页</a>
    </li>
    <li class="page-item active">
        <a href="#" class="page-link">1</a>
    </li>
    <li class="page-item">
        <a href="#" class="page-link">2</a>
    </li>
    <li class="page-item disabled">
        <a href="#" class="page-link">3</a>
    </li>
    <li class="page-item">
        <a href="#" class="page-link">下一页</a>
    </li>
</ul>

效果图如下：

Bootstrap 面包屑

面包屑是一种导航，用于显示用户指示当前的位置，面包屑可以极大增强具有大量页面或负责页面层级的可访问性。我们可以通过.breadcrumb类来进行设置面包屑。

html 复制代码 
<nav class="container m-3">
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="#">HTML</a>
        </li>
        <li class="breadcrumb-item">
            <a href="#">CSS</a>
        </li>
        <li class="breadcrumb-item">
            <a href="#">Bootstrap</a>
        </li>
    </ol>
</nav>

效果图如下：

Bootstrap 折叠

当我们需要隐藏和显示大量元素时我们就可以使用折叠组件。我们通过.collapse指示可折叠元素通过单击来显示或隐藏按钮内容。对于a标签我们可以使用data-bs-targer属性。

html 复制代码 
<div class="container m-3">
    <a href="#demo1" data-bs-toggle="collapse">折叠</a>
    <div id="demo1" class="collapse">
        <p>显示内容</p>
    </div>
    <button type="button" class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#demo1">折叠</button>
</div>

效果图如下：

默认情况折叠内容是隐藏的我们可以通过.show来设置折叠内容默认显示。

Bootstrap 手风琴

手风琴菜单和小部件广泛用于web应用程序中，主要作用是管理少量区域内的大量内容和导航列表。

html 复制代码 
<div class="accordion m-3" id="myAccordion">
    <div class="accordion-item">
        <h2 class="accordion-header" id="headingOne">
            <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#collapseOne">选项1</button>
        </h2>
        <div id="collapseOne" class="accordion-collapse collapse" data-bs-parent="#myAccordion">
            <div class="card-body">
                <p>1</p>
                <p>2</p>
                <p>3</p>
            </div>
        </div>
    </div>
</div>

效果图如下：

相关推荐
hboot8 小时前
别再被 TS 类型冲突折磨了！一文搞懂类型合并规则
前端·typescript
在西安放羊的牛油果8 小时前
浅谈 import.meta.env 和 process.env 的区别
前端·vue.js·node.js
鹏北海8 小时前
从弹窗变胖到 npm 依赖管理：一次完整的问题排查记录
前端·npm·node.js
布列瑟农的星空8 小时前
js中的using声明
前端
薛定谔的猫28 小时前
Cursor 系列（2）：使用心得
前端·ai编程·cursor
用户904706683578 小时前
后端问前端：我的接口请求花了多少秒？为啥那么慢，是你慢还是我慢？
前端
深念Y8 小时前
仿B站项目 前端 4 首页 顶层导航栏
前端·vue·ai编程·导航栏·bilibili·ai开发
dragonZhang8 小时前
基于 Agent Skills 的 UI 重构实践：从 Demo 到主题化界面的升级之路
前端·ai编程·claude
王林不想说话8 小时前
提升工作效率的Utils
前端·javascript·typescript
weixin_584121439 小时前
vue内i18n国际化移动端引入及使用
前端·javascript·vue.js
热门推荐
01GitHub 镜像站点02安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）03Linux下V2Ray安装配置指南04手把手教你通过Gemini3 pro 学生认证，白用一年，手慢无！05Labelme从安装到标注：零基础完整指南06jdk21下载、安装（Windows、Linux、macOS）07GitLab 零基础入门指南：从安装到项目管理全流程08UV安装并设置国内源09【踩坑笔记】50系显卡适配的 PyTorch 安装102025-04-03 Latex学习1——本地配置Latex + VScode环境