bootstrap中轮播图、模态框、提示框/弹出框、滚动监听、弹性布局、响应式flex、多媒体对象
生活随笔
收集整理的這篇文章主要介紹了
bootstrap中轮播图、模态框、提示框/弹出框、滚动监听、弹性布局、响应式flex、多媒体对象
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
輪播圖：
bootstrap封裝了輪播圖的功能，其具體如下：
| .carousel | 創(chuàng)建一個輪播圖塊的容器，實質(zhì)是做布局用；且此容器應該有一個di屬性，其屬性值提供給下面左右按鈕href錨點值，用于左右按鈕控制圖片切換 |
| .data-ride=“carousel” | 頁面刷新實現(xiàn)輪播圖自動滑動等功能，其他點擊功能正常 |
| .carousel-inner | 定義裝所有圖片的大容器，實質(zhì)是對此容器進行定位布局等 |
| .carousel-item | 定義裝每張圖片的小容器，對每張小圖片進行布局等 |
| .active | 定義當前要顯示的carousel-item容器和 carousel-indicators指示器 |
| .carousel-control-prev | 定義控制左邊（上一張）圖片按鈕的布局 |
| data-slide=“prev” | 實現(xiàn)控制上一張圖片按鈕的功能 |
| .carousel-control-next | 定義控制右邊（下一張）圖片按鈕的布局 |
| data-slide=“next” | 實現(xiàn)控制下一張圖片按鈕的功能 |
| .carousel-control-prev-icon | 定義切換上一張圖片的按鈕本身 |
| carousel-control-next-icon | 定義切換下一張圖片的按鈕本身 |
| .carousel-indicators | 定義指示器的容器，實質(zhì)是對指示器進行布局與樣式修改 |
| .data-target | 定義指示器中每個項控制的輪播圖容器，其后面錨點值為最外面輪播圖容器di值 |
| data-slide-to=“index” | 實現(xiàn)指示器中每項 控制具體圖片的功能，index指圖片的索引 |
模態(tài)框：
bootstrap對模態(tài)框進行了封裝，具體如下：
| data-toggle=“modal” | 給按鈕定義一個打開模態(tài)框的功能 |
| data-target=“selector” | 給按鈕綁定模態(tài)框，選擇器指向要控制的模態(tài)框 |
| .modal | 用于定義一個模態(tài)框容器，此容器給id或者class名用于data-target=“selector” |
| .fade | 布局模態(tài)框時用，用于show選擇，不加此類，模態(tài)框看不見 |
| .modal-dialog | 用于定義裝模態(tài)框內(nèi)容容器的容器，起到布局的作用 |
| modal-content | 模態(tài)框內(nèi)容容器，實質(zhì)用于布局 |
| . modal-header、. modal-body、. modal-footer | 此三個類樣式都是在modal-content中定義容器的，其依次表示頭部、身體、腳步，它們都其布局作用 |
| .modal-title | 定義模態(tài)框內(nèi)容中的標題，實質(zhì)沒太大作用 |
| . close | 用于布局頭部退出標識 |
| data-dismiss=“modal” | 控制模態(tài)框退出的功能 |
| .modal-S | 設(shè)置模態(tài)框的大小,給 modal-dialog容器，S的值有sm和lg |
提示框/彈出框：
標簽中title屬性設(shè)置提示信息，但是原生的不夠美觀，bootstrap封裝了提示框，（彈出框在調(diào)用是使用popover()方法即可，其他都是一樣的），其具體如下：
| title=‘內(nèi)容’ | 定義提示內(nèi)容文本 |
| data-toggle=“tooltip” | 定義一個提示框，這里主要是功能，實質(zhì)是禁用了原有的提示框；此屬性的值還有 popover等 |
| element.tooltip() | tooltip()方法用來在js腳本調(diào)用提示框功能，element為被調(diào)用者（有title的標簽）;element.popover()為彈出框，此時對應的toggle屬性值也應當設(shè)置為 popover |
| data-placement=“P” | 用于規(guī)定提示框顯示的位置，其值有top、bottom、left、right,此屬性給有title屬性的標簽加 |
| data-html=“true” | 允許提示框中以標簽的形式存在，且會被解析 |
| data-trigger=“focus” | 設(shè)置彈框在彈出的情況下，點擊頁面其他部分時關(guān)閉彈框 |
| data-trigger=“hover” | 設(shè)置hover切換效果 |
| data-content=“附加內(nèi)容” | 用于設(shè)置附加的內(nèi)容，也是會顯示的 |
滾動監(jiān)聽：
滾動監(jiān)聽主要用到Scrollspy插件，它會根據(jù)頁面滾動的位置自動更新導航欄的導航位置，其具體如下：
| data-spy=“scroll” | 此屬性是向body標簽中添加的，用來監(jiān)聽頁面滾動 |
| data-target=".navbar" | 此屬性是將body滾動位置與導航欄關(guān)聯(lián)，后面選擇器為導航欄id值或class值 |
| 導航中href屬性 | 此屬性的屬性值為下面內(nèi)容區(qū)中的錨點值 |
| data-offset | 設(shè)置滾動時距離頂部偏移的像素 |
彈性布局：
bootstrap提供了彈性布局的類樣式 ，如下：
| .d-flex | 創(chuàng)建一個彈性容器 |
| .d-inline-flex | 創(chuàng)建在同一行顯示的彈性容器 |
| .flex-row | 設(shè)置彈性子元素水平顯示，默認值 |
| .flex-row-reverse | 設(shè)置右對齊顯示并翻轉(zhuǎn)子元素排列順序 |
| .flex-column | 設(shè)置彈性子元素垂直顯示 |
| .flex-column-reverse | 設(shè)置子元素垂直且翻轉(zhuǎn)顯示 |
| .justify-content-F | 設(shè)置子元素排列方式，F的值有： start (默認靠左排列), end靠右, center居中, between ， around |
| .flex-fill | 強制設(shè)置子元素寬度相等 |
| flex-grow-1 | 使子元素使用剩下的空間 |
| .order-i | 對子元素進項排序，i的值為1-12，數(shù)字越小權(quán)重越高 |
| .mr-auto | 設(shè)置元素右外邊距為auto |
| .ml-auto | 設(shè)置元素左外邊距為auto |
| .flex-nowrap | 允許子元素換行且按順序排列 |
| .flex-wrap-reverse | 允許子元素換行且翻轉(zhuǎn)排列 |
| .flex-nowrap | 不允許子元素換行排列，按順序排列 |
| .align-content-F | 控制在垂直方向子元素的排列，F的值有：start (默認靠左排列), end靠右, center居中, stretch ， around |
| .align-items-F | 設(shè)置單行的子元素對齊方式，其中F的值有：start, end靠右, center居中, stretch(默認值) ， baseline |
響應式flex類總結(jié)：
多媒體對象：
bootstrap提供了處理圖片、視頻和網(wǎng)頁的布局類（常用于評論等），如下：
| .media | 用于定義一個多媒體的容器 |
| .media-body | 用于定義多媒體的身體部分，在此類后面添加圖片，圖片會考右顯示；當在此類前面添加圖片時，圖片將在左邊顯示 |
| .align-self-P | 定義圖片(視頻)顯示位置，P的值與 start、center、end |
小工具：
bootstrap中提封裝了一些樣式，使用時只需要添加類名即可，如：
| .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體驗的高性能框架，移動端開發(fā)還是比較推薦的，如果需要了解，請閱讀官方文檔：https://dev.dcloud.net.cn/mui/
提示：本文圖片等素材來源于網(wǎng)絡，若有侵權(quán)，請發(fā)郵件至郵箱：810665436@qq.com聯(lián)系筆者刪除。
筆者：苦海
總結(jié)
以上是生活随笔為你收集整理的bootstrap中轮播图、模态框、提示框/弹出框、滚动监听、弹性布局、响应式flex、多媒体对象的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 异常处理python 空气质量问题_py
- 下一篇： redis 缓存 @class: 会有