详解Bootstrap进度条组件-洛水三千

在网页中，进度条的效果并不少见，如：平分系统、加载状态等，进度条组件使用了css3的transition和animation属性来完成一些特效，这些特效在IE9及IE9以下版本、Firefox的老版本中并不支持，Opera 12 不支持 animation 属性。

进度条和其他独立组件一样，开发者可以根据自己的需要选择对应的版本：

LESS: progress-bars.less

SASS: _progress-bars.scss

基础进度条

实现原理：

需要两个容器，外容器使用类名.progress，子容器使用类名.progress-bar;其中.progress用来设置进度条容器的背景色，容器的高度，间距等；而.progress-bar设置进度方向，进度条的背景色和过度效果；下面是css源码：

 .progress  { 
  height :  20px ; 
  margin-bottom :  20px ; 
  overflow :  hidden ; 
  background-color :  #f5f5f5 ; 
  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) ;
} 

查看更多关于详解Bootstrap进度条组件-洛水三千的详细内容...