21. bootstrap组件#分页和进度条
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" >50%</div>
</div>区分：
<!--区分 宽度 和 进度：-->
<div class="progress mt-1" >
<div class="progress-bar bg-info" >50%</div>
</div>高度你自己在外层的div（.progress ）设置即可。
还有就是 直接用.bg-* 进行更换颜色 ， 随便你换背景颜色 还可以不同颜色 + 不同进度 合并：
<div class="progress mt-1" >
<!-- 进度 25 + 50 = 70% -->
<div class="progress-bar bg-warning" >25%</div>
<div class="progress-bar bg-success" >50%</div>
</div>甚至你还可以是条纹形状的进度条：
用 .progress-bar-striped 来设置：
<div class="progress mt-1" >
<!-- 条纹的话 如果不存在 progress-bar 【没有的话 字体默认毫无样式】 为了好习惯 加进去咯. -->
<!--条纹是根据背景颜色来变化的 颜色默认都是蓝色的 那个 info--> <div class="progress-bar progress-bar-striped bg-success" >70%</div> <div class="progress-bar progress-bar-striped " >默认 - 29%</div> </div>
有了条纹还不满足 那就 条纹 + 动画：
用.progress-bar-animated 首先 你得存在 条纹啊，别傻乎乎的 不然没效果
<div class="progress mt-1" >
<div class="progress-bar progress-bar-striped progress-bar-animated bg-success" >70%</div>
<div class="progress-bar progress-bar-striped " >默认 - 29%</div>
</div>