輪播圖：

bootstrap封裝了輪播圖的功能，其具體如下：

類名描述

.carousel	創(chuàng)建一個(gè)輪播圖塊的容器，實(shí)質(zhì)是做布局用；且此容器應(yīng)該有一個(gè)di屬性，其屬性值提供給下面左右按鈕href錨點(diǎn)值，用于左右按鈕控制圖片切換
.data-ride=“carousel”	頁面刷新實(shí)現(xiàn)輪播圖自動(dòng)滑動(dòng)等功能，其他點(diǎn)擊功能正常
.carousel-inner	定義裝所有圖片的大容器，實(shí)質(zhì)是對此容器進(jìn)行定位布局等
.carousel-item	定義裝每張圖片的小容器，對每張小圖片進(jìn)行布局等
.active	定義當(dāng)前要顯示的carousel-item容器和 carousel-indicators指示器
.carousel-control-prev	定義控制左邊（上一張）圖片按鈕的布局
data-slide=“prev”	實(shí)現(xiàn)控制上一張圖片按鈕的功能
.carousel-control-next	定義控制右邊（下一張）圖片按鈕的布局
data-slide=“next”	實(shí)現(xiàn)控制下一張圖片按鈕的功能
.carousel-control-prev-icon	定義切換上一張圖片的按鈕本身
carousel-control-next-icon	定義切換下一張圖片的按鈕本身
.carousel-indicators	定義指示器的容器，實(shí)質(zhì)是對指示器進(jìn)行布局與樣式修改
.data-target	定義指示器中每個(gè)項(xiàng)控制的輪播圖容器，其后面錨點(diǎn)值為最外面輪播圖容器di值
data-slide-to=“index”	實(shí)現(xiàn)指示器中每項(xiàng) 控制具體圖片的功能，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>

模態(tài)框：

bootstrap對模態(tài)框進(jìn)行了封裝，具體如下：

類名描述

data-toggle=“modal”	給按鈕定義一個(gè)打開模態(tài)框的功能
data-target=“selector”	給按鈕綁定模態(tài)框，選擇器指向要控制的模態(tài)框
.modal	用于定義一個(gè)模態(tài)框容器，此容器給id或者class名用于data-target=“selector”
.fade	布局模態(tài)框時(shí)用，用于show選擇，不加此類，模態(tài)框看不見
.modal-dialog	用于定義裝模態(tài)框內(nèi)容容器的容器，起到布局的作用
modal-content	模態(tài)框內(nèi)容容器，實(shí)質(zhì)用于布局
. modal-header、. modal-body、. modal-footer	此三個(gè)類樣式都是在modal-content中定義容器的，其依次表示頭部、身體、腳步，它們都其布局作用
.modal-title	定義模態(tài)框內(nèi)容中的標(biāo)題，實(shí)質(zhì)沒太大作用
. close	用于布局頭部退出標(biāo)識
data-dismiss=“modal”	控制模態(tài)框退出的功能
.modal-S	設(shè)置模態(tài)框的大小,給 modal-dialog容器，S的值有sm和lg

<!-- 1.按鈕：用于觸發(fā)一個(gè)模態(tài)框彈出 --> <button data-toggle="modal" data-target="#modalBox">模態(tài)框</button> <!-- 2.模態(tài)框 --> <div class="modal fade" id="modalBox"><div class="modal-dialog modal-sm"><div class="modal-content"><!-- 模態(tài)框頭部 --><div class="modal-header"><h4 class="modal-title">頭部title</h4><button class="close" data-dismiss="modal">X</button></div><!-- 模態(tài)框主體 --><div class="modal-body">主體body</div><!-- 模態(tài)框底部 --><div class="modal-footer"><button data-dismiss="modal">關(guān)閉</button></div></div></div> </div>

提示框/彈出框：

標(biāo)簽中title屬性設(shè)置提示信息，但是原生的不夠美觀，bootstrap封裝了提示框，（彈出框在調(diào)用是使用popover()方法即可，其他都是一樣的），其具體如下：

類名描述

title=‘內(nèi)容’	定義提示內(nèi)容文本
data-toggle=“tooltip”	定義一個(gè)提示框，這里主要是功能，實(shí)質(zhì)是禁用了原有的提示框；此屬性的值還有 popover等
element.tooltip()	tooltip()方法用來在js腳本調(diào)用提示框功能，element為被調(diào)用者（有title的標(biāo)簽）;element.popover()為彈出框，此時(shí)對應(yīng)的toggle屬性值也應(yīng)當(dāng)設(shè)置為 popover
data-placement=“P”	用于規(guī)定提示框顯示的位置，其值有top、bottom、left、right,此屬性給有title屬性的標(biāo)簽加
data-html=“true”	允許提示框中以標(biāo)簽的形式存在，且會(huì)被解析
data-trigger=“focus”	設(shè)置彈框在彈出的情況下，點(diǎn)擊頁面其他部分時(shí)關(guān)閉彈框
data-trigger=“hover”	設(shè)置hover切換效果
data-content=“附加內(nèi)容”	用于設(shè)置附加的內(nèi)容，也是會(huì)顯示的

<!-- 1.創(chuàng)建一個(gè)提示框： --> <a href="#" id="titlea" data-toggle="tooltip" data-placement="bottom" title="<span class='bg-success'>提示信息！</span>">顯示提示框</a> <script>// 2.在js腳本中調(diào)用此方法：$('#titlea').tooltip();提示框//$('#titlea').popover();//彈框 </script>

滾動(dòng)監(jiān)聽：

滾動(dòng)監(jiān)聽主要用到Scrollspy插件，它會(huì)根據(jù)頁面滾動(dòng)的位置自動(dòng)更新導(dǎo)航欄的導(dǎo)航位置，其具體如下：

類名描述

data-spy=“scroll”	此屬性是向body標(biāo)簽中添加的，用來監(jiān)聽頁面滾動(dòng)
data-target=".navbar"	此屬性是將body滾動(dòng)位置與導(dǎo)航欄關(guān)聯(lián)，后面選擇器為導(dǎo)航欄id值或class值
導(dǎo)航中href屬性	此屬性的屬性值為下面內(nèi)容區(qū)中的錨點(diǎn)值
data-offset	設(shè)置滾動(dòng)時(shí)距離頂部偏移的像素

<!-- 頁面滾動(dòng)監(jiān)聽+導(dǎo)航欄 --> <body data-spy="scroll" data-target=".navbar" data-offset="10"><!-- 導(dǎo)航區(qū)： --><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">區(qū)塊一</a></li><li class="nav-item"><a class="nav-link" href="#content2">區(qū)塊二</a></li><li class="nav-item"><a class="nav-link" href="#content3">區(qū)塊三</a></li><!-- 下拉菜單型導(dǎo)航： --><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">區(qū)塊四</a><div class="dropdown-menu"><a class="dropdown-item" href="#content4-1">區(qū)塊四-1</a><a class="dropdown-item" href="#content4-2">區(qū)塊四-2</a></div></li></ul></nav><!-- 內(nèi)容區(qū)： --><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	創(chuàng)建一個(gè)彈性容器
.d-inline-flex	創(chuàng)建在同一行顯示的彈性容器
.flex-row	設(shè)置彈性子元素水平顯示，默認(rèn)值
.flex-row-reverse	設(shè)置右對齊顯示并翻轉(zhuǎn)子元素排列順序
.flex-column	設(shè)置彈性子元素垂直顯示
.flex-column-reverse	設(shè)置子元素垂直且翻轉(zhuǎn)顯示
.justify-content-F	設(shè)置子元素排列方式，F的值有： start (默認(rèn)靠左排列), end靠右, center居中, between ， around
.flex-fill	強(qiáng)制設(shè)置子元素寬度相等
flex-grow-1	使子元素使用剩下的空間
.order-i	對子元素進(jìn)項(xiàng)排序，i的值為1-12，數(shù)字越小權(quán)重越高
.mr-auto	設(shè)置元素右外邊距為auto
.ml-auto	設(shè)置元素左外邊距為auto
.flex-nowrap	允許子元素?fù)Q行且按順序排列
.flex-wrap-reverse	允許子元素?fù)Q行且翻轉(zhuǎn)排列
.flex-nowrap	不允許子元素?fù)Q行排列，按順序排列
.align-content-F	控制在垂直方向子元素的排列，F的值有：start (默認(rèn)靠左排列), end靠右, center居中, stretch ， around
.align-items-F	設(shè)置單行的子元素對齊方式，其中F的值有：start, end靠右, center居中, stretch(默認(rèn)值) ， 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>

響應(yīng)式flex類總結(jié)：



多媒體對象：

bootstrap提供了處理圖片、視頻和網(wǎng)頁的布局類（常用于評論等），如下：

類名描述

.media	用于定義一個(gè)多媒體的容器
.media-body	用于定義多媒體的身體部分，在此類后面添加圖片，圖片會(huì)考右顯示；當(dāng)在此類前面添加圖片時(shí)，圖片將在左邊顯示
.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中提封裝了一些樣式，使用時(shí)只需要添加類名即可，如：

類名描述

.border-0	去掉所有的邊框
.border-P-0	去掉指定的位置的邊框，P的值有：top、bottom、left、right
…border-C	設(shè)置邊框的顏色，C的值有：primary、 secondary、 success、 danger、 warning、 info、 light、 dark、 white
.border	設(shè)置邊框
.rounded	設(shè)置圓角
.rounded-P	設(shè)置不同方向的圓角，P的值有：rounded-top、 rounded-right、 rounded-bottom、 rounded-left、 rounded-circle（圓）、 rounded-0去掉圓角
.mx-auto	設(shè)置居中對齊
.w-N	設(shè)置寬度百分比，其中N的值有：25、50、 75、 100；（ mw-100表示最大值為100）
.h-N	設(shè)置高度百分比，其中N的值有：25、50、 75、 100；（ mh-100表示最大值為100）
.p-n	表示內(nèi)邊距，n的值是1-5

MUI：

MUI也是一款UI框架,是最接近原生app體驗(yàn)的高性能框架，移動(dòng)端開發(fā)還是比較推薦的，如果需要了解，請閱讀官方文檔：https://dev.dcloud.net.cn/mui/

提示：本文圖片等素材來源于網(wǎng)絡(luò)，若有侵權(quán)，請發(fā)郵件至郵箱：810665436@qq.com聯(lián)系筆者刪除。
筆者：苦海

總結(jié)

以上是生活随笔為你收集整理的bootstrap中轮播图、模态框、提示框/弹出框、滚动监听、弹性布局、响应式flex、多媒体对象的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。