分頁：

分頁功能是當遇到數據很多時，如果都放到一個頁面上，那么找起來很不方便，而且不利于性能。此時采用分頁功能就能很好的優化用戶體驗，可是如果自己開發分頁功能，那么就會影響開發效率，bootstrap提供了分頁功能，可以很好的解決這個問題，其用法：給父級ul標簽添加pagination類，給子級li添加page-item,類樣式如下：

類名描述

.pagination	分頁功能的容器添加的類名，用于布局
.page-item	給分頁功能里面每一項添加的類名，用于選擇偽類 ，布局鏈接樣式
.page-link	沒項鏈接中a標簽的樣式類
.active	控制當前頁被選中
.disabled	控制當前鏈接不可點擊
.pagination-S	給父級容器添加的類，用于控制此功能整體布局大小，S的值有lg大、sm小

<!-- 1.分頁功能,這里可以采用div+span的方式，推薦列表做分頁 --> <ul class="pagination pagination-sm"><!-- 2.給父級添加 pagination類，pagination-sm控制功能塊顯示大小--><li class="page-item"><a href="#" class="page-link">上一頁</a></li><!-- 第一個鏈接和最后一個鏈接常用來跳轉上下頁--><li class="page-item active"><a href="#" class="page-link">1</a></li><!--3.active類用來顯示當前頁--><li class="page-item"><a href="#" class="page-link">2</a></li><li class="page-item"><a href="#" class="page-link">3</a></li><!-- 4.給每個li添加page-item類用于a鏈接布局，里面的鏈接添加page-link類會產生樣式，不添加此類會緊挨在一起--><li class="page-item"><a href="#" class="page-link">4</a></li><li class="page-item disabled"><a href="#" class="page-link">5</a></li><!--5.disabled用來禁用當前的分頁鏈接，按鈕也是點不動的--><li class="page-item"><a href="#" class="page-link">下一頁</a></li> </ul>

分頁組件推薦bootstrap-paginator，它是基于bootstrap的js插件，其使用方法可閱讀相關文檔：https://github.com/lyonlai/bootstrap-paginator

面包屑導航：

bootstrap中提供了面包屑導航的類樣式，breadcrumb類用于父級容器ul,它控制li水平排列且去掉li默認樣式；breadcrumb-item類用于子級li，它控制每層導航后面的/；active表示在當前位置，設置和不設置沒太大區別，如：

<ul class="breadcrumb"><li class="breadcrumb-item"><a href="#">首頁</a></li><li class="breadcrumb-item"><a href="#">個人中心</a></li><li class="breadcrumb-item"><a href="#">設置</a></li><li class="breadcrumb-item active">頭像</li> </ul>

列表組：

bootstrap提供了列表組，實際上就是對列表進行了樣式格式化,類樣式如下：

類名描述

.list-group	用于ul或ol標簽，初始化邊距，使li緊靠父級元素
.list-group-item	用于li標簽，格式化了li的默認樣式并設置邊框和圓角
.active	激活（選中）當前li,選中后當前li背景為藍色
.disabled	禁用當前li
.list-group-item-action	設置鼠標懸停當前li時，當前li背景顯示灰色
.list-group-item-success	設置當前li為淡綠色，表示成功，鼠標懸停突出顯示
.list-group-item-secondary	設置當前li為淡灰色，表示次要，鼠標懸停突出顯示
.list-group-item-info	設置當前li為淡藍色，表示信息，鼠標懸停突出顯示
.list-group-item-warning	設置當前li為淡黃色，表示警告，鼠標懸停突出顯示
.list-group-item-danger	設置當前li為淡紅色，表示危險，鼠標懸停突出顯示
.list-group-item-primary	設置當前li為天藍色，表示主要，鼠標懸停突出顯示
.list-group-item-dark	設置當前li為深灰色，鼠標懸停突出顯示
.list-group-item-light	設置當前li為暗白色，鼠標懸停突出顯示
ul變div，li變a型	上面類樣式可以用來設置鏈接列表，只需要將ul變為div，li變為a即可

<ul class="list-group"><li class="list-group-item">ulList1</li><li class="list-group-item active">ulList2</li><li class="list-group-item">ulList3</li> </ul><ol class="list-group"><li class="list-group-item disabled">olList1</li><li class="list-group-item">olList2</li> </ol><div class="list-group"><a href="#" class="list-group-item list-group-item-action">aList1</a><a href="#" class="list-group-item active">aList2</a> </div>

卡片：

bootstrap中提供了卡片類樣式，其類樣式如下：

類名描述

.card	設置一個有邊框有圓角的容器，可理解為卡片容器
.card-body	設置一個有高度的容器，可理解為卡片主體
.card-header	設置一個有高度淡灰色容器，可理解為卡片的頭部
.card-footer	設置一個有高度淡灰色容器，可理解為卡片的尾部
.card-title	設置卡片標題，使文字加粗加黑
.card-text	設置卡片正文內容
.card-link	設置卡片鏈接
.card-img-top	當卡片中有img時，給img此類樣式，表示圖片在文本上面
.card-img-bottom	當卡片中有img時，給img此類樣式，表示圖片在文本下面
.card-img-overlay	容器加此類后，容器會將同級別中靠容器前面的img圖片設置為容器的背景且背景為響應式，容器前面沒有img會向后找

<div class="card"><div class="card-header">carHeader</div><div class="card-body bg-primary">carBody</div><!--可設置背景顏色和字體顏色--><div class="card-footer text-success">carFooter</div> </div><div class="card"><div class="card-header"><img class="card-img-top" src="2.PNG"></div><div class="card-body"><h5 class="card-title">carTitle</h5><h5 class="card-text">carText</h5><a href="#" class="card-link">carLink</a></div><img class="card-img-top" src="2.PNG"><div class="card-footer">carFooter</div> </div><div class="card"><img class="card-img-bottom" src="2.PNG"><div class="card-img-overlay"><h3>hello</h3></div><!-- <img class="card-img-bottom" src="1.png"> --> </div>

下拉菜單：

bootstrap中下拉菜單依賴于popper.js插件，使用時記得引入此依賴，相關類樣式和下拉按鈕相似，如下：

類名描述

.dropdown	指定一個容器為下拉菜單，實際上是給此容器 position: relative
.dropdown-toggle	定義一個小三角形，用于下拉菜單按鈕的指示器
data-toggle=“dropdown”	實現下拉菜單功能的自定義屬性
.dropdown-menu	使下拉菜單選項收起
.dropdown-item	初始化下拉菜單選項樣式
.dropdown-divider	給下拉菜單中的項加一條分割線，此類給div
disabled	警用下拉菜單中的此項
dropdown-menu-right	使 dropdown-menu靠右排列，測試沒有作用
.dropright、 .dropup、 .dropleft	此類類名用于規定下拉菜單列表彈出的方向，此類名加在 dropdown-menu容器上

<div class="btn-group dropright"><button class="dropdown-toggle" data-toggle="dropdown">菜單</button><div class="dropdown-menu dropdown-menu-right"><div class="dropdown-header">蔬菜</div><a class="dropdown-item" href="#">白菜</a><a class="dropdown-item disabled" href="#">西紅柿</a><div class="dropdown-divider"></div><div class="dropdown-header">水果</div><a class="dropdown-item" href="#">荔枝</a><a class="dropdown-item" href="#">芒果</a></div> </div>

折疊：

bootstrap中提供折疊功能的封裝，很輕松就可以實現元素的顯示和隱藏，其具體類樣式如下：

類名描述

data-toggle=“collapse”	給一個按鈕此屬性用來控制某元素的顯示或隱藏
data-target=“selector”	給有data-toggle="collapse"屬性的按鈕添加此屬性，用來選擇需要顯示或隱藏的元素，后面跟選擇器，此屬性在a元素中可以用href替換
.collapse	此類名給需要折疊的元素，使元素默認是折疊的，不給此類，首次折疊會有bug
.show	給要折疊的元素添加此類使初始就顯示
data-parent=“groupSelector”	給折疊元素本身，選擇器指向一組折疊元素的父級，可實現展示某元素時，其他元素折疊（手風琴案例）

<!-- 手風琴案例 --> <div class="group"><button data-toggle="collapse" data-target=".box1">顯示/隱藏</button><div class="box1 show" data-parent=".group">box1</div><button data-toggle="collapse" data-target=".box2">顯示/隱藏</button><div class="box2 collapse" data-parent=".group">box2</div><button data-toggle="collapse" data-target=".box3">顯示/隱藏</button><div class="box3 collapse" data-parent=".group">box3</div> </div>

提示：本文圖片等素材來源于網絡，若有侵權，請發郵件至郵箱：810665436@qq.com聯系筆者刪除。
筆者：苦海

總結

以上是生活随笔為你收集整理的bootstrap中分页、面包屑导航、列表组、卡片、下拉菜单、折叠的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。