Skip to content

Bootstrap

https://v5.bootcss.com/

logo

什么是Bootstrap

Bootstrap是一个用于快速开发Web应用程序和网站的前端框架。Bootstrap是基于HTML、CSS、JAVASCRIPT的。Bootstrap是由Twitter的MarkOtto和JacobThornton开发的。Bootstrap是2011年八月在GitHub上发布的开源产品。

为什么使用Bootstrap

容易上手

  • 只要对HTML和CSS有基本了解的人都可以很快速的使用Bootstrap。

响应式设计

  • Bootstrap可以根据不同平台（手机、平板电脑和台式机）进行调整。

移动优先

  • 在Bootstrap中，自适应移动端是框架的核心部分。

浏览器兼容性

  • Bootstrap5兼容所有主流浏览器（Chrome、Firefox、Edge、Safari和Opera）。如果您需要支持IE11及以下版本，请使用Bootstrap4或Bootstrap3。

主要组件

主要组件

Bootstrap5安装使用

https://getbootstrap.com/

经过编译的CSS和JS

https://github.com/twbs/bootstrap/releases/download/v5.2.3/bootstrap-5.2.3-dist.zip

源文件

https://github.com/twbs/bootstrap/archive/v5.2.3.zip

使用jsDelivr免费CDN

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js></script>

包管理器

npm install bootstrap

HelloWorld!

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>
  <!-- 引入CSS -->
  <link href="bootstrap-5.2.3-dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <h1>Hello, world!</h1>
  <!-- 引入JS -->
  <script src="bootstrap-5.2.3-dist/js/bootstrap.min.js"></script>
</body>

</html>

断点(Breakpoints)

Bootstrap利用断点（Breakpoints）来确定响应式布局在设备或视口（viewport）大小变化时的行为，该宽度可自定义。

核心概念

  • 断点是响应式设计的基石。

    • 使用它们来控制何时可以在特定视口或设备大小下调整布局。

  • 使用媒体查询通过断点构建CSS。

    • 媒体查询是CSS的一项功能，允许您根据一组浏览器和操作系统参数有条件地应用样式。我们在媒体查询中最常用的是最小宽度。

  • 移动第一，响应式设计是目标。

    • Bootstrap的CSS旨在应用最小的样式，使布局在最小的断点处工作，然后对样式进行分层，以调整更大设备的设计。这优化了CSS，缩短了渲染时间，并为访问者提供了良好的体验。

内置断点

断点 在类中的标识 尺寸
X-Small None <576px
Small sm ≥576px
Medium md ≥768px
Large lg ≥992px
Extralarge xl ≥1200px
Extraextralarge xxl ≥1400px

容器(Container)

Bootstrap支持三种容器:

  • .container

    • 它设置每个响应断点的最大宽度

  • .container-{断点}

    • 宽度为100%，直到指定的断点
  • .container-fluid
    • 宽度：所有断点处的100%
  Extrasmall <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% 

1
2
3
4
5
<div class="container-sm border">.container-sm</div>
<div class="container-md mt-3 border">.container-md</div>
<div class="container-lg mt-3 border">.container-lg</div>
<div class="container-xl mt-3 border">.container-xl</div>
<div class="container-xxl mt-3 border">.container-xxl</div>
源代码 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>
  <!-- 引入CSS -->
  <link href="bootstrap-5.2.3-dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <div class="container pt-3">
    <h1>响应式容器</h1>
    <p>重置浏览器大小查看效果.</p>
  </div>
  <div class="container-sm border">.container-sm</div>
  <div class="container-md mt-3 border">.container-md</div>
  <div class="container-lg mt-3 border">.container-lg</div>
  <div class="container-xl mt-3 border">.container-xl</div>
  <div class="container-xxl mt-3 border">.container-xxl</div>

  <!-- 引入JS -->
  <script src="bootstrap-5.2.3-dist/js/bootstrap.min.js"></script>
</body>

</html>

网格(Grid)

Bootstrap5网格系统

  • Bootstrap提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

网格类

  • .col-针对所有设备。

  • .col-sm-平板-屏幕宽度等于或大于576px。

  • .col-md-桌面显示器-屏幕宽度等于或大于768px。

  • .col-lg-大桌面显示器-屏幕宽度等于或大于992px。

  • .col-xl-特大桌面显示器-屏幕宽度等于或大于1200px。

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

网格系统规则

  • 网格每一行需要放在设置了.container(固定宽度)或.container-fluid(全屏宽度)类的容器中。

  • 使用行来创建水平的列组。

  • 内容需要放置在列中，并且只有列可以是行的直接子节点。

  • 预定义的类如.row和.col-sm-4可用于快速制作网格布局。

  • 列通过填充创建列内容之间的间隙。

  • 网格列是通过跨越指定的12个列来创建。

  • Bootstrap5和Bootstrap4使用flexbox（弹性盒子）而不是浮动。

1
2
3
4
5
<div class="row">
  <div class="col p-3 bg-primary text-white">.col</div>
  <div class="col p-3 bg-dark text-white">.col</div>
  <div class="col p-3 bg-primary text-white">.col</div>
</div>
源代码 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>
  <link href="bootstrap-5.2.3-dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <div class="container-fluid mt-3">
    <h1>创建相等宽度的列</h1>
    <p>创建三个相等宽度的列! 尝试在class="row"的div中添加新的class="col" div, 会显示四个等宽的列。</p>
    <div class="row">
      <div class="col p-3 bg-primary text-white">.col</div>
      <div class="col p-3 bg-dark text-white">.col</div>
      <div class="col p-3 bg-primary text-white">.col</div>
    </div>
  </div>

  <script src="bootstrap-5.2.3-dist/js/bootstrap.min.js"></script>
</body>

</html>

文字排版(Typography)

Bootstrap5默认的font-size为16px,line-height为1.5。默认的font-family为"HelveticaNeue"，Helvetica,Arial,sans-serif。此外，所有的<p>元素margin-top:0、margin-bottom:1rem(16px)。

排版内容

  • <h1>-<h6>

  • Display标题类

  • <small>

  • <mark>

  • <abbr>

  • <blockquote>

  • <dl>

  • <code>

  • <kbd>

  • <pre>

1
2
3
4
5
6
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
源代码 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>
  <link href="bootstrap-5.2.3-dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <h1>h1. Bootstrap heading</h1>
  <h2>h2. Bootstrap heading</h2>
  <h3>h3. Bootstrap heading</h3>
  <h4>h4. Bootstrap heading</h4>
  <h5>h5. Bootstrap heading</h5>
  <h6>h6. Bootstrap heading</h6>
  <script src="bootstrap-5.2.3-dist/js/bootstrap.min.js"></script>
</body>

</html>

图片(Images)

圆角图片

  • .rounded类可以让图片显示圆角效果

椭圆图片

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

缩略图

  • .img-thumbnail类用于设置图片缩略图(图片有边框)

图片对齐方式

  • 使用.float-start类来设置图片左对齐，使用.float-end类设置图片右对齐

图片居中

  • 使用.mx-auto(margin:auto)和.d-block(display:block)类来设置图片居中对齐

响应式图片

  • 可以通过在标签中添加.img-fluid类来设置响应式图片。
  • .img-fluid类设置了max-width:100%;、height:auto;:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<div class="row">
  <div class="col">
    <img src="bootstrap-logo-shadow.png" class="img-thumbnail" alt="...">
  </div>
  <div class="col">
    <img src="bootstrap-logo-shadow.png" class="img-thumbnail" alt="...">
  </div>
  <div class="col">
    <img src="bootstrap-logo-shadow.png" class="img-thumbnail" alt="...">
  </div>
</div>

源代码 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>
  <link href="bootstrap-5.2.3-dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <div class="container mt-3">
    <div class="row">
      <div class="col">
        <img src="bootstrap-logo-shadow.png" class="img-thumbnail" alt="...">
      </div>
      <div class="col">
        <img src="bootstrap-logo-shadow.png" class="img-thumbnail" alt="...">
      </div>
      <div class="col">
        <img src="bootstrap-logo-shadow.png" class="img-thumbnail" alt="...">
      </div>
    </div>
  </div>
  <script src="bootstrap-5.2.3-dist/js/bootstrap.min.js"></script>
</body>

</html>

表格(Table)

基础表格

  • .table类来设置基础表格的样式

条纹表格

  • 通过添加.table-striped类，您将在内的行上看到条纹

带边框表格

  • .table-bordered类可以为表格添加边框

鼠标悬停状态表格

  • .table-hover类可以为表格的每一行添加鼠标悬停效果

黑色背景表格

  • .table-dark类可以为表格添加黑色背景

黑色条纹表格

  • 联合使用.table-dark和.table-striped类可以创建黑色的条纹表格

鼠标悬停效果-黑色背景表格

  • 联合使用.table-dark和.table-hover类可以设置黑色背景表格的鼠标悬停效果

无边框表格

  • .table-borderless类可以设置无边框的表格

指定意义的颜色类

  • 通过指定意义的颜色类可以为表格的行或者单元格设置颜色

表头颜色

  • .table-dark类给表头添加黑色背景，.table-light类给表头添加灰色背景

较小的表格

  • .table-sm类减少内边距来设置较小的表格

响应式表格

  • .table-responsive类用于创建响应式表格

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<table class="table">
  <thead class="table-dark">
    <tr>
      <td>列1</td>
      <td>列2</td>
      <td>列3</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>行1列1</td>
      <td>行1列2</td>
      <td>行1列3</td>
    </tr>
    <tr>
      <td>行2列1</td>
      <td>行2列2</td>
      <td>行2列3</td>
    </tr>
    <tr>
      <td>行3列1</td>
      <td>行3列2</td>
      <td>行3列3</td>
    </tr>
  </tbody>
</table>

源代码 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>
  <link href="bootstrap-5.2.3-dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <table class="table">
    <thead class="table-dark">
      <tr>
        <td>列1</td>
        <td>列2</td>
        <td>列3</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>行1列1</td>
        <td>行1列2</td>
        <td>行1列3</td>
      </tr>
      <tr>
        <td>行2列1</td>
        <td>行2列2</td>
        <td>行2列3</td>
      </tr>
      <tr>
        <td>行3列1</td>
        <td>行3列2</td>
        <td>行3列3</td>
      </tr>
    </tbody>
  </table>
  <script src="bootstrap-5.2.3-dist/js/bootstrap.min.js"></script>
</body>

</html>

表单(Form)

表单控件

  • 设置文本输入和文本区域的样式，支持多个状态。

选择

  • 使用自定义初始外观改进浏览器默认选择元素。

check和radio

  • 使用表单中的自定义单选按钮和复选框来选择输入选项。

范围

  • 用我们的自定义版本替换浏览器默认范围输入。

输入组

  • 将标签和按钮附加到输入，以增加语义值。

浮动标签

  • 创建浮动在输入字段上的漂亮简单的表单标签。

布局

  • 使用表单创建内联、水平或复杂的基于网格的布局。

验证

  • 使用自定义或本机验证行为和样式验证表单。

form.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<form action="" class="was-validated">
  <div class="form-group">
    <label for="uname">Username:</label>
    <input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname" required>
    <div class="valid-feedback">验证成功！</div>
    <div class="invalid-feedback">请输入用户名！</div>
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" required>
    <div class="valid-feedback">验证成功！</div>
    <div class="invalid-feedback">请输入密码！</div>
  </div>
  <div class="form-group form-check">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox" name="remember" required> 同意协议
      <div class="valid-feedback">验证成功！</div>
      <div class="invalid-feedback">同意协议才能提交。</div>
    </label>
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

源代码
form.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>
  <link href="bootstrap-5.2.3-dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <form action="" class="was-validated">
    <div class="form-group">
      <label for="uname">Username:</label>
      <input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname" required>
      <div class="valid-feedback">验证成功！</div>
      <div class="invalid-feedback">请输入用户名！</div>
    </div>
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" required>
      <div class="valid-feedback">验证成功！</div>
      <div class="invalid-feedback">请输入密码！</div>
    </div>
    <div class="form-group form-check">
      <label class="form-check-label">
        <input class="form-check-input" type="checkbox" name="remember" required> 同意协议
        <div class="valid-feedback">验证成功！</div>
        <div class="invalid-feedback">同意协议才能提交。</div>
      </label>
    </div>
    <button type="submit" class="btn btn-primary">提交</button>
  </form>
  <script src="bootstrap-5.2.3-dist/js/bootstrap.min.js"></script>
</body>

</html>

按钮(Button)

按钮类

  • .btn

  • <button type="button" class="btn">基本按钮</button>

颜色

  • .btn-{颜色}

边框

  • .btn-outline-{颜色}

不同大小的按钮

  • .btn-{lg|sm}

激活和禁用的按钮

  • .active .disabled

加载按钮

<button class="btn btn-primary">
  <span class="spinner-border spinner-border-sm"></span>
</button>


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

源代码 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>
  <link href="bootstrap-5.2.3-dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <button type="button" class="btn btn-primary">Primary</button>
  <button type="button" class="btn btn-secondary">Secondary</button>
  <button type="button" class="btn btn-success">Success</button>
  <button type="button" class="btn btn-danger">Danger</button>
  <button type="button" class="btn btn-warning">Warning</button>
  <button type="button" class="btn btn-info">Info</button>
  <button type="button" class="btn btn-light">Light</button>
  <button type="button" class="btn btn-dark">Dark</button>

  <button type="button" class="btn btn-link">Link</button>
  <script src="bootstrap-5.2.3-dist/js/bootstrap.min.js"></script>
</body>

</html>

徽章(Badges)

徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要将 .badge 类加上带有指定意义的颜色类 (如 .bg-secondary) 添加到 元素上即可。

1
2
3
4
5
6
<span class="badge rounded-pill bg-default">默认</span>
<span class="badge rounded-pill bg-primary">主要</span>
<span class="badge rounded-pill bg-success">成功</span>
<span class="badge rounded-pill bg-info">信息</span>
<span class="badge rounded-pill bg-warning">警告</span>
<span class="badge rounded-pill bg-danger">危险</span>

源代码 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>
  <link href="bootstrap-5.2.3-dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <div class="container mt-3">
    <h2>药丸形状徽章</h2>
    <span class="badge rounded-pill bg-default">默认</span>
    <span class="badge rounded-pill bg-primary">主要</span>
    <span class="badge rounded-pill bg-success">成功</span>
    <span class="badge rounded-pill bg-info">信息</span>
    <span class="badge rounded-pill bg-warning">警告</span>
    <span class="badge rounded-pill bg-danger">危险</span>
  </div>
  <script src="bootstrap-5.2.3-dist/js/bootstrap.min.js"></script>
</body>

</html>

进度条(Progress)

创建一个基本的进度条的步骤如下：

  • 添加一个带有.progress类的

    。

  • 接着，在上面的

    内，添加一个带有class .progress-bar的空的
    。

  • 添加一个带有百分比表示的宽度的 style 属性，例如 style="width:70%" 表示进度条在 70% 的位置。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<div class="progress">
  <div class="progress-bar" style="width:30%"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-success" style="width:40%"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-info" style="width:50%"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-warning" style="width:60%"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-danger" style="width:70%"></div>
</div>

源代码 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>
  <link href="bootstrap-5.2.3-dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <div class="container mt-3">
    <h2>多种颜色的进度条</h2>
    <p>Bootstrap5 提供了以下几种进度条颜色:</p>
    <div class="progress">
      <div class="progress-bar" style="width:30%"></div>
    </div>
    <div class="progress">
      <div class="progress-bar bg-success" style="width:40%"></div>
    </div>
    <div class="progress">
      <div class="progress-bar bg-info" style="width:50%"></div>
    </div>
    <div class="progress">
      <div class="progress-bar bg-warning" style="width:60%"></div>
    </div>
    <div class="progress">
      <div class="progress-bar bg-danger" style="width:70%"></div>
    </div>
  </div>

  <script src="bootstrap-5.2.3-dist/js/bootstrap.min.js"></script>
</body>

</html>

分页(Pagination)

如果碰到内容过多，一般都会做分页处理。Bootstrap 5可以很简单的实现分页效果。要创建一个基本的分页可以在<ul>元素上添加.pagination类。然后在

  • 元素上添加.page-item类，<li>元素的<a>标签上添加.page-link类

    • 1
2
3
4
5
6
7
    <ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">Previous</a></li>
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item"><a class="page-link" href="#">2</a></li>
  <li class="page-item"><a class="page-link" href="#">3</a></li>
  <li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>

    源代码 
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
    <!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>
  <link href="bootstrap-5.2.3-dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <div class="container mt-3">
    <h2>分页</h2>
    <p>要创建一个基本的分页可以在 ul 元素上添加 .pagination 类。然后在 li 元素上添加 .page-item 类：</p>
    <ul class="pagination">
      <li class="page-item"><a class="page-link" href="#">Previous</a></li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#">Next</a></li>
    </ul>
  </div>
  <script src="bootstrap-5.2.3-dist/js/bootstrap.min.js"></script>
</body>

</html>

    手风琴(Accordion)

    结合Collapse JavaScript插件可构建垂直折叠手风琴。

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
    <div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne"
        aria-expanded="true" aria-controls="collapseOne">
        Accordion Item #1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
      data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the first item's accordion body.</strong>
      </div>
    </div>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
      data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the second item's accordion body.</strong>
      </div>
    </div>
  </div>
</div>

    源代码 
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
    <!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>
  <link href="bootstrap-5.2.3-dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <div class="accordion" id="accordionExample">
    <div class="accordion-item">
      <h2 class="accordion-header" id="headingOne">
        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne"
          aria-expanded="true" aria-controls="collapseOne">
          Accordion Item #1
        </button>
      </h2>
      <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
        data-bs-parent="#accordionExample">
        <div class="accordion-body">
          <strong>This is the first item's accordion body.</strong>
        </div>
      </div>
      <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
        data-bs-parent="#accordionExample">
        <div class="accordion-body">
          <strong>This is the second item's accordion body.</strong>
        </div>
      </div>
    </div>
  </div>
  <script src="bootstrap-5.2.3-dist/js/bootstrap.min.js"></script>
</body>

</html>

    警告框(Alert)

    通过精炼且适当的警告消息为典型的用户操作提供契合上下文的反馈。

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
    <div class="alert alert-primary" role="alert">
  A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
  A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
  A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert—check it out!
</div>

    源代码 
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
    <!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>
  <link href="bootstrap-5.2.3-dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <div class="alert alert-primary" role="alert">
    A simple primary alert—check it out!
  </div>
  <div class="alert alert-secondary" role="alert">
    A simple secondary alert—check it out!
  </div>
  <div class="alert alert-success" role="alert">
    A simple success alert—check it out!
  </div>
  <div class="alert alert-danger" role="alert">
    A simple danger alert—check it out!
  </div>
  <div class="alert alert-warning" role="alert">
    A simple warning alert—check it out!
  </div>
  <div class="alert alert-info" role="alert">
    A simple info alert—check it out!
  </div>
  <div class="alert alert-light" role="alert">
    A simple light alert—check it out!
  </div>
  <div class="alert alert-dark" role="alert">
    A simple dark alert—check it out!
  </div>

  <script src="bootstrap-5.2.3-dist/js/bootstrap.min.js"></script>
</body>

</html>

    用于指示当前页面在导航层级中的位置，并通过CSS为各导航条目之间自动添加分隔符。

    1
2
3
4
5
6
    <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

    源代码 
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
    <!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>
  <link href="bootstrap-5.2.3-dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="#">Home</a></li>
      <li class="breadcrumb-item active" aria-current="page">Library</li>
    </ol>
  </nav>
  <script src="bootstrap-5.2.3-dist/js/bootstrap.min.js"></script>
</body>

</html>

    卡片(Cards)

    一种灵活且可扩展的内容容器。

    1
2
3
4
5
6
7
8
    <div class="card">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Some example text. Some example text.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

    源代码 
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
    <!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>
  <link href="bootstrap-5.2.3-dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <div class="container mt-3">
    <h2>标题、文本和链接</h2>
    <div class="card">
      <div class="card-body">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">Some example text. Some example text.</p>
        <a href="#" class="card-link">Card link</a>
        <a href="#" class="card-link">Another link</a>
      </div>
    </div>
  </div>

  <script src="bootstrap-5.2.3-dist/js/bootstrap.min.js"></script>
</body>

</html>

    一个幻灯片组件，用于像旋转木马一样循环浏览元素图像或文本幻灯片。

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
    <div id="carousel" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="./img/bootstrap-logo-shadow.png" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="./img/bootstrap-logo-shadow.png" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="./img/bootstrap-logo-shadow.png" class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carousel" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carousel" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>
    源代码 
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
    <!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>
  <link href="bootstrap-5.2.3-dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <div class="container-fluid mt-3">
    <div id="carousel" class="carousel slide" data-bs-ride="carousel">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="./img/bootstrap-logo-shadow.png" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
          <img src="./img/bootstrap-logo-shadow.png" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
          <img src="./img/bootstrap-logo-shadow.png" class="d-block w-100" alt="...">
        </div>
      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#carousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#carousel" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>
  </div>
  <script src="bootstrap-5.2.3-dist/js/bootstrap.min.js"></script>
</body>

</html>

    模式对话框(Model)

    使用Bootstrap的JavaScript模式插件将对话框添加到您的站点，用于灯箱、用户通知或完全自定义的内容。

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
    <!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
    源代码 
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
    <!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>
  <link href="bootstrap-5.2.3-dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
    Launch demo modal
  </button>

  <!-- Modal -->
  <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>

  <script src="bootstrap-5.2.3-dist/js/bootstrap.min.js"></script>
</body>

</html>

    使用Bootstrap下拉插件切换覆盖上下文以显示链接列表等。

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
    <div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown"
    aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>
    源代码 
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
    <!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>
  <link href="bootstrap-5.2.3-dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown"
      aria-expanded="false">
      Dropdown button
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
  </div>
  <script src="bootstrap-5.2.3-dist/js/bootstrap.min.js"></script>
</body>

</html>


     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
    <ul class="nav nav-tabs" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" data-bs-toggle="tab" href="#home">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="tab" href="#menu1">Menu 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="tab" href="#menu2">Menu 2</a>
  </li>
</ul>
    源代码 
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
    <!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>
  <link href="bootstrap-5.2.3-dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" data-bs-toggle="tab" href="#home">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-bs-toggle="tab" href="#menu1">Menu 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-bs-toggle="tab" href="#menu2">Menu 2</a>
    </li>
  </ul>
  <script src="bootstrap-5.2.3-dist/js/bootstrap.min.js"></script>
</body>

</html>