bootstrap中分页面包屑导航列表组卡片下拉菜单折叠

Posted 2021-05-21 苦海123

分页：

分页功能是当遇到数据很多时，如果都放到一个页面上，那么找起来很不方便，而且不利于性能。此时采用分页功能就能很好的优化用户体验，可是如果自己开发分页功能，那么就会影响开发效率，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>

提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：[e-mail]联系笔者删除。
笔者：苦海