第三方库之响应式功能的bootstrap3.4版本学习小结

本文链接：https://blog.youkuaiyun.com/weixin_44756776/article/details/115557769

本文详细介绍了Bootstrap3.4中的响应式原理、栅格系统、内容及组件的使用，包括重置、排版、代码、图片、按钮、表格、模态框等，还有媒体对象、导航栏、分页、提示和进度条等功能，全面解析了Bootstrap响应式布局和组件的实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简介

响应式开发的框架，一次开发，多次普遍适用
为了能使一个页面同时在手机端和pc端都正常使用

响应式原理

特点

网页的宽度自动调整
尽量少用绝对宽度
字体要使用rem、em作为单位—>rem对应根节点的字体大小(html元素或者xml元素),html元素的font-size默认为16px；一般根节点的font-size需要结合用户的屏幕尺寸动态设置而不是简单的写死成多少px
布局要使用浮动、弹性布局

媒体查询：根据一个或多个基于设备类型、具体特点和环境来应用样式
@规则
@media 媒体查询
@charset 定义编码
@import 引入css文件(css模块化)
@font-face 引入自定义字体

@import url(xxx.css) (min-width:200px;)—>如果设备的最小宽度为200px，则引入该css文件

@media all and (min-width:400px){
div{
font-size:100px;
}
}

and表示与运算，all表示的是所有设备，这句话表示所有最小宽度小于200px的设备该样式生效

媒体类型

all:所有设备
print:打印机设备
screen:彩色的电脑屏幕
speech:听觉设备。针对有视觉障碍的人士，可以把页面内容以语音的方式呈现的设备

注意：tty、tv、projection、handheld、braille、embossed、aural等几种类型在媒体查询4中已经废弃

媒体特性

width:宽度
min-width:最小的宽度，设备宽度只能比这个大
max-width:最大的宽度，宽度只能比这个小
height:高度
min-height:最小的高度，设备高度只能比这个大
max-height:最小的高度，设备高度只能比这个大
oritentation 方向
landscape:横屏(宽度大于高度)
portrait:竖屏(高度大于宽度)
aspect-ratio 宽高比：number/number
-webkit-device-pixel-ratio:像素比(webkit内核的私有属性),大多数设备为2

逻辑运算符—用来做条件判断

and 合并多个媒体类型(并且的意思)
, 匹配某个媒体查询(或者的意思)
not 对媒体查询结果取反
only 仅在媒体查询匹配成功后应用样式(防范老旧浏览器)

栅格系统

把我们屏幕的尺寸在一行分了12个列
提供了五个默认的响应层(屏幕尺寸范围)
使用了flex(4.x版本,3.x版本使用的是流式布局)

栅格系统

class固定

<!-- 宽度为100% -->
<div class="container-fluid">
    <div class='row'>
        <div>页面</div>
        <!-- class='col-响应层名称-number' 超小屏忽略响应层名称 -->
        <!-- 这里每行最多12列
            版本不同，具体的类名和尺寸也不同
         -->

    </div>
</div>

<div class="container">
    <div class='row'>

    </div>
</div

container

宽度是一个自适应的具体宽度数值使用具体的类名的时候宽度就会使用max-container-width,小于规定的屏幕宽度的时候，一行只有一列，并且宽度为它的下一层响应值,不使用具体的类名的时候自适应调节响应值

超小屏那一档宽度为auto，用于都可以设置12列

设置等宽列
平分宽度，通过设置列的class为col(flex)
多行等宽列
在希望断开的地方添加一个.w-100的div(设置这个div的heigth:auto，border:none)，能够让后面的列换行
设置一个列宽，剩下的自动平分
设置需要自动平分宽度的盒子的className为col
设置根据内容调整列的宽度

使用.col-{breakpoint}-auto,breakpoint代指响应层名称

设置所有的尺寸下，都占同样的列数(一行中永远可以设置12列)

使用.col-*

混合排列或者组合模式

在超大屏幕下，一行显示6个div,一个div应该占2个
在大屏幕下，一行显示4个div
中屏幕下，一行显示3个div
这样的情况下可以给一行里面的每一个div写多个类名，他会根据自己屏幕进行自动切换；

对齐

垂直方向的对齐(flex-box的纵轴上的对齐方式)
1. 行的对齐方式(row)
- align-items-start 顶对齐
- align-items-center 中间对齐
- align-items-end 底对齐
1. 列的对齐方式(col)
- align-self-start 顶对齐
- align-self-center 中间对齐
- align-self-end 底对齐
水平方向的对齐(flex-box主轴上的对齐方式)
只能设置行(row)
- justify-content-start 左对齐
- justify-content-center 居中对齐
- justify-content-end 右对齐
- justify-content-around 分散居中对齐(每个元素两侧距离是一样的)
- justify-content-between 左右两端对齐(元素之间的距离是自动平分的)

列排序

使用order-{breakpoint}-*
可以改变列的位置，*表示多少列

这也有助于SEO，爬行的时候是从上往下的，一般认为上面的内容要比下面的内容重要，在不改变元素结构的时候可以在视觉层面将某列放到后面

order-first 代表排在第1位
order-last 代表排在最后1位

mt-5类名表示margin-top:5px;

列偏移

使用offset-{breakpoint}-*

只会偏移设置了类名的，*表示偏移的列数

间距

使用margin工具可以让列之间产生间距

mr-{breakpoint}-auto 使右侧的列远离到最右边
ml-{breakpoint}-auto 使右侧的列远离到最左边

和列偏移不同的是，给某一列设置了mr-auto/ml-auto之后，它后面的列会随之一起移动

嵌套

每一个列里面可以再继续放行，那嵌套里面的元素就会以父级的宽度为基准，再分12个列

content

重置

方式
不仅消除了元素的默认样式，而且额外添加了一些属性

css中可以声明变量-valName:value,使用的时候var(valName)
所有元素，伪元素都是怪异盒模型
去掉了margin-top
嵌套在li元素中的ul无margin-bottom

tabel元素
- caption元素：表格的标题
- thead元素:表头
tr > td元素||th元素
- tbody元素
tr > td元素||th元素
dl元素
dt为名词元素
dd为名词解释元素
form元素
- fieldset元素-默认有边框margin、padding
  - legend元素：和fieldset元素结合使用
- label元素：变成了inline-block，设置了margin-bottom
textarea元素：只能改变高度–>resize:vertical

排版

普通文本元素设置h*类名。可以出现和````h*```元素相同的样式；
h1元素设置.display-*来改变样式(字体大小等)
small元素
引言，使用类名lead–>突出样式
内联文本
- mark元素，标记重点文本
- ins元素，新插入文本
- del元素，删除文本
- strong元素，加粗
- em元素，倾斜
- .mark代替mark元素，.small代替small元素
缩写
- abbr元素，title属性表示全称，元素的InnerText表示缩写；.initialism可以将字体变得小一点
引用与署名
- blockquote.blockquote
  - 引用和署名放在footer.blockquote-footer中
  - cite元素中放名字，突出样式
对齐
- .text-left:左对齐
- .text-center:居中对齐
- .text-right:右对齐
无特效列表
- 设置ul的类名为list-unstyled，对嵌在li中的ul不生效
- ul.list-inline：
  - li.list-inline-item：在一行中显示,3.x版本不需要这一步
text-truncate可以让超出文本内容省略，3.x版本用的是text-overflow

代码

code元素，行内代码，使用实体字符来表示< >
pre元素，默认高度340px，内容超过的时候出现scroll
变量
- var元素中可以写变量
按钮
- kbd元素，内容变成按钮

图片

img.img-fluid:img元素变成了响应式的元素，需要放在row中
img.img-thumbnail:响应式缩略图,由圆角边框
img.rounded:圆角边框
图片对齐方式
- 自己对齐，左边左浮动，右边右浮动，.float-left,.float-right
- 通过父级调整对齐:给父级.text-center,text-right,text-left
- 自己居中，.d-block, mx-auto
Picture元素
可以解决很多小问题，多张图片根据用户选择下载
配合媒体查询使用

.webp的图片文件特别小，但是仍然是高清模式，这种格式ie不支持，chrome||firefox||ios9.3+||android4.4+
表格

更多类名参考https://getbootstrap.com
响应式
div.table-responseive>table;特点是thead是英文的时候才会出现滚动条，中文会换行

figures
图文区
图片后面有一个标题
figure.figure>img.figure-img+figcaption.figure-caption>text

utilities

边框

设置边框
直接设置类名：.border、.border-left、border-right、border-bottom、border-top;
去除边框 .border-0、.border-direction-0

去除边框要生效必须是先设置了边框

边框颜色
.border-primary…
查看bootstrap
边框圆角
.rounded-{direction}，圆角大小无法设置

.py-2表示2rem的padding-top和padding-bottom

颜色

颜色类型
定义在了:root结点，通过sass去取变量
以类名的形式给元素设置文本颜色或者背景颜色
.type-color

primary、secondary、success、danger、warning、info、light、body、muted、white、dark…

display属性
- d-inline
- d-block
- d-inline-blcok
- d-flex
- d-table
- d-none
在3.x版本只有三种，block,inline,inline-block,显示className为visiable--block，隐藏的类名为hidden-，打印的类名为visiable-print-block
隐藏：只在一个尺寸下显示，其他尺寸下都要隐藏
1. 隐藏分为两个部分
  1. 比它大的尺寸隐藏
  2. 比它小的尺寸隐藏
    d-{breakpoint}-block表示尺存大于breakpoint时显示，d-none表示小于breakpoint时消失
    d-{breakpoint}-none表示在大于breakpoint层的尺寸时隐藏(所以如果想要单独在某一层隐藏的话需要设置该层d-none,而且要设置该层的上一层d-{breakpoint}-block)
在各种尺寸下都隐藏
基于上面的规则设置类名，注意超小屏下的特殊类名
打印的时候显示
d-print-block

嵌入功能

3.x版本无嵌入

.embed-responsive + 宽高比的类名(查看文档)

flex

3.x版本使用的是流式布局，4.x版本使用的是flex

启用flex

div.row默认是flex
.d-flex、d-inline-flex
响应式的弹性盒模型
- d-{breakpoint}-flex/inline-flex
子元素的排列方向
1. .flex-row 正序水平排列
2. .flex-row-reverse 倒序水平排列
3. .flex-colum 正序垂直排列
4. .flex-colum-reverse 倒序垂直排列
响应式的排列方式
flex-{breakpoint}-direction:在具体的breakpoint层+ direction排列
对齐方式

子元素的对齐方式
1. 主轴上的对齐 - 水平对齐
- justify-content-left/right/center/between/around(可以做导航)
- 响应式：justify-content-{breakpoint}-direction
1. 交叉轴(纵轴)上的对齐 - 垂直对齐、
注意盒子的旋转的时候主轴不会跟着变化
- align-items-start/end/center/baseline/stretch(子元素的高度没有设置或者说设置为auto的时候才会生效)
- 响应式：align-items-{breakpo}-start/end/center/baseline/stretch(子元素的高度没有设置或者说设置为auto的时候才会生效)
子元素自身的对齐方式
- align-self-direction
- 响应式：align-self-{breakpoint}-direction

填满：将每行剩余空间占满
将剩余空间需要给哪一列就给那列添加flex-fill类

响应式：.flex-{breakpoint}-fill

伸缩值

flex-grow-* 扩展比例，*为0表示不扩展，数字1表示扩展，只有这两个数字
flex-shrink-* 收缩比例，*为0表示不收缩，数字1为收缩
- 伸缩响应式
  flex-{breakpoint}-{grow/shrink}-0/1

w-100表示宽度为100%

自动的边距:无响应式

mr-auto:margin:auto
py-:paddind: auto

wrap
flex的wrap属性，注意.flex-wrap-reverse只颠倒行的顺序

响应式：flex-{breakpoint}-wrap-reverse:固定breakpoint层+满足

order
flex的order属性
http://css.doyoe.com/properties/flex/order.htm

响应式的排序:.order-{breakpoint}-*:只在breakpoint层+ 满足

多行对齐
对于单行是没有效果的,flex-box中的项目是多行的
给项目的父元素(也就是flex-box)加className.align-content-direction

多行响应式对齐:align-content-{breakpoint}-direction

utilities else

浮动
- .float-right
- .float-left
flex中的子元素设置浮动无效果,3.x版本里的浮动是.pull-left/.pull-right
响应式的浮动
.float-{breakpoint}-left/right

float-none:不浮动

清除浮动：.clearfix，给浮动元素的父级设置

关闭图标
.close

button[type="button"].close>span{&times;}

×-->X

图像替换
.text-hide,给元素设置bg-img，然后添加class，图像就会替换文字

这样的目的是SEO

内容溢出
.overflow-auto、.overflow-hidden
定位

position-static
position-relative
position-absolute
position-fixed
1. .fixed-top：固定在顶部，默认left=0
2. .fixed-bottom：固定在底部
position-sticky：粘性定位，这个可以用来做nav，粘性定位需要挡在body元素下的第一层级才会出现效果，firefox、chrome 50+才兼容
1. .sticky-top:
2. .sticky-bottom:

定位的值:*取值只能为0或50或100，代表的是百分比

.top-*:对应top
.start-*：对应left
.bottom-*：对应bottom
.end-*：对应right

屏幕阅读器
便于某些视觉障碍人士使用
.sr-only
阴影

没有阴影：.shadow-none
小阴影: .shadow-sm
正常的阴影: .shadow
大阴影: .shadow-lg

尺寸

注意只能是这里列举的这些预设值，而且尤其是mx-100和mh-100，当元素原来的width和height超出了父级元素的width和height，添加了这两个类名之后会width和height都会减小

width
- .w-25
- .w-50
- .w-75
- .w-100
- .w-auto
max-width
- mw-100
height:数字表示的是百分比，取的是父级元素的宽高
- .h-25
- .h-50
- .h-75
- .h-100
- .h-auto
max-height
- .mh-100

间隔

属性设定

m表示margin
p表示padding

边缘设置

l/r/t/b
x/y

尺寸设定

0代表样式值为0
1表示0.25rem，2代表0.5rem，其余预设值查看文档

间距的响应式
{property}{sides}-{breakpoint}-{size}
常规流块盒的居中，.margin-auto,3.x版本的居中为.center-block

文本

.text-justify:使得多行文本的每一行右边占满

响应式：.text-{breakpoint}-start/end/center

换行和溢出处理

.text-wrap/nowrap:是否换行
.text-truncate:溢出打点显示
文字大小写转换

.text-lowercase：小写
.text-uppercase：大写
.text-capitalize:首字母大写

加粗和斜体

.font-weight-bold
.font-weight-normal
.font-weight-light
.font-italic

等宽字体

.text-moonspace

垂直对齐

参考文档，只对有inline特性的元素起作用

可见性

.visiable：看见
.invisable:看不见，占据空间
.d-none:看不见，不占据空间

components

警告框

.alert
颜色：.alert-color,背景颜色+字体颜色
.alert-link:使用.alert-link实用程序类可在任何警报中快速提供匹配的彩色链接。
在警告框中添加额外的内容

.alert-heading-继承颜色

关闭警告框

.alert-dismissable(将内部的.close类元素添加定位)，给需要关闭的元素添加属性[data-dismiss=“alert”]需要jQuery和bootstarp.js

.fade、.show：消失和出现的时候渐隐渐现的效果，需要同时添加(使用的transition)

关闭警告框还可以使用封装的javascript方法

徽章

.badge，再添加一个.bg-color来改变样式
.rounded-pill：胶囊徽章

还可以结合a元素，给a元素添加类名

面包屑导航

nav.breadcrumb>ul.breadcrumb>li.breadcrumb.active(当前页)>a{导航项目}

Buttons

.btn

颜色：.btn-color, 还有一个比较特殊:.btn-link

其他类型的按钮
1. a.btn
2. input[type=“button” value=“content” class=“btn btn-color”]
3. 带边框的按钮
  .btn,.btn-outline-color
大小(只有这三种)
1. .btn.lg
2. .btn
3. .btn.sm
状态
1. 启用状态：.active
2. 停用状态: .disabled
切换按钮的active状态
.data-toggle=“button”
选项卡

.btn-group:按钮组
div[data-toggle=‘buttons’].btn-group.btn.group-toggle>(label.btn.btn-color.active>input[type=“radio” name=“options” checked]>{内容})*n

按钮组

div.btn-group>button.btn.btn-color*n

缩放
添加到按钮组

.btn-group-sm
.btn-group-lg

内嵌(下拉菜单):需要bootstrap的poper.js

<div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
      Dropdown
    </button>
    <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
    </ul>
  </div>

垂直排列
.btn-group-vertical：原理是flex-direction:column

卡片

.card宽度继承父级元素，有圆角边框
.card-body：主体，添加了一个padding值
- .card-title:卡片标题，写在card-body中
- .card-subtitle：卡片副标题
- .card-text：卡片的文本内容
- .card-link：给a元素添加
.card-img-top/bottom:图片和.card-body放在同一级别(都是.card的子元素)
列表组、页眉、页脚

.card-header：页眉
.card-footer:页脚
列表组：ul.list-group.list-group-flush>li.list-group-item

组合模式
.card>.card-header+img.card-img-top+.card-body>(.card-title+.card-text+a.card-link)+.card-footer
尺寸
w-50、写在.card的行间
对齐：实现的实质是text-algin:center,所以说这个针对是文本类的对齐(inline/inline-block，放在block中的文本之所以可以生效，是因为浏览器会给文本自动包裹一层匿名行盒)

text-left
text-center
text-right

导航
图像

.card-img-top：图片在card-body上面
.card-img-bottom：图片在card-body下面
图片衬于文字下方：将card-body类名改为card-img-overlay

卡片样式

背景色：给.card添加bg-color
边框：给.card添加border-color
页眉和页脚的边框：给.card-header或者.card-footer添加.border-color

卡片排版

卡片组
.card-group：将多个card放到这个容器中
卡片之间是互不相连的，但是尺寸是一样的
.card-deck:卡片之间出现间隙
瀑布流(这是4.x版本，实质是用columns布局实现的，而columns布局根本不适合用来做瀑布流，因为columns布局是尽量使得最高柱成为多数)
.card-columns>.card

轮播图

轮播图所有的内容都放到div.carousel容器中(相对定位元素) data-ride=carousel"

.slide：滚动效果
.carousel-fade:过度透明度-需要写上slide

子元素

.carousel-inner:放所有的图片
.carousel-item>img:将需要显示的项添加类名active

包含控制项

给.carousel一个id
同级别添加一个href为#id的a元素(:target选择器实现)

<a href="#id" class="carousel-control-prev" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
</a>
<a href="#id" class="carousel-control-next" data-slide="next">
    <span class="carousel-control-next-icon"></span>
</a>

包含指示器

<ol class="carousel-indicators">
    <li data-target="#id" data-slie-to="0" class="active"></li>
    <li data-target="#id" data-slie-to="1"></li>
    <li data-target="#id" data-slie-to="2"></li>
<!-- 图片有多少li就有多少 -->
</ol>

添加文本
div.carousel-caption>{detail}放在.carousel-item的子元素中(和img同级别)
用法

data-interval：轮播图播放的duration，该属性可以设置给单独的item，添加该属性即可
data-keyboard=“true or false”:表示是否可以通过键盘进行操纵，需要提前点击轮播图获得焦点
data-pause:‘hover’–>表示鼠标hover到轮播图之后停止播放
data-ride:是否自动播放,值为carousel表示自动播放
data-wrap:‘true or false’,是否为循环播放，false的话播放到最后一张图的时候停止

一个小坑：a元素不添加href属性的话点击它会刷新页面

方法

将元素框架的自定义属性全部删除

开始播放
$(’#carousel’sid’).carousel({
interval:1000
});
$(’#carousel’sid’).carousel(‘cycle’);
暂停播放
$(’#carousel’sid’).carousel(‘pause’);
上一张切换
按钮.click(function(){
$(‘carousel’sid’).carousel(‘prev’)
};
下一张切换
按钮.click(function () {
$(‘carousel’sid’).carousel(‘next’);
})
指示器
liChildren.each(function (index, item) {
$(item).click(function () {
$(‘carousel’sid’).carousel(index);
})
})

事件

slide.bs.carousel:开始切换图片时触发的事件
slid.bs.carousel:结束切换之后触发的事件

额外的在事件对象身上的个属性

e.direction ：图片走的方向
e.relatedTarget：当前项的DOM元素
e.from：当前索引
e.to：当前项的下一个索引

折叠面板(collapse)

<p>
    <a href="#idName" class="btn btn-primary" data-toggle="collapse">名词</a>
    <button class="btn btn-primary" data-toggle='collapse' data-target="#idName">名词</button>
</p>
<!-- show是指页面一开始显示，并不影响功能 -->
<div class="collapse show" id="idName">
    <div class="card cardbody">
        名词解释...
    </div>
</div>

多个目标

将多个折叠块添加class:比如all,然后将一块多个目标按钮的data-target属性设置为.all,此时无法使用a元素

手风琴
给组的外面的加一层div.accordion#accordion，在每一个折叠块添加属性 data-parent="#accordion"该属性值也可以填组外容器的.accordion
方法
给按钮添加点击事件，点击的时候使得折叠块出现或消失
事件

show.bs.collapse:调用show方法时发生
shown.bs.collapse:折叠块完成显示后触发
hide.bs.collapse:调用hide方法时发生
hiden.bs.collapse:折叠块完成隐藏后触发

下拉菜单

button

<div class="dropdown">
    <button class="btn btn-color dropdown-toggle" data-toggle="dropdown">menuName</button>
    <div class="dropdown-menu">
        <a href="#" class="dropdown-item">北京</a>
        <a href="#" class="dropdown-item">上海</a>
        <a href="#" class="dropdown-item">广州</a>
    </div>
</div>

a元素

<div class="dropdown">
    <a class="btn btn-color dropdown-toggle" data-toggle="dropdown">menuName</a>
    <div class="dropdown-menu">
        <a href="#" class="dropdown-item">北京</a>
        <a href="#" class="dropdown-item">上海</a>
        <div class="dropdown-divider"></div><!--分割线 3.x版本叫做divider-->
        <a href="#" class="dropdown-item">广州</a>
    </div>
</div>

分离式下拉菜单
其实是两个按钮，只不过放在了一起，需要使用按钮组

<div class="btn-group dropdown">
    <button class="btn btn-color">menuName</button>
    <button class="btn btn-color dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" ></button>
    <div class="dropdown-menu">
        <a href="#" class="dropdown-item">北京</a>
        <a href="#" class="dropdown-item">上海</a>
        <a href="#" class="dropdown-item">广州</a>
    </div>
</div>

下拉菜单尺寸
给按钮添加类 btn-lg btn-sm

3.x版本有三个尺寸，还有btn-xs

方向

给最外层设置.dropdown:向下展开，.dropleft,.dropright,.dropup,.dropbottom，如果相应的方向没有足够的空间，浏览器会自行调整
注意改变最外层的类名即可，不需要改变内部的.dropdown-prop

下拉菜单的对齐：dropdown-menu-right(右对齐)

非交互式的下拉菜单
<span class="dropdown-item-text">非点击的标题</span>

状态

默认激活：.active
禁用：.disabled

偏移的属性

给按钮添加类名：data-offset=“x,y”
给下拉菜单添加类名：data-reference=“parent”:相对于父级来确定位置

js的方法与事件

方法：下拉菜单身上的方法dropdown的参数

$(’.dropdown-menu’).dropdown(‘下面的各个参数’)

toggle Toggles the dropdown menu of a given navbar or tabbed navigation.
show Shows the dropdown menu of a given navbar or tabbed navigation.
hide Hides the dropdown menu of a given navbar or tabbed navigation.
update Updates the position of an element’s dropdown.
dispose Destroys an element’s dropdown. (Removes stored data on the DOM element)
getInstance Static method which allows you to get the dropdown instance associated with a DOM element.

toggle有的时候不正常，解决方案

$('#dropdown').toggle(function () {
    $('dropdown').dropdown('show');
}, function () {
    $('$dropdown').dropdown('hide');
})

事件

需要给下拉菜单的父元素添加

show.bs.dropdown Fires immediately when the show instance method is called.
shown.bs.dropdown Fired when the dropdown has been made visible to the user and CSS transitions have completed.
hide.bs.dropdown Fires immediately when the hide instance method has been called.
hidden.bs.dropdown Fired when the dropdown has finished being hidden from the user and CSS transitions have completed.

表单1

.from-group:表单组,放置一组匹配的表单，而不是放置多个表单，.form-group需要在form元素内部

label的for属性和Input的id值相同，这样的话当用户点击label元素的文字后就可以聚焦到input输入框中

给表单元素添加类名:.from-cotrol
当需要给表单添加一个说明时，添加一个small.form-text.text-muted元素
给需要禁用的表单添加disable布尔属性

如果select选择框需要多选，添加布尔属性mutiple

type="file"的表单，添加类名.form-control-file
滑块
.form-control-range
单选框和复选框
选择框要放在div.form-check容器中

复选框的类名:.form-check-input
复选框的label的类名：.form-check-label
单选框
单选框的类名:.form-check-input
单选框的label的类名：.form-check-label
除此之外，同一组单选框需要添加相同的name属性,属性值自定义
需要将多个复选框或者单选框放在同一行
给容器div.form-check添加.form-check-inline

表单的尺寸(给input添加)

大尺寸：.form-control-lg、.col-form-label-lg
小尺寸：.form-control-sm、.col-form-label-sm

只读属性
布尔属性：readonly-只读文本

.fomr-control-plaintext表示没有边框的只读文本

表单栅格排列

这时form元素必须放在row和col的外面

表单表格式的排列

将.row换为.form-row：两者唯一区别就是间距变小了
.form-group会独占一行

水平表单

.col-form-label用来决定跟后面的表单进行垂直对齐，给label元素设置
.form-group并不是flex-box

内联表单(在一行中显示)

间距通过添加margin类实现
给form元素添加类名form-inline

表单2

验证

给form元素添加class=“needs-validation”,布尔属性novalidate(阻止浏览器自己的验证)
给需要验证的input元素添加布尔属性required
验证成功的类以及验证失败的类

验证完成之后通过js动态的为form元素添加.was-validate
1. 验证成功：.valid-feedback
2. 验证失败：.invalid-feedback

form元素
1. checkValidity()–>验证是否通过，返回布尔

自定义表单

主要还是为了解决样式相相统一

给.form-group添加.curtom-control
针对不同类型的Input还需要添加相对应的类,比如type="checkbox"的话就添加.custom-control-checkbox
给input添加类.custom-control-input
给label添加.custom-control-label

将需要在一行中显示的.form-group添加类：.custom-control-inline

禁用：布尔属性-disabled
下拉菜单(select)
1. 给.from-group添加.custom-select
滑块
1. 给type="range"的Input输入框添加class=“custom-range”
2. 可以给定区间：min=“number” max=“number” step=“number”
step为步长,min表示最小值,max表示最大值
文件选取
1. 给.form-group添加.custom-file
2. 给type="file"的input输入框添加class=“custom-file-input”
3. 给和input相对应的label元素添加.custom-file-label

输入框组

在表单左右添加一些额外的组件

.input-group(和.form-group同级)

.input-group-prepend(添加了margin-right:-1px,为了结合Input之后消失右边框)：写在input元素之前，表示放到左边
- span.input-group-text
input-group-append：写到input元素之后，表示放到右边
- span.input-group-text

尺寸

小尺寸:.input-group-sm
正常尺寸：默认
大尺寸：.input-group-lg

多选框和单选框
给 span.input-group-text添加子元素input[type=‘checkbox’]或者input[type=‘radio’]
多个输入框与多个额外组件
只需要在结构中多添加几个Input元素或者多添加几个span.input-group-text
按钮组合
将.input-group-prepend/append的子元素span改为button.btn.btn-color
带下拉列表的按钮组合
将下拉菜单的结构写到.input-group-prepend中
自定义表单
可以将span元素变为label元素，还需要加上.input-group-text，如果这里是button元素，则不需要该类名
自定义表单组合-自定义文件

<div class="custom-file">
    <input type="file" class="custom-file-input" id="file1">
    <label for="file1" class="custom-file-label"></label>
</div>

超大屏幕

.jumbotron
全屏显示:给body子元素设置

.jumbotron .jumbotron-fluid

列表组

ul.list-group
- li.list-group-item:添加active表示激活
- 给每个项目添加disabled类名表示禁用
a元素和button元素的列表组：div.list-group>a.list-group-item.list-group-item-action+button.list-group-item.list-group-item-action

button元素的禁用是添加布尔属性disabled

.list-group-item-action表示的是有hover效果
.list-group-flush表示列表组没有边框

添加背景颜色：.list-group-color
使用徽章
在列表组的每一个Item中添加徽章

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A list item
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A second list item
    <span class="badge bg-primary rounded-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A third list item
    <span class="badge bg-primary rounded-pill">1</span>
  </li>
</ul>

自定义内容
结合使用

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small>3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small>And some small print.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small class="text-muted">3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small class="text-muted">And some muted small print.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small class="text-muted">3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small class="text-muted">And some muted small print.</small>
  </a>
</div>

选项卡
使用a元素的锚点特点/使用span元素的话添加data-target="#id"

<!-- .tab-content用来选择到以下子元素，来使其隐藏或显示 -->
<div class="tab-content">
    <!-- 子元素的id要和a元素相照应,给这些子元素同时添加fade表示淡入淡出，但是这时需要给第一个子元素添加show -->
    <div class="tab-pane active" id="xxx"></div>
    <div class="tab-pane" id="xxx"></div>
    <div class="tab-pane" id="xxx"></div>
    <div class="tab-pane" id="xxx"></div>
</div>

js的方法与事件

方法：列表项dom元素调用show方法
事件

show.bs.tab ：This event fires on tab show, but before the new tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.
shown.bs.tab This event fires on tab show after a tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.
hide.bs.tab This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use event.target and event.relatedTarget to target the current active tab and the new soon-to-be-active tab, respectively.
hidden.bs.tab This event fires after a new tab is shown (and thus the previous active tab is hidden). Use event.target and event.relatedTarget to target the previous active tab and the new active tab, respectively.

模态框(弹出层)

在一个页面只有一个模态框(多个可能会出问题)
将模态框放在body的子元素下 .modal(最外层)淡入淡出.fade，使用id来控制
1. .modal-dialog(模态框父级，width等等)
  - .modal-content(flex-box)
2. 模态框的内容
- .modal-header
  - .modal-title
  - button.class[data-dismiss=“modal”]>span.×
- .modal-body
  主体内容
- .modal-footer
  - button.close[data-dismiss=“modal”]:关闭按钮(可以没有)

遮罩层：js动态生成，放在了body子元素的最后
wh和vh是两个将可视区分成了100份之后每一份的大小

.modal-body会有自动的滚动条
使得模态框垂直居中：将.modal-dialog-centered加在.modal-dialog
在模态框中添加的组件和模态框是一起的，关闭模态框组件也关闭
栅格系统
将栅格系统写在.modal-body中
不同的modal内容，需要给模态框按钮添加属性data-whatever=‘value’,然后点击的时候的通过js注册事件show.bs.modal来实现将自定义属性填写到弹出层中
尺寸大小
不同于前面的尺寸只有sm和lg，此外还加入了xl(超大尺寸)

给.modal添加class bg-example-modal-xl(sm/lg)
给.modal-dialog添加class modal-xl(sm/lg)

data属性
需要添加在Button身上(模态框按钮上)

data-backdrop:是否包括遮罩层(传true or flase)
data-keyboard:是否可以通过esc关闭模态框
data-focus:初始化时将焦点聚在模态上(有时候会出问题)
data-show:初始化时模态框是否显示，bs5消失

方法和事件

模态按钮的show方法和hide方法

https://getbootstrap.com/docs/5.0/components/modal/
2. 事件

show.bs.modal
shown.bs.modal
hide.bs.modal
hidden.bs.modal

媒体对象(media Object)

也就是类似于那种圣杯布局(图文混排)

.media
1. a>img
2. .media-body:
嵌套
.media-body中可以继续来一个.media
对齐

顶部对齐
- .align-self-start
垂直对齐
- .align-self-center
底部对齐
- .align-self-end

顺序 :.order-*
列表
- ul.list-unstyle
  - li.media

<ul class="nav nav-pills mb-3" id="pills-tab">
  <li class="nav-item">
    <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button">Home</button>
  </li>
  <li class="nav-item">
    <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button">Profile</button>
  </li>
  <li class="nav-item">
    <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button">Contact</button>
  </li>
</ul>
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home">...</div>
  <div class="tab-pane fade" id="pills-profile">...</div>
  <div class="tab-pane fade" id="pills-contact">...</div>
</div>

垂直选项卡
使用.col-*分隔开两个结构
方法与事件

针对选项卡 dom.show():显示

事件：

show.bs.tab
shown.bs.tab
hide.bs.tab
hidden.bs.tab

导航栏

单独放到body元素的子元素中nav.navbar

.navbar-expand-lg:当屏幕是大屏以上的时候，使导航从左边开始并在一行排列

.navbar-brand 用于您的公司，产品或项目名称。
.navbar-nav 全高和轻量级导航（包括对下拉菜单的支持）。
.navbar-toggler 与我们的崩溃插件和其他导航切换行为配合使用。
适用于任何表单控件和动作的Flex和interval实用程序。
.navbar-text 用于添加垂直居中的文本字符串。(想让文本靠右的话设置前面的导航内容为mr-auto);
.collapse.navbar-collapse 用于通过父断点分组和隐藏导航栏内容。
添加可选项
.navbar-scroll来设置max-height和滚动扩展导航栏内容。
关于背景颜色：

.nav-light：深色的字体颜色，在
浅色背景下使用
.nav-dark:浅色的字体颜色，在深色背景下

居中容器

可以在导航容器外部嵌套一个div.container
可以在导航容器内部嵌套一个div.container,把导航内容嵌在内部容器中

定位
给导航容器使用前面的定位类即可
响应式
父元素添加.navbar-expand-{breakpoint}

当尺寸小于固定层之后出现图标，点击图标出现纵向导航栏
图标:span.navbar-toggle-icon

将导航栏内容放到折叠面板中，添加class为.navbar-collapse
.navbar-nav:尺寸在md以下时,flex-direction:row

导航栏实例

分页

分页的基础父级class:.pagination
组件每个项的类名：.page-item
每个项内部a元素：.page-link

上一页的实体字符：«
下一页的实体字符：»

禁用: .disabled
激活：.active
尺寸

.pagination-lg:大尺寸
.pagination-sm：小尺寸
.pagination：正常尺寸

对齐
主轴： justify-content-start/end/center

popovers

需要手动使用Js初始化

<button class="btn btn-dark" data-toggle="popover" title="提示框标题" data-content="提示框内容" data-trigger="focus/hover" data-placement="left/top/bottom/right">提示框</button>
<!-- 设施禁用元素弹出提示框的话，将button元素嵌套在span元素内部，给button元素添加style="pointer-events:none;" -->
<script>
    // jquery
    $(function () {
        $('[data="popover"]').popover();
    })
</script>

tooltips

和popver用法类似
https://getbootstrap.com/docs/5.0/components/tooltips/

progress and scrollsBy

父级：.progress是总进度
子集：.progress-bar嵌入在.progress内部，表示进度条，需要给width，行间样式给百分比

子集会继承父级的高度，所以给父级高度来控制粗细

多个进度条
多个.progress-bar放在.progress中
条纹进度条
.progress-bar-striped
动画进度条(最好结合条纹进度条)
.progress-bar-animated

scrollsBy

只能在导航和列表组中使用

由滚动监控和滚动元素两部分组成

滚动监控类似于导航栏
滚动元素
- .scrollBody data-spy=‘scroll’ data-target="#idName/.className" data-offset=“0”>h#idName+p
- 需要给滚动元素设置高度

嵌套导航：类似百度百科
列表组

旋转加载和推送消息框(spinners and toasts)

加载器改变颜色使用.text-color

旋转加载(实质就是缺了右边框的transition)
.spinner-border
缩放圆
.spinner-grow
size

小尺寸：.spinner-border-sm/.spinner-grow-sm，需要单独设置
大尺寸：通过行间样式设置width和height

buttons
一般结合旋转加载再使其disabled
推送消息框
一般显示再客户端桌面右下角
最外层父级 .toast 自动隐藏:data-autohide=“false”
内部两部分

需要使用js初始化,调用最外层的父级dom元素的方法.toast.show()

.toast-header，
标题与关闭按钮
.toast-body

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded me-2" 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>

对齐:用一层flex-box将.toast包裹起来，设置以下类名
主轴：.flex-justify-content-start/center/end
data-prop

data-animation
data-autohide
data-ddelay

方法和事件
toast

字体图标

把小图标做出字体，可以像设置字体一样设置,而且字体图标不会失真

需要引入fonts文件夹,v3.4.1

图标基础的class为.glyphicon，具体到哪个图标查询v3.4.1即可

button库：buttons

形状与尺寸
基础类:.button

.button-rounded：长形圆角
.button-pill：胶囊
.button-square：方形
.button-box：方形圆角
.button-circle:圆形

尺寸和颜色
1. 颜色
  .button：默认的灰色
  .button-primary:蓝色
  .button-action：荧光绿
  .button-highlight：橘黄色
  .button-caution:红色
  .button-royal:藏蓝色
2. 尺寸：
- 微小尺寸：.button-tiny
- 小尺寸：.button-small
- 正常尺寸：默认
- 大尺寸：.button-large
- 特大尺寸：.button-jumbo
- 巨大尺寸：.button-giant
边框按钮
.button-border
3d按钮
.button-3d
突起样式的按钮
.button-raised
长阴影
.button-longshadow-direction(left/right):给按钮中的文本添加效果

这里的方向没有top和button

光晕效果(呼吸灯)
.button-glow
带下拉菜单的按钮

按钮组
.button-group>button.buttton*n+{下拉菜单}
堆叠按钮
添加类名.button-block，使其多个按钮每个按钮都独占一行
额外的环绕效果

将button元素放到.button-wrap容器内部
调节margin来使其对齐

表单按钮

<input type="submit" class="button button-pill button-primary" value="content">
<a href="#" class="button button-pill">Go</a>

各种文字的样式

变成大写: .button-uppercase
变成小写: .button-lowercase
首字母大写：.button-capitalize
转大写，但字号会变小：.button-small-caps

datatimepicker

放在3.x版本使用,4.x版本有时会出错或者无法设置
4.x版本使用layDate

input框被点击后弹出日历
方法:input元素.datetimepicker()
options：以对象的类型传入datatimepicker方法

format:格式化日期
z表示时区
weekStart:表示一周从哪天开始 0~6(周日-周六)
startDate:起始日期
endDate:能够选择到的结束日期
datsOfWeekDisabled:一周内周几不能选择，以数组或者字符串传入
autoclose:true or flase当选择到日期后，是否关闭日期选择器
startview:日期选择器显示的时候首先显示的类型

0/‘hour’:小时的视图，可以选择到的是分
1：天的视图，可以选择到的是小时
2:月的视图，可以选择到的是哪天
3：年的视图，可以选择到的是哪月
4/‘decade’:十年范围的视图，可以选择到的是哪年

minxView:日期选择器能够选择到的最低日期

默认为0

maxView:日期选择器能够选择到的最高的日期

默认为4

todayBtn:true or false,是否显示回到今天的按钮
keyboardNavigation：true or false
Whether or not to allow date navigation by arrow keys.
language:‘zh-CN’ 语言选择,需要引入相应的js文件
minuteStep:最小分钟间隔数
pickerPosition:‘bottom-right/left’，日期组件的显示位置
showMeridian:true or false 在日期界面上是否显示上下午

methods and events
methods and events

layui

ie8+兼容
不需要jquery
laydate
引入laydate.js

写好输入框结构后，需要使用js初始化

laydate.render({
    // 绑定元素
    elem:'#domID',//dom元素
    // 控件类型
    type:'year/month/date/time/datetime',
    // 左右面板范围
    range:'true',//或者传入分隔符
    // 自定义格式
    format:'yyyy-mm-dd',
    // 日期初始值
    value://默认值为new Date()，注意new Date()的月份是从0开始计算的
    // 初始值填充
    isInitValue:
    // 最小/大范围可选日期
    min:'2000-1-1',//并非遵循format格式设置
    max:'2030-1-1',//也可以写7，表示以默认值开始+7天，min的话填负数
    //自定义弹出控件的事件 
    trigger:'focus',//如果绑定的dom元素不是input元素，则默认事件改为click
    // 默认是否显示
    show:'true',
    // 定位方式
    position:'absolute/fixed/static',//固定定位一般用于弹出层的日历控件
    zIndex:66666,//默认值

    // 是否显示底部栏
    showBottom:true,

    // 工具栏选择
    btns:['now', 'clear', 'confirm']//清空和确定按钮

    // 语言
    lang:'en',//默认为中文

    // 主题
    theme:'default',//也可以填#类型的color
    // 也可以填自定义值，然后会自动的给日历控件添加一个.laydate-theme-customizeValue,我们可以在css文件中提前给样式

    // 是否显示公历节日
    calendar:true,

    // 标注 重要日子
    mark:{'0-0-date':'content tips'},//代表每年每月的date日

    // 方法
    // 控件初始打开的回调
    ready:function (date) {
        // date为初始值

    },

    // 日期事件被切换后的回调
    change:function(value, date, endDate){
        //分别为 生成的值、日期时间对象、结束的日期时间对象
    }

    // 控件选择完毕后的回调,点击确定的时候
    done:function (value, date, endDate) {

    }
})

hint方法

var ins1 = laydate.render({
  elem: '#test'
  ,change: function(value, date, endDate){
    ins1.hint(value); //在控件上弹出value值
  }
});

laydate.getEndDate(month, year)
获取指定年月的最后一天，month默认为当前月，year默认为当前年。如：
var endDate1 = laydate.getEndDate(10); //得到31
var endDate2 = laydate.getEndDate(2, 2080); //得到29