1. Pagination 分页
首先 .pagination 是基类,然后分页项 如果是普通分页项的话,那就加.page-item,如果是a标签的话 就加.page-link 【下面所示: 和普通的一个分页】
<!--首先 .pagination 是基类,然后分页项 如果是普通分页项的话,那就加.page-item,如果是a标签的话 就加.page-link -->
<ul class="pagination">
<li class="page-item" ><a class="page-link" href="#">首页 </a> </li>
<li class="page-item" ><a class="page-link" href="#">1 </a> </li>
<li class="page-item" ><a class="page-link" href="#">2 </a> </li>
<li class="page-item" ><a class="page-link" href="#">3 </a> </li>
<li class="page-item" ><a class="page-link" href="#">...</a> </li>
<li class="page-item" ><a class="page-link" href="#">10 </a> </li>
<li class="page-item" ><a class="page-link" href="#">11 </a> </li>
<li class="page-item" ><a class="page-link" href="#">尾页 </a> </li>
</ul>
禁用和活动状态
两种方法禁用:1..disabled
类 2.把a标签换成span或者其他标签:
<ul class="pagination">
<li class="page-item" ><a class="page-link" href="#">首页 </a> </li>
<li class="page-item" ><a class="page-link" href="#">1 </a> </li>
<li class="page-item disabled" ><a class="page-link" href="#">2【disabled 禁用】 </a> </li>
<li class="page-item" ><a class="page-link" href="#">3 </a> </li>
<li class="page-item" ><a class="page-link" href="#">...</a> </li>
<li class="page-item" ><span class="page-link">10【a 换span 禁用】 </span> </li>
<li class="page-item" ><a class="page-link" href="#">11 </a> </li>
<li class="page-item" ><a class="page-link" href="#">尾页 </a> </li>
</ul>
但是没什么用啊 那个换span 不好看 容易误会
活动状态就是 active了 老样子 直接加 这里不多说。
想要更大或更小的分页?添加.pagination-lg
或.pagination-sm
额外尺寸。
emmm 只是变大、变小而已:
<ul class="pagination pagination-lg">
<li class="page-item"><a class="page-link" href="#">首页 </a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item disabled"><a class="page-link" href="#">...</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">尾页 </a></li>
</ul>
<!--上大下小-->
<ul class="pagination pagination-sm">
<li class="page-item"><a class="page-link" href="#">首页 </a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item disabled"><a class="page-link" href="#">...</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">尾页 </a></li>
</ul>
还有一个水平样式对齐:
其实就是用那.justify-content-*这玩意来做 这玩意很经常用来水平样式,
这个也不多说 主要看 最后 的 * 是什么 这个应该很清楚吧。。。
2. 进度条(Progress)
他是使用 .progress
作为最外层元素,
然后里层用指示进度条(.progress-bar)设置最大值,且 这玩意会设置字体居中 字体白色 没有文本则不存在样式
<div class="progress">
<div class="progress-bar"></div> <!--别再里面填写内容不然会按内容决定进度-->
</div>
设置他的进度的2个方法: 请注意 这个设置进度是设置内层的【.progress-bar】 那个宽度,如果设置外层div(.progress )那么就是单单设置宽度了。
1. 直接 .w-* 由于直接这样 只有 25% 50% 75% 100% 所以呢第二种是自定义进度的:
2. 直接设置宽度 style="width: x% 即可:
<!--只要你设置了进度 在进度条中写内容 只有超出 不存在用内容决定进度了-->
<div class="progress mt-1">
<div class="progress-bar w-25"></div>
</div>
<div class="progress mt-1">
<div class="progress-bar w-50"></div>
</div>
<div class="progress mt-1">
<div class="progress-bar w-75"></div>
</div>
<div class="progress mt-1">
<div class="progress-bar w-100"></div>
</div>
<!--自定义设置进度:-->
<div class="progress mt-1">
<div class="progress-bar" style="width: 50%">50%</div>
</div>
区分:
<!--区分 宽度 和 进度:-->
<div class="progress mt-1" style="width: 50%">
<div class="progress-bar bg-info" style="width: 50%">50%</div>
</div>
高度你自己在外层的div(.progress )设置即可。
还有就是 直接用.bg-* 进行更换颜色 , 随便你换背景颜色 还可以不同颜色 + 不同进度 合并:
<div class="progress mt-1" style="width: 50%">
<!-- 进度 25 + 50 = 70% -->
<div class="progress-bar bg-warning" style="width: 25%">25%</div>
<div class="progress-bar bg-success" style="width: 50%">50%</div>
</div>
甚至你还可以是条纹形状的进度条:
用 .progress-bar-striped 来设置:
<div class="progress mt-1" style="width: 50%">
<!-- 条纹的话 如果不存在 progress-bar 【没有的话 字体默认毫无样式】 为了好习惯 加进去咯. -->
<!--条纹是根据背景颜色来变化的 颜色默认都是蓝色的 那个 info--> <div class="progress-bar progress-bar-striped bg-success" style="width: 70%">70%</div> <div class="progress-bar progress-bar-striped " style="width: 29%">默认 - 29%</div> </div>
有了条纹还不满足 那就 条纹 + 动画:
用.progress-bar-animated 首先 你得存在 条纹啊,别傻乎乎的 不然没效果
<div class="progress mt-1" style="width: 50%">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-success" style="width: 70%">70%</div>
<div class="progress-bar progress-bar-striped " style="width: 29%">默认 - 29%</div>
</div>