BootStrap基础知识

老猫-Leo

发布于 2023-12-11 20:41:52

2250

发布于 2023-12-11 20:41:52

文章被收录于专栏：前端大全前端大全

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

栅格规则

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

Flex布局

例：

<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	根据不同荧幕设备，让元素延展高度并显示在同一行。

文字排版

例：

<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轴出现卷轴。

颜色

例：

<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	浅灰背景颜色

表格

基本使用

例：

<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荧幕宽度下显示卷轴

图像形状

例：

<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)

例：

<div class="jumbotron">
  <h1>内容A</h1> 
  <p>内容内容内容内容内容内容</p> 
</div>

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

信息提示框(Alert)

例：

<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" 类来设置提示框的关闭操作。
提示: × (×) 是 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)

例：

<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% 的位置。

其他

例：

<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)

例：

<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)

例:

<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)

基础卡片

例：

<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)

例：

<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部份

例：

<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部份

例：

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	当隐藏了一个吐司元素时，会触发此事件。

例：

var myToastEl = document.getElementById('myToast');
myToastEl.addEventListener('hidden.bs.toast', function () {
  // do something...
});

手风琴(Accordion)

例：

<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)

例：

<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 使标签增加圆角。

轮播(Carousel)

例：

<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 变量。
例：

var myCarousel = document.querySelector('#myCarousel');
var carousel = new bootstrap.Carousel(myCarousel);

可以透过资料属性或 JavaScript 调整选项。对于资料属性，将选项名称附加到 data-bs-，如 data-bs-interval=""。

名字	类型	默认值	说明
interval	number	5000	在一个自动循环的轮播中，项目之间所延迟的时间。如果为 false，轮播不会自动重播。
keyboard	boolean	true	轮播是否应该回应键盘事件
pause	string 或 boolean	“hover”	如果设定为 "hover", 轮播会因为 mouseenter 而暂停﹑并在 mouseleave之时再度执行。如果设定为false，滑入时将不会停止轮播。当在触控装置上设定为 "hover"，则在重播恢复之前，轮播将会停止于 touchend (直到用户完成与轮播的互动)。请注意，这是上述鼠标行为的扩充。
slide	string 或 boolean	false	当用户手动循环第一个元件之后，轮播将自动循环。如果为 “轮播”, 则在载入后自动播放。
wrap	boolean	true	轮播是否应该连续循环，或是会停止。
touch	boolean	true	在触控装置上轮播是否支持向左/向右的交互滑动。

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

例：

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)

例：

<div class="spinner-border" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

The border 读取图示使用 currentColor 来当作它的 border-color，这代表你可以使用文字颜色通用类别来自定义它的颜色。你可以在标准的读取图示上使用任何通用类别中的颜色。
如果你不喜欢 border 读取图示，可以切换到渐变读取图示。虽然技术上来说，它不会旋转，但它会反覆渐变显示！

<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)

例：

<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)

例：

<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类来创建导航。

例：

<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)

例：

<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)

例：

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

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

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

模态框(Modal)

例：

<!-- 按钮：用于打开模态框 -->
<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)

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

例：

<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滚动监听

例：

<!-- 可滚动区域 -->
<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)	设置高度

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020-02-29，如有侵权请联系 cloudcommunity@tencent.com 删除

bootstrap

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

BootStrap基础知识

BootStrap基础知识

栅格系统

栅格类

栅格规则

Flex布局

Flex类作用介绍

文字排版

默认设置

标签及类名

颜色

文字颜色

背景颜色

表格

基本使用

颜色类

其他类

图像形状

组件

霸屏(Jumbotron)

信息提示框(Alert)

按钮(Button)

基础按钮

其他

按钮组(Button-group)

进度条(Progress)

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

其他

分页(Pagination)

列表组(List-group)

卡片(Card)

基础卡片

卡片组(Card-group)

吐司(Toasts)

HTML部份

JS部份

手风琴(Accordion)

标签(Badge)

轮播(Carousel)

读取图示(Spinners)

下拉菜单(Dropdowns)

折叠(Collapse)

导航(Navbar)

表单(Form)

输入框组(Input-group)

提示框(Tooltip)

模态框(Modal)

弹出框(Popover)

Scroll滚动监听

其他小工具

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐