bootstrap(6)关于进度条，列表，面板

标签：acl   bug   dpi   ica   bit   信息   ipo   gac   any   

一：进度条

首先我们可以看到进度条如下：

这种效果是如何实现的呢？

进度条代码如下：

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

进度条格式：

progress>progress-bar>sr-only

我们可以看到，

最外面是progross,显示的是全部的宽度，而progress-bar这是显示的进度条的宽度，因为这里面嵌套了一个 sytle="width:60%",也就说完成的进度占总进度的60%

当我们去掉后面的span元素的时候，进度条会显示出进度的百分比来

效果如下：

<div  class="progress-bar"  role="progressbar"  aria-valuenow="60"  aria-valuemin="0 " style="width:60%;">60%</div>

可以在 class为 progress-bar上添加 min-width:2em来实现较小宽度下的显示百分比

（1）在 progress-bar后面添加不同的信息来实现不同提示信息的进度条，

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

效果如下：

（2）在progress-bar 后面添加 progress-bar-striped来实现条纹效果

（3）在 progress-bar   progress-bar-striped 后面添加 .active类来实现动画效果

添加了动画效果之后，条纹好似向右滚动

（4）将多个 progress-bar 放到同一个 progress内可以实现堆叠效果

bootstrap(6)关于进度条，列表，面板

标签：acl   bug   dpi   ica   bit   信息   ipo   gac   any   

原文地址：http://www.cnblogs.com/qianduangaoshou/p/6851533.html