当前位置 博文首页 > 苦海：bootstrap中分页、面包屑导航、列表组、卡片、下拉菜单、
分页：
分页功能是当遇到数据很多时，如果都放到一个页面上，那么找起来很不方便，而且不利于性能。此时采用分页功能就能很好的优化用户体验，可是如果自己开发分页功能，那么就会影响开发效率，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"
