本节课我们来开始学习 Bootstrap 的提供的分页和进度条功能。
一.分页
- 通过.pagination 和.page-item、.page-link 构建一个列表模式分页;
<ul class="pagination"> <li class="page-item"> <a href="#" class="page-link">首页</a> </li> <li class="page-item"> <a href="#" class="page-link">1</a> </li> <li class="page-item"> <a href="#" class="page-link">2</a> </li> <li class="page-item"> <a href="#" class="page-link">3</a> </li> <li class="page-item"> <a href="#" class="page-link">4</a> </li> <li class="page-item"> <a href="#" class="page-link">5</a> </li> <li class="page-item"> <a href="#" class="page-link">尾页</a> </li> </ul>
- 在 li 标签下使用.disabled,可以禁用某个分页项目;
<li class="page-item disabled"> <a href="#" class="page-link">3</a> </li>
- 直接将 a 标签替换为 span 标签,直接使链接失效但不会显示禁用的灰色样式;
<li class="page-item"> <span class="page-link">3</a></span> </li>
- 通过.pagination-lg(或其它)来实现,分页样式的大小;
<ul class="pagination pagination-lg">
- 通过.justify-content-center(或其它)来实现,分页对齐方式;
<ul class="pagination justify-content-center">
二.进度条
- 通过.progress 和.progress-bar 构建一个进度条;
<div class="progress"> <div class="progress-bar" style="width:25%"></div> </div>
- 使用.w-50 样式,也可以实现项目进度,只不过数值有局限;
<div class="progress"> <div class="progress-bar w-50"></div> </div>
- 设置进度条高度,使用普通高度样式即可;
<div class="progress" style="height: 20px;"> <div class="progress-bar w-75"></div> </div>
- 在进度条项目中,可以设置进度条的颜色;
<div class="progress"> <div class="progress-bar w-50 bg-danger"></div> </div>
- 使用多组嵌套,可以实现进度条的进度样式;
<div class="progress"> <div class="progress-bar w-25 bg-success"></div> <div class="progress-bar w-25 bg-info"></div> <div class="progress-bar w-25 bg-warning"></div> </div>
- 使用.progress-bar-striped 实现条纹进度条;
<div class="progress"> <div class="progress-bar progress-bar-striped w-75 bg-danger"></div> </div>
- 在条纹进度条的基础上,使用.proress-bar-animated 实现动画效果;
<div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-animated w-75 bg-danger"> </div> </div>
网友评论