bootstrap中轮播图、模态框、提示框/弹出框、滚动监听、弹性布局、响应式flex、多媒体对象

轮播图：

bootstrap封装了轮播图的功能，其具体如下：

类名	描述
.carousel	创建一个轮播图块的容器，实质是做布局用；且此容器应该有一个di属性，其属性值提供给下面左右按钮href锚点值，用于左右按钮控制图片切换
.data-ride=“carousel”	页面刷新实现轮播图自动滑动等功能，其他点击功能正常
.carousel-inner	定义装所有图片的大容器，实质是对此容器进行定位布局等
.carousel-item	定义装每张图片的小容器，对每张小图片进行布局等
.active	定义当前要显示的carousel-item容器和 carousel-indicators指示器
.carousel-control-prev	定义控制左边（上一张）图片按钮的布局
data-slide=“prev”	实现控制上一张图片按钮的功能
.carousel-control-next	定义控制右边（下一张）图片按钮的布局
data-slide=“next”	实现控制下一张图片按钮的功能
.carousel-control-prev-icon	定义切换上一张图片的按钮本身
carousel-control-next-icon	定义切换下一张图片的按钮本身
.carousel-indicators	定义指示器的容器，实质是对指示器进行布局与样式修改
.data-target	定义指示器中每个项控制的轮播图容器，其后面锚点值为最外面轮播图容器di值
data-slide-to=“index”	实现指示器中每项控制具体图片的功能，index指图片的索引

<div id="carouselBox" class="carousel" data-ride="carousel"><!-- 轮播图片 --><div class="carousel-inner"><div class="carousel-item active"><a href="#"><img src="1.PNG"></a></div><div class="carousel-item"><a href="#"><img src="2.PNG"></a></div><div class="carousel-item"><a href="#"><img src="3.PNG"></a></div></div><!-- 左右切换按钮 --><a class="carousel-control-prev" href="#carouselBox" data-slide="prev"><span class="carousel-control-prev-icon"></span></a><a class="carousel-control-next" href="#carouselBox" data-slide="next"><span class="carousel-control-next-icon"></span></a><!-- 指示器 --><ul class="carousel-indicators"><li data-target="#carouselBox" data-slide-to="0" class="active"></li><li data-target="#carouselBox" data-slide-to="1"></li><li data-target="#carouselBox" data-slide-to="2"></li></ul>
</div>

模态框：

bootstrap对模态框进行了封装，具体如下：

类名	描述
data-toggle=“modal”	给按钮定义一个打开模态框的功能
data-target=“selector”	给按钮绑定模态框，选择器指向要控制的模态框
.modal	用于定义一个模态框容器，此容器给id或者class名用于data-target=“selector”
.fade	布局模态框时用，用于show选择，不加此类，模态框看不见
.modal-dialog	用于定义装模态框内容容器的容器，起到布局的作用
modal-content	模态框内容容器，实质用于布局
. modal-header、. modal-body、. modal-footer	此三个类样式都是在modal-content中定义容器的，其依次表示头部、身体、脚步，它们都其布局作用
.modal-title	定义模态框内容中的标题，实质没太大作用
. close	用于布局头部退出标识
data-dismiss=“modal”	控制模态框退出的功能
.modal-S	设置模态框的大小,给 modal-dialog容器，S的值有sm和lg

<!-- 1.按钮：用于触发一个模态框弹出 -->
<button data-toggle="modal" data-target="#modalBox">模态框</button>
<!-- 2.模态框 -->
<div class="modal fade" id="modalBox"><div class="modal-dialog modal-sm"><div class="modal-content"><!-- 模态框头部 --><div class="modal-header"><h4 class="modal-title">头部title</h4><button class="close" data-dismiss="modal">X</button></div><!-- 模态框主体 --><div class="modal-body">主体body</div><!-- 模态框底部 --><div class="modal-footer"><button data-dismiss="modal">关闭</button></div></div></div>
</div>

提示框/弹出框：

标签中title属性设置提示信息，但是原生的不够美观，bootstrap封装了提示框，（弹出框在调用是使用popover()方法即可，其他都是一样的），其具体如下：

类名	描述
title=‘内容’	定义提示内容文本
data-toggle=“tooltip”	定义一个提示框，这里主要是功能，实质是禁用了原有的提示框；此属性的值还有 popover等
element.tooltip()	tooltip()方法用来在js脚本调用提示框功能，element为被调用者（有title的标签）;element.popover()为弹出框，此时对应的toggle属性值也应当设置为 popover
data-placement=“P”	用于规定提示框显示的位置，其值有top、bottom、left、right,此属性给有title属性的标签加
data-html=“true”	允许提示框中以标签的形式存在，且会被解析
data-trigger=“focus”	设置弹框在弹出的情况下，点击页面其他部分时关闭弹框
data-trigger=“hover”	设置hover切换效果
data-content=“附加内容”	用于设置附加的内容，也是会显示的

<!-- 1.创建一个提示框： -->
<a href="#" id="titlea" data-toggle="tooltip" data-placement="bottom" title="<span class='bg-success'>提示信息！</span>">显示提示框</a>
<script>// 2.在js脚本中调用此方法：$('#titlea').tooltip();提示框//$('#titlea').popover();//弹框
</script>

滚动监听：

滚动监听主要用到Scrollspy插件，它会根据页面滚动的位置自动更新导航栏的导航位置，其具体如下：

类名	描述
data-spy=“scroll”	此属性是向body标签中添加的，用来监听页面滚动
data-target=".navbar"	此属性是将body滚动位置与导航栏关联，后面选择器为导航栏id值或class值
导航中href属性	此属性的属性值为下面内容区中的锚点值
data-offset	设置滚动时距离顶部偏移的像素

<!-- 页面滚动监听+导航栏 -->
<body data-spy="scroll" data-target=".navbar" data-offset="10"><!-- 导航区： --><nav class="navbar navbar-expand-sm bg-info navbar-dark fixed-top"><ul class="navbar-nav"><li class="nav-item"><a class="nav-link" href="#content1">区块一</a></li><li class="nav-item"><a class="nav-link" href="#content2">区块二</a></li><li class="nav-item"><a class="nav-link" href="#content3">区块三</a></li><!-- 下拉菜单型导航： --><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">区块四</a><div class="dropdown-menu"><a class="dropdown-item" href="#content4-1">区块四-1</a><a class="dropdown-item" href="#content4-2">区块四-2</a></div></li></ul></nav><!-- 内容区： --><div id="content1" style="padding-top:200px;padding-bottom:800px">content1</div><div id="content2" style="padding-top:200px;padding-bottom:800px">content2</div><div id="content3" style="padding-top:200px;padding-bottom:800px">content3</div><div id="content4-1" style="padding-top:200px;padding-bottom:800px">content4-1</div><div id="content4-2" style="padding-top:200px;padding-bottom:800px">content4-2</div>
</body>

弹性布局：

bootstrap提供了弹性布局的类样式，如下：

类名	描述
.d-flex	创建一个弹性容器
.d-inline-flex	创建在同一行显示的弹性容器
.flex-row	设置弹性子元素水平显示，默认值
.flex-row-reverse	设置右对齐显示并翻转子元素排列顺序
.flex-column	设置弹性子元素垂直显示
.flex-column-reverse	设置子元素垂直且翻转显示
.justify-content-F	设置子元素排列方式，F的值有： start (默认靠左排列), end靠右, center居中, between ， around
.flex-fill	强制设置子元素宽度相等
flex-grow-1	使子元素使用剩下的空间
.order-i	对子元素进项排序，i的值为1-12，数字越小权重越高
.mr-auto	设置元素右外边距为auto
.ml-auto	设置元素左外边距为auto
.flex-nowrap	允许子元素换行且按顺序排列
.flex-wrap-reverse	允许子元素换行且翻转排列
.flex-nowrap	不允许子元素换行排列，按顺序排列
.align-content-F	控制在垂直方向子元素的排列，F的值有：start (默认靠左排列), end靠右, center居中, stretch ， around
.align-items-F	设置单行的子元素对齐方式，其中F的值有：start, end靠右, center居中, stretch(默认值) ， baseline

<div class="d-flex flex-column-reverse"><div class="bg-success">1</div><div class="bg-warning">12</div><div class="bg-primary">123</div>
</div><div class="d-flex flex-column-reverse"><div class="bg-success">1</div><div class="bg-warning">12</div><div class="bg-primary">123</div>
</div>

响应式flex类总结：
在这里插入图片描述

多媒体对象：

bootstrap提供了处理图片、视频和网页的布局类（常用于评论等），如下：

类名	描述
.media	用于定义一个多媒体的容器
.media-body	用于定义多媒体的身体部分，在此类后面添加图片，图片会考右显示；当在此类前面添加图片时，图片将在左边显示
.align-self-P	定义图片(视频)显示位置，P的值与 start、center、end

<div class="media"><img src="1.png" width='50px' class="align-self-start"><div class="media-body"><p>博主</p><div class="media"><img src="2.png" width='50px' class="align-self-center"><div class="media-body"><p>博客1</p></div></div><div class="media"><img src="1.png" width='50px' class="align-self-end"><div class="media-body"><p>博客2</p></div></div></div>
</div>

小工具：

bootstrap中提封装了一些样式，使用时只需要添加类名即可，如：

类名	描述
.border-0	去掉所有的边框
.border-P-0	去掉指定的位置的边框，P的值有：top、bottom、left、right
…border-C	设置边框的颜色，C的值有：primary、 secondary、 success、 danger、 warning、 info、 light、 dark、 white
.border	设置边框
.rounded	设置圆角
.rounded-P	设置不同方向的圆角，P的值有：rounded-top、 rounded-right、 rounded-bottom、 rounded-left、 rounded-circle（圆）、 rounded-0去掉圆角
.mx-auto	设置居中对齐
.w-N	设置宽度百分比，其中N的值有：25、50、 75、 100；（ mw-100表示最大值为100）
.h-N	设置高度百分比，其中N的值有：25、50、 75、 100；（ mh-100表示最大值为100）
.p-n	表示内边距，n的值是1-5