美文网首页
第十五谈:分页和进度条

第十五谈:分页和进度条

作者: 辽A丶孙悟空 | 来源:发表于2020-06-04 21:08 被阅读0次

本节课我们来开始学习 Bootstrap 的提供的分页和进度条功能。

一.分页
  1. 通过.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>
  1. 在 li 标签下使用.disabled,可以禁用某个分页项目;
          <li class="page-item disabled">
              <a href="#" class="page-link">3</a>
          </li>
  1. 直接将 a 标签替换为 span 标签,直接使链接失效但不会显示禁用的灰色样式;
          <li class="page-item">
              <span class="page-link">3</a></span>
          </li>
  1. 通过.pagination-lg(或其它)来实现,分页样式的大小;
      <ul class="pagination pagination-lg">
  1. 通过.justify-content-center(或其它)来实现,分页对齐方式;
      <ul class="pagination justify-content-center">
二.进度条
  1. 通过.progress 和.progress-bar 构建一个进度条;
      <div class="progress">
          <div class="progress-bar" style="width:25%"></div>
      </div>
  1. 使用.w-50 样式,也可以实现项目进度,只不过数值有局限;
      <div class="progress">
          <div class="progress-bar w-50"></div>
      </div>
  1. 设置进度条高度,使用普通高度样式即可;
      <div class="progress" style="height: 20px;">
          <div class="progress-bar w-75"></div>
      </div>
  1. 在进度条项目中,可以设置进度条的颜色;
      <div class="progress">
          <div class="progress-bar w-50 bg-danger"></div>
      </div>
  1. 使用多组嵌套,可以实现进度条的进度样式;
      <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>
  1. 使用.progress-bar-striped 实现条纹进度条;
      <div class="progress">
          <div class="progress-bar progress-bar-striped w-75 bg-danger"></div>
      </div>
  1. 在条纹进度条的基础上,使用.proress-bar-animated 实现动画效果;
      <div class="progress">
          <div class="progress-bar progress-bar-striped progress-bar-animated w-75 bg-danger">
              
          </div>
      </div>

相关文章

  • 第十五谈:分页和进度条

    本节课我们来开始学习 Bootstrap 的提供的分页和进度条功能。 一.分页 通过.pagination 和.p...

  • Bootstrap列表组、分页和进度条

    列表组 使用.list-group选择列表组 添加.active到 a.list-group-item以指示当前的...

  • IOS开发 UISlider和UIProgressView

    进度条和滑动动条控件 本节学习内容: 1.进度条和滑动条的概念 2.进度条和滑动条的属性 3.进度条和滑动条的使用...

  • Flask ----- 前端页面分页器对象

    Flask和Django都有的分页器类 Pageinations 分页器对象属性和方法 分页流程示例 借书管理系统...

  • 2019-05-28 分页设计

    分页组件mricode 分页插件下载 如何使用 首先导入css和js 创建分页显示标签 Ajax分页 初始化 这里...

  • bootstrap学习

    1.引入jar的方法 2.下拉列表的使用? 3.导航栏的设置? 4.分页处理? 5.进度条的设置? 6.列表的设置...

  • Spring Boot简明教程--Jpa分页

    分页参数 现在的分页形式有两种: PC端分页,参数为:页码 page和每页的条数 size 小程序、app端分页,...

  • Mybatis分页插件PageHelper

    在实际的项目开发中,常常需要使用到分页,分页方式分为两种:前端分页和后端分页。前端分页:一次ajax请求数据的所有...

  • Android SeekBar的使用,进度条的另一种实现方式

    概述: SeekBar是进度条。我们使用进度条时,可以使用系统默认的进度条;也可以自定义进度条的图片和滑块图片等。...

  • Android控件之SeekBar

    SeekBar是进度条。我们使用进度条时,可以使用系统默认的进度条;也可以自定义进度条的图片和滑块图片等。 See...

网友评论

      本文标题:第十五谈:分页和进度条

      本文链接:https://www.haomeiwen.com/subject/sdugzhtx.html