江湖小栈

Do Better

0%

BootStrap基础知识

发表于 分类于 Hot°C：
本文字数： 28k 阅读时长 ≈ 26 分钟
BootStrap基础知识

2019年实习时的 BootStrap(4.x)基础知识 备份
BootStrap5六角学院文档： HexSchool
顺便推荐一个程序员段子网站 techug.com

栅格系统

栅格类

  • 例：<div class="col-5"></div>
类名适用
.col-*针对所有设备
.col-sm-*平板 - 荧幕宽度等于或大于 576px
.col-md-*桌面显示器 - 荧幕宽度等于或大于 768px
.col-lg-*大桌面显示器 - 荧幕宽度等于或大于 992px
.col-xl-*超大桌面显示器 - 荧幕宽度等于或大于 1200px

栅格规则

  1. 栅格每一行需要放在设置了 .container 或 .container-fluid类的容器中，这样就可以自动设置一些外边距与内边距。
  2. 使用行来创建水平的列组。
  3. 内容需要放置在列中，并且只有列可以是行的直接子节点。
  4. 预定义的类如 .row 和 .col-* 可用于快速制作栅格布局。
  5. 列通过填充创建列内容之间的间隙。 这个间隙是通过 .row 类上的负边距设置第一行和最后一列的偏移。
  6. 栅格列是通过跨越指定的 12 个列来创建。 例如，设置三个相等的列，需要使用用三个.col-4 来设置。

Flex布局

  • 例：
1
2
3
4
5
<div class="d-flex bg-secondary text-white">
  <div class="p-2 bg-info">Flex item A</div>
  <div class="p-2 bg-warning">Flex item B</div>
  <div class="p-2 bg-primary">Flex item C</div>
</div>
  • d-flex 类创建一个弹性盒子容器
  • 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 用于设置子元素使用剩下的空间，以下实例中前面两个子元素只设置了它们所需要的空间，最后一个获取剩余空间。
  • flex-shrink-1 用于设置子元素的收缩规则
  • order 类可以设置弹性子元素的排序，从 .order-1 到 .order-12，数字越低权重越高( .order-1 排在 .order-2 之前)，若要在最前面或者最后面使用 .order-first/.order-last。
  • mr-auto 类可以设置子元素右外边距为 auto=margin-right: auto!important;
  • ml-auto 类可以设置子元素左外边距为 auto=margin-left: auto!important;
  • 弹性容器中包裹子元素可以使用以下三个类：.flex-nowrap (默认), .flex-wrap 或 .flex-wrap-reverse。设置 flex 容器是单行或者多行。
  • 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 (默认)。

Flex类作用介绍

类名作用
d-*-flex根据不同的荧幕设备创建弹性盒子容器
d-*-inline-flex根据不同的荧幕设备创建行内弹性盒子容器
flex-*-row根据不同的荧幕设备在水平方向显示弹性子元素
flex-*-row-reverse根据不同的荧幕设备在水平方向显示弹性子元素且右对齐
flex-*-column根据不同的荧幕设备在垂直方向显示弹性子元素
flex-*-column-reverse根据不同的荧幕设备在垂直方向显示弹性子元素且方向相反
justify-content-*-start根据不同荧幕设备在开始位置显示弹性子元素 (左对齐)
justify-content-*-end根据不同荧幕设备在尾部显示弹性子元素 (右对齐)
justify-content-*-center根据不同荧幕设备在 flex 容器中居中显示子元素
justify-content-*-between根据不同荧幕设备使用 “between” 显示弹性子元素
justify-content-*-around根据不同荧幕设备使用 “around” 显示弹性子元素
flex-*-fill根据不同的荧幕设备强制等宽
flex-*-grow-0不同的荧幕设备不设置扩展
flex-*-grow-1不同的荧幕设备设置扩展
flex-*-shrink-0不同的荧幕设备不设置收缩
flex-*-shrink-1不同的荧幕设备设置收缩
flex-*-nowrap不同的荧幕设备不设置包裹元素
flex-*-nowrap不同的荧幕设备不设置包裹元素
flex-*-wrap不同的荧幕设备设置包裹元素
flex-*-wrap-reverse不同的荧幕设备反转包裹元素
align-content-*-start根据不同荧幕设备在起始位置堆叠元素
align-content-*-end根据不同荧幕设备在结束位置堆叠元素
align-content-*-center根据不同荧幕设备在中间位置堆叠元素
align-content-*-around根据不同荧幕设备，使用 “around” 堆叠元素。
align-content-*-stretch根据不同荧幕设备，通过伸展元素来堆叠。
align-items-*-start根据不同荧幕设备，让元素在头部显示在同一行。
align-items-*-end根据不同荧幕设备，让元素在尾部显示在同一行。
align-items-*-center根据不同荧幕设备，让元素在中间位置显示在同一行。
align-items-*-baseline根据不同荧幕设备，让元素在基线上显示在同一行。
align-items-*-stretch根据不同荧幕设备，让元素延展高度并显示在同一行。

文字排版

  • 例：
1
2
3
<h1 class="display-1">标题可以输出更大更粗的字体样式</h1>
<div class="font-weight-bold">加粗文本</div>
<div class="text-right">右对齐</div>

默认设置

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

标签及类名

标签类名作用
h1/1级标题(2.5rem = 40px)
h2/2级标题(2rem = 32px)
h3/3级标题(1.75rem = 28px)
h4/4级标题(1.5rem = 24px)
h5/5级标题(1.25rem = 20px)
h6/6级标题(1rem = 16px)
/.display-1使用在h1-h6标签使标题字体更大更粗
/.display-2使用在h1-h6标签使标题字体更大更粗
/.display-3使用在h1-h6标签使标题字体更大更粗
/.display-4使用在h1-h6标签使标题字体更大更粗
small/创建字体更小颜色更淡的字体
mark/用来高亮字体
abbr/用来使引用更加明显
dl/dt/dd/创建不同样式的列表
code/创建代码块
/.font-weight-bold加粗文本
/.font-weight-normal普通文本
/.font-weight-light更细的文本
/.font-italic斜体文本
/.lead让段落更突出
/.small指定更小文本 (为父元素的 85% )
/.text-left左对齐
/.text-center居中
/.text-right右对齐
/.text-justify设定文本对齐，段落中超出荧幕部分文字自动换行。
/.text-nowrap段落中超出荧幕部分不换行
/.text-lowercase设定文本小写
/.text-capitalize设定单词首字母大写
/.initialism显示在 <abbr> 元素中的文本以小号字体展示，且可以将小写字母转换为大写字母。
/.list-unstyled移除预设的清单样式，清单项中左对齐 ( <ul> 和 <ol> 中)。
这个类仅适用于直接子列表项 (如果需要移除嵌套的清单项，你需要在嵌套的清单中使用该样式)
/.list-inline将所有列表项放置同一行
/.pre-scrollable使 <pre> 元素可滚动，代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现卷轴。

颜色

  • 例：
1
2
3
<p class="text-success">执行成功的文本</p>
<a href="#" class="text-warning">警告链接</a>
<p class="bg-dark text-white">深灰背景颜色</p>

文字颜色

类名作用
text-muted柔和的文本
text-primary重要的文本
text-success执行成功的文本
text-info代表一些提示信息的文本
text-warning警告文本
text-danger危险操作文本
text-secondary副标题
text-dark深灰色文字
text-light浅灰色文本(白色背景上看不清楚)
text-white白色文本(白色背景上看不清楚)

背景颜色

类名作用
bg-primary重要的背景颜色
bg-success执行成功背景颜色
bg-info信息提示背景颜色
bg-warning警告背景颜色
bg-danger危险背景颜色
bg-secondary副标题背景颜色
bg-dark深灰背景颜色
bg-light浅灰背景颜色

表格

基本使用

  • 例：
1
<table class="table table-striped table-dark"></table>
类名作用
table基础表格
table-striped条纹表格
table-bordered带边框表格
table-hover鼠标悬停状态表格
table-dark黑色背景表格

颜色类

类名作用
table-primary蓝色: 指定这是一个重要的操作
table-success绿色: 指定这是一个允许执行的操作
table-danger红色: 指定这是可以危险的操作
table-info浅蓝色: 表示内容已变更
table-warning橘色: 表示需要注意的操作
table-active灰色: 用于鼠标悬停效果
table-secondary灰色: 表示内容不怎么重要
table-light浅灰色，可以是表格行的背景
table-dark可以是表格行的背景

其他类

类名作用
thead-inverse给表头添加黑色背景
thead-default给表头添加灰色背景
table-sm通过减少内边距来设置较小的表格
table-responsive创建回应式表格：在荧幕宽度 小于 992px 时会创建水平卷轴，
如果可视区域宽度 大于 992px 则显示不同效果(没有卷轴)。
table-responsive-sm< 576px荧幕宽度下显示卷轴
table-responsive-md< 768px荧幕宽度下显示卷轴
table-responsive-lg< 992px荧幕宽度下显示卷轴
table-responsive-xl< 1200px荧幕宽度下显示卷轴

图像形状

  • 例：
1
2
<img src="test.jpg" class="rounded" alt="Cinque Terre">//圆角
<img src="test.jpg" class="img-thumbnail" alt="Cinque Terre">//缩略图
类名作用
rounded让图片显示圆角效果
rounded-circle设置椭圆形图片
img-thumbnail设置图片缩略图(图片有边框)
float-right设置图片右对齐
float-left设置图片左对齐
img-fluid设置回应式图片

组件

霸屏(Jumbotron)

  • 例：
1
2
3
4
<div class="jumbotron">
  <h1>内容A</h1> 
  <p>内容内容内容内容内容内容</p> 
</div>
  • Jumbotron(霸屏)会创建一个大的灰色背景框，里面可以设置一些特殊的内容和信息。
  • Jumbotron 里头可以放一些 HTML标签，也可以是 Bootstrap 的元素。
  • 可以通过在 <div> 元素 中添加 .jumbotron 类来创建 jumbotron。
  • 如果想创建一个没有圆角的全荧幕，可以在 .jumbotron-fluid 类里头的 div添加 .container 或 .container-fluid 类来实现。

信息提示框(Alert)

  • 例：
1
2
3
4
<div class="alert alert-success alert-dismissible">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  <strong>成功!</strong>
</div>
  • 提示框可以使用 .alert 类, 后面加上 .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light 或 .alert-dark 类来实现。
  • 提示框中在链接的标签上添加 alert-link 类来设置匹配提示框颜色的链接
  • 可以在提示框中的 div 中添加 .alert-dismissible 类，然后在关闭按钮的链接上添加 class="close" 和 data-dismiss="alert" 类来设置提示框的关闭操作。
  • 提示: &times; (×) 是 HTML 实体字符，来表示关闭操作，而不是字母 “x”。
  • 提示框可以设置淡入淡出动画，各个版本使用参考官方文档。

按钮(Button)

基础按钮

btn类为基本按钮，一般是与其他类联合使用。

  • 例：

<button class="btn btn-primary">xxx</button>

类名作用
btn基本按钮
btn-primary主要按钮
btn-secondary次要按钮
btn-success成功
btn-info信息
btn-warning警告
btn-danger危险
btn-dark黑色
btn-light浅色
btn-link链接
btn-lg大号按钮
btn-sm小号按钮
btn-block块级按钮
active设置按钮是可用的
disabled设置按钮是不可点击的(注意 <a> 元素不支援 disabled 属性，
你可以通过添加 .disabled 类来禁止链接的点击)

其他

  • 按钮类可用于 <a>, <button>, 或 <input> 元素上
  • 可在btn-primary类名内插入outline为按钮设置边框比如：btn-outline-primary。

按钮组(Button-group)

  • 例：
1
2
3
4
5
<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-info">Samsung</button>
  <button type="button" class="btn btn-dark">Sony</button>
</div>
  • 可以在 <div> 元素上添加 .btn-group 类来创建按钮组。通过添加 .table-striped 类，将在 <tbody> 内的行上看到条纹>
  • 可以使用 .btn-group-lg | sm 类来设置按钮组的大小
  • 可以使用 .btn-group-vertical 类来创建垂直的按钮组

进度条(Progress)

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

  • 添加一个带有 .progress 类的 <div>
  • 接着，在上面的 <div> 内，添加一个带有 class .progress-bar 的空的 <div>。
  • 添加一个带有百分比表示的宽度的 style 属性，例如 style=”width:70%” 表示进度条在 70% 的位置。

其他

  • 例：
1
2
3
<div class="progress">
  <div class="progress-bar" style="width:70%"></div>
</div>
  • 进度条高度预设为 16px。我们可以使用 CSS 的 height 属性来修改他
  • 可以在进度条内添加文本，如进度的百分比
  • 默认情况下进度条为蓝色，可以使用：bg-success、bg-info、bg-warning、bg-danger类调整进度条颜色
  • 可以使用 .progress-bar-striped 类来设置条纹进度条
  • 使用 .progress-bar-animated 类可以为进度条添加动画

分页(Pagination)

  • 例：
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 active"><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>
  • 在ul标签使用 pagination 类，并在其下的 li 标签内使用 page-item 类创建分页
  • 当前页可以使用 .active 类来高亮显示
  • disabled 类可以设置分页链接不可点击
  • 可以将分页条目设置为不同的大小
  • .pagination-lg 类设置大字体的分页条目，.pagination-sm 类设置小字体的分页条目:后在 <li> 元素上添加 .page-item 类
  • breadcrumb 和 .breadcrumb-item 类用于设置面包屑导航

列表组(List-group)

  • 例:
1
2
3
4
5
<ul class="list-group">
  <li class="list-group-item">First item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
</ul>
  • 大部分基础列表组都是无序的
  • 要创建列表组，可以在 <ul> 元素上添加 .list-group 类, 在 <li> 元素上添加 .list-group-item 类。
  • 通过添加 .active 类来设置启动状态的清单项
  • .disabled 类用于设置禁用的列表项
  • 要创建一个链接的清单项，可以将 <ul> 替换为 <div> ， <a> 替换 <li>。如果你想鼠标悬停显示灰色背景就添加.list-group-item-action 类。
  • 列表项目的颜色可以通过以下列来设置
类名作用
list-group-item-success成功列表项
list-group-item-secondary次要列表项
list-group-item-info信息清单项
list-group-item-warning警告列表项
list-group-item-danger危险列表项
list-group-item-primary主要列表项
list-group-item-dark深灰色列表项
list-group-item-light浅色列表项

卡片(Card)

基础卡片

  • 例：
1
2
3
<div class="card">
  <div class="card-body">简单的卡片</div>
</div>
  • 可以通过 Bootstrap4 的 .card 与 .card-body 类来创建一个简单的卡片
  • Bootstrap4 的卡片类似 Bootstrap 3 中的面板、图片缩略图、well
  • .card-header类用于创建卡片的头部样式，.card-footer 类用于创建卡片的底部样式。
  • 可以使用 bg-primary, bg-success, bg-info, bg-warning, bg-danger, bg-secondary, bg-dark 和 bg-light类来改变卡片的背景颜色
  • 可以在头部元素上使用 .card-title 类来设置卡片的标题 。 .card-text 类用于设置卡片正文的内容。 .card-link 类用于给链接设置颜色。
  • 我们可以给 <img> 添加 .card-img-top(图片在文字上方) 或 .card-img-bottom
  • 如果图片要设置为背景，可以使用 .card-img-overlay 类。

卡片组(Card-group)

  • 例：
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
<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>
  • 使用卡片群组将一系列卡片呈现为具有等宽、高栏位的单一、链接元素。卡片群组由堆叠开始，并透过 display: flex; 从 sm 的断点后开始以统一的尺寸相连接。
  • 当在卡片群组使用页尾，它们的内容将会自动对齐。

吐司(Toasts)

HTML部份

  • 例：
1
2
3
4
5
6
7
8
9
10
11
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>
  • 吐司是轻量级通知，目的在于模仿行动版和桌面版作业系统的推播通知。它们是用 flexbox 构建的，因此很容易对齐和定位。
  • 出于效能原因吐司是选择性加入的，所以您必须自己将它们初始化。
  • 如果你没有指定 autohide: false，吐司会自动隐藏。
  • 可以透过将吐司包装于 <div class="toast-container"/><div> 来推叠它们，这将会在垂直方向上增加一些间距。
  • 可以透过移除子元件、调整通用类别、增加组件或是增加标记以自定义吐司
  • 根据需求，使用自定义的 CSS 指定吐司位置。右上角通常用于通知，顶部的中间也是如此。如果一次只要展示一个吐司，请将定位样式放在 .toast 上。
  • 当使用 autohide: false 时，必须增加一个关闭的按钮，让用户可以关闭吐司。

JS部份

  • 例：
1
2
3
4
var toastElList = [].slice.call(document.querySelectorAll('.toast'));
var toastList = toastElList.map(function (toastEl) {
  return new bootstrap.Toast(toastEl, option);
});
  • 展示一个元素的吐司。在吐司实际被展示前回传给调用者 (即在 shown.bs.toast 事件发生前)。 你必须手动调用此方法，否则吐司不会被展示。toast.show()
  • 隐藏吐司的元素。 在吐司元素实际隐藏之前 (即在 hidden.bs.toast 事件发生之前) 回传给调用者。如果让 autohide = false，你必须手动调用这个方法。toast.hide()
  • 隐藏一个元素的吐司。您的吐司元件将保留在 DOM 上，但不会再显示。toast.dispose()
事件类型描述
show.bs.toast当调用 show 方法时，此事件会立即触发。
hown.bs.toast当用户可看见吐司元素时，会触发此事件。
hide.bs.toast当调用 hide 方法时，此事件会立即触发。
hidden.bs.toast当隐藏了一个吐司元素时，会触发此事件。
  • 例：
1
2
3
4
var myToastEl = document.getElementById('myToast');
myToastEl.addEventListener('hidden.bs.toast', function () {
  // do something...
});

手风琴(Accordion)

  • 例：
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
<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.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        Accordion Item #2
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the second item's accordion body.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingThree">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
        Accordion Item #3
      </button>
    </h2>
    <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the third item's accordion body.
      </div>
    </div>
  </div>
</div>
  • 手风琴使用折叠使他可以做到折叠效果。要呈现展开的效果，请在 .accordion 加上 .open 类别。
  • 加上 .accordion-flush 来移除预设 background-color、 外框和圆角使该手风琴能和父容器紧邻。

标签(Badge)

  • 例：
1
2
3
4
5
6
<h1>Example heading <span class="badge bg-secondary">New</span></h1>
<button type="button" class="btn btn-primary">
  Notifications <span class="badge bg-secondary">4</span>
</button>
<span class="badge bg-primary">Primary</span>
<span class="badge rounded-pill bg-primary">Primary</span>
  • 标签通过相对字体大小和 em 单位来缩放以符合直属父元素的大小。在 v5 版本中的标签链接不再拥有 focus 或 hover 样式。
  • 标签可以作为链接或按钮的一部分，用于计数器。
  • 使用背景通用类别来快速修改标签的外观。请注意当使用 Bootstrap 预设的 .bg-light 时，你会需要一个适当的文字色彩，例如 .text-dark。这是因为背景通用类别只有 ackground-color 的设定。
  • 使用 .rounded-pill 通用类别可以透过 border-radius 使标签增加圆角。
  • 例：
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
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
  <ol class="carousel-indicators">
    <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"></li>
    <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"></li>
    <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Second slide label</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Third slide label</h5>
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </a>
</div>
  • 轮播是一个用于循环显示一系列内容的幻灯片，由 CSS 的 3D transform 以及一些 JavaScript 建构而成。它适用于一系列图片、文本或自定义的标记，并包括对上一个 /下一个控制项和指示器的支援。
  • 在支持 Page Visibility API 的浏览器中，当网页对用户不可见时，轮播将避免滑动(例如浏览器分页不是启用状态、浏览器视窗最小化时等)。
  • 需要将 .active 添加到其中一个轮播元素上，否则轮播将不可见。另外一定要在 .carousel 上为控制项元件设置一个唯一的 id，特别是当你在一个页面上使用多个轮播的时候。控制项和指示器元素必须具有与 .carousel 元素的 id 符合的 data-bs-target 属性 (或是链接的 href)。
  • 将 .carousel-fade 加到轮播中，以使用淡入淡出的取代滑动的动画效果。
  • 在 .carousel-item 上添加 data-bs-interval="" 以更改自动循环至下一个项目的延迟时间。
  • 在 .carousel 上添加 .carousel-dark 以获得暗色系的控制项、指示器及字幕。控制项已透过 CSS 属性 filter 从它们预设的白色充填反转。字幕与控制项具有用来自定义 color 及 background-color 的额外 Sass 变量。
  • 例：
1
2
var myCarousel = document.querySelector('#myCarousel');
var carousel = new bootstrap.Carousel(myCarousel);
  • 可以透过资料属性或 JavaScript 调整选项。对于资料属性，将选项名称附加到 data-bs-，如 data-bs-interval=""。
名字类型默认值说明
intervalnumber5000在一个自动循环的轮播中，项目之间所延迟的时间。 如果为 false，轮播不会自动重播。
keyboardbooleantrue轮播是否应该回应键盘事件
pausestring 或 boolean“hover”如果设定为 "hover", 轮播会因为 mouseenter 而暂停﹑并在 mouseleave之时再度执行。如果设定为false，滑入时将不会停止轮播。当在触控装置上设定为 "hover"，则在重播恢复之前，轮播将会停止于 touchend (直到用户完成与轮播的互动)。请注意，这是上述鼠标行为的扩充。
slidestring 或 booleanfalse当用户手动循环第一个元件之后，轮播将自动循环。如果为 “轮播”, 则在载入后自动播放。
wrapbooleantrue轮播是否应该连续循环，或是会停止。
touchbooleantrue在触控装置上轮播是否支持向左/向右的交互滑动。

可以使用轮播建构函式来建立一个范例。如下例，使用额外的选项初始化，并让项目开始循环。

  • 例：
1
2
3
4
5
var myCarousel = document.querySelector('#myCarousel');
var carousel = new bootstrap.Carousel(myCarousel, {
  interval: 2000,
  wrap: false
});
方法说明
cycle由左至右循环播放
pause将对象的循环从轮播中停止。
prev将轮播指向前一个对象。 在前一个对象显示前回传给调用者 (e.g., 在 slid.bs.carousel 事件发生之前)。
next将轮播指向下一个对象。 在后一个对象显示前回传给调用者 (e.g., 在 slid.bs.carousel 事件发生之前)。
nextWhenVisible如果页面或是其父层不可见，就停止将轮播循环到下一个。在目标项目显示前回传给调用者。
to将轮播指向特定的索引。(与数组相同，从 0 开始). 在目标项目显示前回传给调用者 (e.g., 在 slid.bs.carousel 事件发生之前)。
dispose销毁一个元素的轮播。 (移除 DOM 元素上储存的资料)
getInstance允许你取得与 DOM 元素关联之轮播范例的静态方法。

  • Bootstrap 提供了两个事件给予轮播使用。 两个事件都具有以下附加属性：

    • direction: 轮播滑动的方向 ("left" 或 "right")。
    • relatedTarget: 被作为启用的对象的 DOM 元素。
    • from: 当前对象的索引
    • to: 下一个对象的索引

  • 所有轮播事件都在轮播本身(即 <div class="carousel">)下被触发。

事件类型说明
slide.bs.carousel当调用 slide 方法时，此事件会立即触发。
slid.bs.carousel轮播完成切换后，此事件就被触发。

读取图示(Spinners)

  • 例：
1
2
3
<div class="spinner-border" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
  • The border 读取图示使用 currentColor 来当作它的 border-color，这代表你可以使用 文字颜色通用类别 来自定义它的颜色。你可以在标准的读取图示上使用任何通用类别中的颜色。
  • 如果你不喜欢 border 读取图示，可以切换到渐变读取图示。虽然技术上来说，它不会旋转，但它会反覆渐变显示！
1
2
3
<div class="spinner-grow" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
  • 在 Bootstrap 中的读取图示是用 rem, currentColor 和 display: inline-flex。这意味着它们可以轻易地调整大小、颜色以及快速对齐。
  • 使用 margin utilities 像是 .m-5 简单地增加间隔。
  • 使用 flexbox 通用类别、float 通用类别，或是 文字排版 在任何情况下都可以将读取图示精确地放置在您需要的位置上。
  • 增加 .spinner-border-sm 和 .spinner-grow-sm 制作一个较小的读取图示，让它可以在其他元件中快速地被使用。
  • 在按钮内使用读取图示是表示当前正在处理或正在进行操作。您也可以依照需求使用 button text 来更换读取图示的文字。

下拉菜单(Dropdowns)

  • 例：
1
2
3
4
5
6
7
8
9
10
<div class="btn-group">
  <button type="button" class="btn btn-primary">Sony</button>
  <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Tablet</a>
    <a class="dropdown-item" href="#">Smartphone</a>
  </div>
</div>
  • dropdown 类用来指定一个下拉式功能表
  • 使用一个按钮或链接来打开下拉式功能表，按钮或链接需要添加 .dropdown-toggle 和 data-toggle="dropdown" 属性。
  • <div> 元素上添加 .dropdown-menu 类来设置实际下拉式功能表，然后在下拉式功能表的选项中添加 .dropdown-item 类。
  • 可以在 <a> 标签中使用
  • dropdown-divider 类用于在下拉式功能表中创建一个水平的分割线
  • dropdown-header 类用于在下拉式功能表中添加标题
  • active 类会让下拉式功能表的选项高亮显示 (添加蓝色背景)
  • 要禁用下拉式功能表的选项，可以使用 .disabled 类。
  • 在元素上的 .dropdown-menu 类后添加 .dropdown-menu-right 类，使下拉式功能表右对齐。
  • dropright类，下拉式功能表向右弹出。
  • dropup类，上拉功能表向上弹出。
  • dropleft类，下拉式功能表向上弹出。

折叠(Collapse)

  • 例：
1
2
3
4
<button data-toggle="collapse" data-target="#demo">折叠</button>
<div id="demo" class="collapse">
  text....
</div>
  • collapse 类用于指定一个折叠元素，点击按钮后会在隐藏与显示之间切换。控制内容的隐藏与显示，需要在 <a> 或 <button> 元素上添加 data-toggle="collapse" 属性。 data-target="#id" 属性是对应折叠的内容 (<div id="demo">)。
  • <a> 元素上你可以使用 href 属性来代替 data-target 属性。
  • 默认情况下折叠的内容是隐藏的，你可以添加 .show 类让内容预设显示。

导航(Navbar)

在父元素上添加nav类，在子元素上添加nav-item类，在链接上添加nav-link类来创建导航。

  • 例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ul class="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>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>
类名作用
justify-content-center类设置导航居中显示
justify-content-end类设置导航右对齐
flex-column垂直导航
nav-tabs将导航转化为选项卡
active标记导航卡中当前选中选项
nav-pills将导航项设置成胶囊形状
nav-justified设置导航项齐行等宽显示

表单(Form)

表单元素 <input>, <textarea>, 和 <select> elements 在使用 .form-control 类的情况下，宽度都是设置为 100%。

  • 内联表单需要在 <form> 元素上添加 .form-inline 类
  • 所有内联表单中的元素都是左对齐的
  • 在荧幕宽度 小于 576px 时为垂直堆叠，如果荧幕宽度 大于等于 576px 时表单元素才会显示在同一个水平线上。

输入框组(Input-group)

  • 例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<form>
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text">@</span>
    </div>
    <input type="text" class="form-control" placeholder="Username">
  </div>
 
  <div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="Your Email">
    <div class="input-group-append">
      <span class="input-group-text">@runoob.com</span>
    </div>
  </div>
</form>
类名作用
input-group用来向表单输入框中添加更多的样式
input-group-prepend可以在输入框的的前面添加文本信息
input-group-append在输入框的后面添加文本信息
input-group-text来设置文本的样式

提示框(Tooltip)

  • 例：
1
<a href="#" data-toggle="tooltip" title="我是提示内容!">鼠标移动到我这</a>

提示框是一个小小的弹窗，在鼠标移动到元素上显示，鼠标移到元素外就消失。

  • 通过向元素添加 data-toggle=”tooltip” 来来创建提示框。
  • title 属性的内容为提示框显示的内容
  • 提示框要写在 jQuery 的初始化代码里: 然后在指定的元素上调用 tooltip() 方法。
  • 预设情况下提示框显示在元素上方
  • 使用 data-placement 属性来设定提示框显示的方向: top, bottom, left 或 right。

模态框(Modal)

  • 例：
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
<!-- 按钮：用于打开模态框 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  打开模态框
</button>
 
<!-- 模态框 -->
<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
 
      <!-- 模态框头部 -->
      <div class="modal-header">
        <h4 class="modal-title">模态框头部</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- 模态框主体 -->
      <div class="modal-body">
        模态框内容..
      </div>
 
      <!-- 模态框底部 -->
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
      </div>
 
    </div>
  </div>
</div>

弹出框(Popover)

弹出框控制项类似于提示框，它在鼠标点击到元素后显示，与提示框不同的是它可以显示更多的内容。

  • 例：
1
2
3
4
<a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Content">点我</a>
<a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">点我</a>
<a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content">点我</a>
<a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Content">点我</a>
  • 向元素添加 data-toggle="popover" 来创建弹出框。
  • title 属性的内容为弹出框的标题，data-content 属性显示了弹出框的文本内容。
  • 预设情况下弹出框显示在元素右侧
  • 可以使用 data-placement 属性来设定弹出框显示的方向: top, bottom, left 或 right。
  • 预设情况下，弹出框在再次点击指定元素后就会关闭，你可以使用 data-trigger="focus" 属性来设置在鼠标点击元素外部区域来关闭弹出框。
  • 如果你想实现在鼠标移动到元素上显示，移除后消失的效果，可以使用 data-trigger 属性，并设置值为 "hover"。

Scroll滚动监听

  • 例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- 可滚动区域 -->
<body data-spy="scroll" data-target="navbar" data-offset="50"> 
<!-- The navbar - The <a> elements are used to jump to a section in the scrollable area -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
  <ul class="navbar-nav">
    <li><a href="#section1">Section 1</a></li>
</nav>

<!-- 第一部分内容 -->
<div id="section1">
  <h1>Section 1</h1>
  <p>Try to scroll this page and look at the navigation bar while scrolling!</p>
</div>
</body>
  • 向想要监听的元素(通常是 body)添加 data-spy="scroll" 。
  • 然后添加 data-target 属性，它的值为巡览列的 id 或 class (.navbar)。这样就可以联系上可滚动区域。
  • 注意可滚动项元素上的 id (<div id="section1">) 必须匹配巡览列上的链接选项 (<a href="#section1">)。
  • 可选项 data-offset 属性用于计算滚动位置时，距离顶部的偏移图元。 默认为 10px。
  • 设置相对定位: 使用 data-spy="scroll" 的元素需要将其 CSS position 属性设置为 "relative" 才能起作用。

其他小工具

类名作用
border添加边框
border border-0去除边框
border border-top-0添加边框并去除上方边框
border border-right-0添加边框并去除右方边框
border border-bottom-0添加边框并去除左方边框
border border-left-0添加边框并去除右方边框
border border-primary重要的颜色的边框
border border-secondary加粗的边框
border border-success执行成功的颜色的边框
border border-danger危险的颜色的边框
border border-warning警告的颜色的边框
border border-info提示信息的颜色的边框
border border-light浅灰色边框
border border-dark深灰色边框
border border-white白色边框
rounded添加圆角边框(需配合以上border使用，下同。)
rounded-top上方两个角添加圆角
rounded-right右方两个角添加圆角
rounded-bottom下方两个角添加圆角
rounded-left左方两个角添加圆角
rounded-circle椭圆形边框
rounded-0去除圆角
float-right设置元素右浮动
float-left设置元素左浮动
clearfix用于清除浮动
mx-auto设置居中对齐
my-auto上下margin
m-* .p-*四周margin/padding
w-* (.w-25, .w-50, .w-75, .w-100, .mw-100)设置宽度
h-* (.h-25, .h-50, .h-75, .h-100, .mh-100)设置高度
bulb