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=" 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=" 50%">50%</div>
</div>

区分：

<!--区分 宽度 和 进度：-->
<div class="progress mt-1" style=" 50%">
    <div class="progress-bar bg-info" style=" 50%">50%</div>
</div>

高度你自己在外层的div（.progress ）设置即可。

还有就是 直接用.bg-* 进行更换颜色 ， 随便你换背景颜色  还可以不同颜色 + 不同进度 合并：

<div class="progress mt-1" style=" 50%">
<!--  进度 25 + 50 = 70%  -->
    <div class="progress-bar bg-warning" style=" 25%">25%</div>
    <div class="progress-bar bg-success" style=" 50%">50%</div>
</div>

甚至你还可以是条纹形状的进度条：

用 .progress-bar-striped 来设置：

<div class="progress mt-1" style=" 50%">

<!--  条纹的话 如果不存在 progress-bar 【没有的话 字体默认毫无样式】 为了好习惯 加进去咯. -->

<!--条纹是根据背景颜色来变化的 颜色默认都是蓝色的 那个 info--> <div class="progress-bar progress-bar-striped bg-success" style=" 70%">70%</div> <div class="progress-bar progress-bar-striped " style=" 29%">默认 - 29%</div> </div>

有了条纹还不满足 那就 条纹 + 动画：

用.progress-bar-animated 首先 你得存在 条纹啊，别傻乎乎的 不然没效果

<div class="progress mt-1" style=" 50%">
    <div class="progress-bar progress-bar-striped  progress-bar-animated bg-success" style=" 70%">70%</div>
    <div class="progress-bar progress-bar-striped " style=" 29%">默认 - 29%</div>
</div>