本章将讲解 Bootstrap 进度条。在本教程中，您将看到如何使用bootstrap教程、重定向或动作状态的进度条。

Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果。Internet Explorer 9 及之前的版本和旧版的 Firefox 不支持该特性，Opera 12 不支持动画。

默认的进度条

创建一个基本的进度条的步骤如下：

添加一个带有 class .progress 的 <div>。

接着，在上面的 <div> 内，添加一个带有 class .progress-bar 的空的 <div>。

添加一个带有百分比表示的宽度的 style 属性，例如 style="60%"; 表示进度条在 60% 的位置。

让我们看看下面的实例：

实例

1

2

3

4

5

<div class="progress">

    <div class="progress-bar" role="progressbar" aria-valuenow="60"

        aria-valuemin="0" aria-valuemax="100" style="width: 40%;">

        <span class="sr-only">40% 完成</span>

    </div></div>

基本样式

　　Bootstrap框架中对于进度条提供了一个基本样式，一个100%宽度的背景色，然后一个高亮的颜色表示完成进度。其实制作这样的进度条非常容易，一般是使用两个容器，外容器具有一定的宽度，并且设置一个背景颜色，子元素设置一个宽度，比如完成度是30%（也就是父容器的宽度比例值），同时给其设置一个高亮的背景色html中文网

　　Bootstrap框架中也是按这样的方式实现的，它提供了两个容器，外容器使用“progress”样式，子容器使用“progress-bar”样式。其中progress用来设置进度条的容器样式，而progress-bar用于限制进度条的进度


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

.progress {

  height: 20px;

  margin-bottom: 20px;

  overflow: hidden;

  

  border-radius: 4px;

  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);

}.progress-bar {

  float: left;

  width: 0;

  height: 100%;

  font-size: 12px;

  line-height: 20px;

  color: #fff;

  text-align: center;

  background-color: #428bca;

  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);

  -webkit-transition: width .6s ease;  transition: width .6s ease;

}


1

<div class="progress">   <div class="progress-bar" style="width:40%"></div></div>

　　无障碍性更好的写法如下


1

<div class="progress"><div class="progress-bar" style="width:40%;" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"><span class="sr-only">40% Complete</span></div></div>

　　role属性告诉搜索引擎这个div的作用是进度条；aria-valuenow="40"属性告知当前进度条的进度为40%；aria-valuemin="0"属性告知进度条的最小值为0%；aria-valuemax="100"属性告知进度条的最大值为100%

彩色进度条

　　Bootstrap框架中的进度条和警告信息框一样，为了能给用户一个更好的体验，也根据不同的状态配置了不同的进度条颜色。在此称为彩色进度条，其主要包括以下四种：

　　☑ progress-bar-info：表示信息进度条，进度条颜色为蓝色

　　☑ progress-bar-success：表示成功进度条，进度条颜色为绿色

　　☑ progress-bar-warning：表示警告进度条，进度条颜色为黄色

　　☑ progress-bar-danger：表示错误进度条，进度条颜色为红色

　　具体使用非常简单，只需要在基础的进度上增加对应的类名即可，彩色进度条与基本进度条相比，就是进度条颜色做了一定的变化


1

2

3

4

5

6

7

8

9

.progress-bar-success {

  background-color: #5cb85c;

}.progress-bar-info {

  background-color: #5bc0de;

}.progress-bar-warning {

  background-color: #f0ad4e;

}.progress-bar-danger {

  background-color: #d9534f;

}


1

<div class="progress"><div class="progress-bar progress-bar-success" style="width:40%"></div></div><div class="progress"><div class="progress-bar progress-bar-info" style="width:60%"></div></div><div class="progress"><div class="progress-bar progress-bar-warning" style="width:80%"></div></div><div class="progress"><div class="progress-bar progress-bar-danger" style="width:50%"></div></div>

条纹进度条

　　在Bootstrap框架中除了提供了彩色进度条之外，还提供了一种条纹进度条，这种条纹进度条采用CSS3的线性渐变来实现，并未借助任何图片。使用Bootstrap框架中的条纹进度条只需要在进度条的容器“progress”基础上增加类名“progress-striped”，当然，如果要让进度条条纹像彩色进度一样，具有彩色效果，只需要在进度条上增加相应的颜色类名

　　[注意]通过渐变可以为进度条创建条纹效果，IE9-浏览器不支持


1

2

3

4

5

.progress-striped .progress-bar {

  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);

  background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);

  background-size: 40px 40px;

}


1

2

3

4

5

6

7

8

9

10

11

12

13

.progress-striped .progress-bar-success {

  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);

  background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);

}.progress-striped .progress-bar-info {

  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);

  background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);

}.progress-striped .progress-bar-warning {

  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);

  background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);

}.progress-striped .progress-bar-danger {

  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);

  background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);

}


1

<div class="progress progress-striped"><div class="progress-bar" style="width:70%"></div></div><div class="progress progress-striped"><div class="progress-bar progress-bar-success" style="width:40%"></div></div><div class="progress progress-striped"><div class="progress-bar progress-bar-info" style="width:60%"></div></div><div class="progress progress-striped"><div class="progress-bar progress-bar-warning" style="width:80%"></div></div><div class="progress progress-striped"><div class="progress-bar progress-bar-danger" style="width:50%"></div></div>

动态条纹

　　为了让条纹进度条动起来，Bootstrap框架还提供了一种动态条纹进度条。其实现原理主要通过CSS3的animation来完成。首先通过@keyframes创建了一个progress-bar-stripes的动画，这个动画主要做了一件事，就是改变背景图像的位置，也就是background-position的值。因为条纹进度条是通过CSS3的线性渐变来制作的，而linear-gradient实现的正是对应背景中的背景图片

最新文章

  1. DDD 领域驱动设计-商品建模之路
  2. WinForm任务栏最小化
  3. 阿里云服务器上开启linux远程桌面连接
  4. Greenplum安装
  5. Jquery EeasyUI等框架中图标的处理方法
  6. grunt配置太复杂？发布一个前端构建工具，简单高效，自动跳过未更新的文件
  7. ecshop 变量表
  8. 第20章 priority_queue优先队列容器
  9. Linux内核如何装载和启动一个可执行程序
  10. 技术分享：逆向海盗船k95机械键盘
  11. JAVA的UML
  12. MultiSelectListPreference 的使用心得
  13. Hyper-V介绍
  14. List-----Array
  15. 读取SQLServer数据库存储过程列表及参数信息
  16. Python CGI编程(转自易百)
  17. *.do和*.action的区别
  18. 常用API接口汇总
  19. 从FCN到DeepLab
  20. IEnumerable、IEnumerator、ICollection、IList、List的继承关系及简单使用

热门文章

  1. sqlmap tamper下模块的使用
  2. netstat lsof ps 常用场景
  3. 初识springboot
  4. VM中centos设置子网内虚拟机ip
  5. UML用例关系一览
  6. python函数带()与否
  7. request.getParameterNames()和request.getParameterValues()
  8. php----------php安装xhprof扩展和简单使用
  9. 接口自动化测试持续集成--Soapui接口功能测试数据传递
  10. day2 eclipse+gitee 操作步骤记录留档