详解Bootstrap进度条组件_html/css_WEB-ITnose

在网页中，进度条的效果并不少见，如：平分系统、加载状态等，进度条组件使用了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);} 

.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;} 

例子：

         
              30%

      
查看更多关于详解Bootstrap进度条组件_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did112008