Bootstrap 5笔记_data-bs-toggle

移动设备优先：

为确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，如下所示：

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

width=device-width 表示宽度是设备屏幕的宽度。

initial-scale=1 表示初始的缩放比例。

容器：

bootstrap 5 需要一个容器元素来包裹网站的内容。

我们可以使用以下两个容器类:

• .container 类用于固定宽度并支持响应式布局的容器，会根据屏幕宽度同比例放大或缩小。
• .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

内边距：.pt-5 边框：.border 背景颜色：.bg-dark (文本：text-)

相应式容器：.container-sm|md|lg|xl (屏幕宽度从小到大)

网格系统：

随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列，例：设置三个相等的列，需要使用三个 .col（-sm）-4 来设置。先设置行(.row)再设置列。

偏移列：offset-md-4往右移动4列格。

文字排版：

a.<h1>样式

b.display标题：class=“display-1”

c.<small>元素用于创建字号更小的颜色更浅的文本

d.<mark> 标签及 .mark 类为黄色背景及有一定的内边距

e. 元素的样式为显示在文本底部的一条虚线边框

f.<blockquote>:对于引用的内容可以在<blockquote>上添加 .blockquote 类

g.ms-auto元素居左；.me-auto元素居右

h.mt-3 设置上边距3rem

颜色：

表格：

基础表格：通过<table class="table">来设置基础表格样式(同html)

条纹表格：通过添加 .table-striped 类，将在 <tbody> 内的行上看到条纹

带边框的表格：.table-bordered 类可以为表格添加边框

悬停：.table-hover 类可以为表格的每一行添加鼠标悬停效果（灰色背景）

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

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

.table-sm 类用于通过减少内边距来设置较小的表格

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

---

图像形状：

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

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

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

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

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

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

信息提示框:

提示框可以使用 .alert 类, 后面加上 .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light 或 .alert-dark 类来实现。

链接：提示框中在链接的标签上添加 alert-link 类来设置匹配提示

关闭提示框：我们可以在提示框中的 div 中添加 .alert-dismissible 类，然后在关闭按钮的链接上(button type=“button”)添加 class=“btn-close” 和 data-bs-dismiss=“alert” 类来设置提示框的关闭操作。

提示框动画：.fade 和 .show 类用于设置提示框在关闭时的淡出和淡入效果

按钮：

按钮类可用于 **<a>**, **<button>**, 或 **<input>** 元素上

设置按钮边框：btn-outline可突出效果

块级按钮：通过添加 .btn-block 类可以设置块级按钮，.d-grid 类设置在父级元素中，如果有多个块级按钮，你可以使用用 .gap-* 类来设置

激活和禁用的按钮：.active 类可以设置按钮是可用的， disabled 属性可以设置按钮是不可点击的。 注意 <a> 元素不支持 disabled 属性，你可以通过添加 .disabled 类来禁止链接的点击。

正在加载的按钮：spin-border

按钮组：

使用 .btn-group-lg|sm|xs 类来设置按钮组的大小。

垂直按钮组：.btn-group-vertical

下拉菜单：.dropdown-toggle和data-bstoggle=“dropdown”

徽章(badges)：

徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要将 .badge 类加上带有指定意义的颜色类

使用 .rounded-pill 类来设置药丸形状徽章

进度条：

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

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

条纹的进度条：.progress-bar-striped

动画进度条：.progress-bar-animated

通过设置不同width:a%可以弄成不同颜色

加载效果：

要创建加载中效果可以使用 .spinner-border 类

使用 .spinner-grow 类来设置闪烁的加载效果

分页：

要创建一个基本的分页可以在 <ul> 元素上添加 .pagination 类。然后在 <li> 元素上添加 .page-item 类，<li> 元素的 <a> 标签上添加 .page-link 类

当前页使用**.active**

不可点击的：.disabled

分页的对齐方式：使用**.justify-content**

.breadcrumb 和 .breadcrumb-item 类用于设置面包屑导航

列表组：

创建列表组，可以在 <ul> 元素上添加 .list-group 类, 在 <li> 元素上添加 .list-group-item 类

链接的列表项：可以将 <ul> 替换为 <div> ， <a> 替换 <li>。如果你想鼠标悬停显示灰色背景就添加group-item-action类。

移除列表边框：.list-group-flush类来删除列表的边框和圆角。

水平列表组：将 .list-group-horizontal 类添加到 .list-group 类后面来创建水平列表组

多种颜色列表项：.list-group-item-success

卡片：

使用**.card** 来创建一个简单的卡片

.card-header类用于创建卡片的头部样式， .card-footer 类用于创建卡片的底部样式我们可以在头部元素上使用 .card-title 类来设置卡片的标题 。 .card-body 类用于设置卡片正文的内容。.card-text 类用于设置卡 .card-body 类中的

标签，如果说最后一行可以移除底部边距。 .card-link 类用于给链接设置颜色。

图片卡片：可以给 <img> 添加 .card-img-top（图片在文字上方） 或 .card-img-bottom（图片在文字下方 来设置图片卡片，如果图片要设置为背景，可以使用 .card-img-overlay 类

下拉菜单：

.dropdown 类用来指定一个下拉菜单。

我们可以使用一个按钮或链接来打开下拉菜单， 按钮或链接需要添加 .dropdown-toggle 和 data-toggle=“dropdown” 属性。div元素上添加 .dropdown-menu 类来设置实际下拉菜单，然后在下拉菜单的选项中添加 .dropdown-item 类。

分割线：.dropdown-divider 类用于在下拉菜单中创建一个水平的分割线

下拉菜单中的标题：.dropdown-header 类用于在下拉菜单中添加标题

定位(对齐)：在**.dropdown后添加.droped(右对齐)或.dropstart(左对齐)**

**下拉菜单弹出方向：**在div元素上添加.drop-menu-end(右下方)；.dropup(向上弹出)；

.dropdown-item-text 类可以设置下拉菜单中的文本项

折叠：

data-bs-toggle 和 data-bs-target 是用于定义组件行为和目标元素的自定义数据属性。

1、data-bs-toggle 属性：

• 用于定义组件的行为，指示组件在何时触发。
• 可以设置的值取决于具体的组件类型，如 "collapse"（折叠菜单）、"modal"（模态框）、"tab"（标签页）等。
• data-bs-toggle="collapse" 用于触发折叠菜单的展开与折叠。
• data-bs-toggle="modal" 用于触发模态框的显示与隐藏。
• data-bs-toggle="tab" 用于触发标签页的切换。

2、data-bs-target 属性：

• 用于指定组件的目标元素或目标选择器。
• 目标元素可以是一个 CSS 选择器，用于标识要操作的具体元素。
• 也可以是一个指定的元素 ID，以 # 开头，如 data-bs-target="#myModal"。
• data-bs-target 属性与 data-bs-toggle 属性一起使用，用于将组件行为与目标元素关联起来。

默认情况下折叠的内容是隐藏的，你可以添加 .show 类让内容默认显示(class=“collapse show”)

使用 data-bs-parent 属性来确保所有的折叠元素在指定的父元素下，这样就能实现在一个折叠选项显示时其他选项就隐藏。

导航：

创建一个简单的水平导航栏，可以在 <ul> 元素上添加 .nav类，在每个 <li> 选项上添加 .nav-item 类，在每个链接上添加 .nav-link 类

对齐方式：.justify-content-center 类设置导航居中显示， .justify-content-end 类设置导航右对齐。

垂直导航：.flex-column类 用来创建

选择卡：使用 .nav-tabs 类可以将导航转化为选项卡。然后对于选中的选项使用 .active 类来标记。

胶囊导航：.nav-pills类

导航等宽：.nav-justified类

动态选择卡：可以在每个链接上添加 data-bs-toggle=“tab” 属性。 然后在每个选项对应的内容的上添加 .tab-pane 类，对应选项卡的内容的 <div> 标签使用 .tab-content 类 。有淡入效果可以在 .tab-pane 后添加 .fade类。(胶囊状动态选项卡只需要将以上实例的代码中 data-bs-toggle 属性设置为 data-bs-toggle=“pill”)

导航栏：

使用**.navbar**类来创建一个标准的导航栏导航栏后面紧跟: .navbar-expand-xxl|xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)。，上的选项可以使用 <ul> 元素并添加 class=“navbar-nav” 类。 然后在 <li> 元素上添加 .nav-item 类， <a> 元素上使用 .nav-link 类。

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

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

不同颜色的导航栏：对于暗色背景 .navbar-dark 需要设置文本颜色为浅色的，对于浅色背景 .navbar-light 需要设置文本颜色为深色的。

品牌(logo):.navbar-brand类用于高亮显示

折叠导航栏：要创建折叠导航栏，可以在按钮上添加 class=“navbar-toggler”, data-bs-toggle=“collapse” 与 data-target=“#thetarget” 类。然后在设置了 class=“collapse navbar-collapse” 类的 div 上包裹导航内容（链接）, div 元素上的 id 匹配按钮 data-target 的上指定的 id

导航栏的表单与按钮：导航栏的表单 <form> 元素使用 class=“form-inline” 类来排版输入框与按钮，或者使用其他的输入框类，如 .input-group-addon 类用于在输入框前添加小标签。

导航栏文本：使用 .navbar-text 类来设置导航栏上非链接文本，可以保证水平对齐，颜色与内边距一样。

固定导航栏：导航栏可以固定在头部或者底部。

我们使用 .fixed-top 类来实现导航栏的固定。

轮播：

轮播图片上添加描述：在每个 **<div class="carousel-item">** 内添加 **<div class="carousel-caption">** 来设置轮播图片的描述文本。

data-dismiss

常见的是在模态窗口中用于关闭模态窗口 data-dismiss=“modal”

data-slide-to、data-slide、data-ride：

• 属性 data-slide接受关键字 prev 或 next，用来改变幻灯片相对于当前位置的位置。
• 使用 data-slide-to 来向轮播传递一个原始滑动索引，data-slide-to="2"将把滑块移动到一个特定的索引，索引从 0开始计数。
• data-ride=“carousel” 属性用于标记轮播在页面加载时就开始动画播放。

模态框：

模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息交互等。

添加动画：使用 .fade 类可以设置模态框弹出或关闭的效果。

模态框尺寸：放在

使用 .modal-dialog-centered 类可以设置模态框水平和垂直方向都居中显示。

模态框滚动条：默认情况下页面会自动生成一个滚动，如果我们只想在模态框里头设置一个滚动条，可以使用 .modal-dialog-scrollable 类。

提示框：

通过向元素添加 data-bs-toggle=“tooltip” 来来创建提示框。title 属性的内容为提示框显示的内容。

位置：默认情况下提示框显示在元素上方。可以使用 data-bs-placement 属性来设定提示框显示的方向: top, bottom, left 或 right。

初始提示框加入:

<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>
1
2
3
4
5
6

弹出框：

通过向元素添加 data-bs-toggle=“popover” 来来创建弹出框。title 属性的内容为弹出框的标题，data-bs-content 属性显示了弹出框的文本内容。

关闭弹出框：可以使用 data-bs-trigger=“focus” 属性来设置在鼠标点击元素外部区域来关闭弹出框。

如果你想实现在鼠标移动到元素上显示，移除后消失的效果，可以使用 data-bs-trigger 属性，并设置值为 “hover”

<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})
</script>
1
2
3
4
5
6

消息弹窗(Toasts):

要创建弹窗可以使用 .toast 类，并在该类里添加 .toast-header 和 .toast-body 类来表示标题和内容。

**注意：**弹窗默认是关闭的，可以使用 .show 来设置显示，关闭弹窗可以在 元素上添加 data-bs-dismiss=“toast”

滚动监听(Scrollspy):

向您想要监听的元素（通常是 body）添加 data-bs-spy=“scroll” 。然后添加 data-bs-target 属性，它的值为导航栏的 id 或 class (.navbar)。这样就可以联系上可滚动区域。

注意可滚动项元素上的 id （<div id="section1">） 必须匹配导航栏上的链接选项 （**<a href="#section1">)。可选项data-bs-offset** 属性用于计算滚动位置时，距离顶部的偏移像素。 默认为 10 px。

设置相对定位：使用 data-spy=“scroll” 的元素需要将其 CSS position 属性设置为 “relative” 才能起作用。

侧边栏导航(Offcanvas):

.offcanvas隐藏内容(默认) .offcanvas.show显示内容。可以使用 a 链接的 href 属性或者 button 元素使用 data-bs-target 属性来设置侧边栏。这两种情况都需要使用 data-bs-toggle="offcanvas"。

方向：.offcanvas-start显示在左侧。-end右侧。-top顶部。-bottom底部。

设置背景及背景是否可滚动：我们可以在弹出侧边栏的时候设置 <body> 元素是否可以滚动，也可以设置是否显示一个背景画布。 使用 data-bs-scroll 属性来设置 <body> 元素是否可滚动，data-bs-backdrop 来切换是否显示背景画布。

小工具：

.text-*设置不同的文本颜色。.bg-gradient 类可以设置背景颜色渐变的效果。

border: .border-1 到 .border-5 类用于设置边框线条的宽度。

**rounded:**rounded-0到rounded类用于设置圆角大小。

浮动：元素向右浮动使用 .float-end 类，向左浮动使用 .float-start 类， .clearfix 类用于清除浮动

居中对齐：使用 .mx-auto 类来设置元素居中对齐 (添加 margin-left 和 margin-right 为 auto)。

宽度使用 w-* (.w-25, .w-50, .w-75, .w-100, .mw-auto, .mw-100) 类来设置。（高度则是h)

间距：语法：property-sides-size

property 代表属性，包含：

• m - 用来设置 margin
• p - 用来设置 padding

sides 主要指方向：

• t - 用来设置 margin-top 或 padding-top
• b - 用来设置 margin-bottom 或 padding-bottom
• s - 用来设置 margin-left 或 padding-left
• e - 用来设置 margin-right 或 padding-right
• x - 用来设置 *-left 和 *-right
• y - 用来设置 *-top 和 *-bottom
• blank - 用来设置元素在四个方向的 margin 或 padding

size 指的是边距的大小：

• 0 - 设置 margin 或 padding 为 0

• 1 - 设置 margin 或 padding 为 $spacer * .25

• 2 - 设置 margin 或 padding 为 $spacer * .5

• 3 - 设置 margin 或 padding 为 $spacer

• 4 - 设置margin 或 padding 为 $spacer * 1.5

• 5 - 设置 margin 或 padding 为 $spacer * 3

• auto - 设置 margin 为 auto

  复选框（一个可切换的开关）：如果你想把复选框变成一个可切换的开关，可以在 .form-check 容器内使用 .form-switch 类

表单：

Bootstrap5 表单布局

• 堆叠表单 (全屏宽度)：垂直方向
• 内联表单：水平方向

使用 .form-label 类来确保标签元素有一定的内边距。

复选框（checkboxe）使用不同的标记。 它们使用 .form-check 包裹在容器元素周围。复选框和单选按钮使用 .form-check-input，它的标签可以使用 .form-check-label 类。

内联表单：如果您希望表单元素并排显示，请使用 .row 和 .col

文本框：使用 textarea 标签创建文本框提交表单，使用 .form-control 类渲染文本框 textareas 标签

使用 disabled/readonly 属性设置输入框禁用/只读

使用 .form-control-plaintext 类可以删除输入框的边框

使用 .form-control-color 类可以创建一个取色器

在 Bootstrap5 中下拉菜单 <select> 元素可以使用 .form-select 类来渲染。

也可以通过 datalist 标签为 <input> 元素设置下拉菜单。

选择区间：

要设置一个选择区间可以在 input 元素中添加 type=“range” 并使用 .form-range 类。长度使用step。

输入框组：

.input-group 类来向表单输入框中添加更多的样式，如图标、文本或者按钮。.input-group-text 类来设置文本的样式。

表单验证：

我们可以使用不同的验证类来设置表单的验证功能。

.was-validated 或 .needs-validation 添加到 <form> 元素中，input 输入字段将具有绿色（有效）或红色（无效）边框效果，用于说明表单是否需要输入内容。

.valid-feedback 或 .invalid-feedback 类用来告诉用户缺少什么信息，或者在提交表单之前需要完成什么。