Bootstrap进度条组件知识详解 javascript技巧.docx

Bootstrap进度条组件知识详解_javascript技巧.docx:..Bootstrap进度条组件知识详解在网页中,经常见到进度条效果,如:平分系统、加载状态等,进度条组件使用Tcss3的transition和animalion属性来完成一些特效,这些特效在IE9及IE9以下版本、Firefox的老版本中并不支持,Opera12不支持animation属性。进度条和其他独立组件一样,开发者可以根据自己的需要选择对应的版本:LESS:progress-bars,lessSASS:_progress-:需要两个容器,,-bar;-,容器的高度,间距等;-bar设置进度方向,进度条的背景色和过度效果;下面是css源码:progress{height:20px;margin-bottom:20px;overflow:hidden;background-color:#f5f5f5;border-radius:4px;-webkit-box-shadow:inset0lpx2pxrgba(0,0,0,.1);box-shadow:inset0lpx2pxrgba(0,0,0,.1);}•progress-bar{float:left;width:0;height:100%;font-si7e:12px;line-height:20px;color:#fff;text-align:center;background-color:#428bca;-webkit-box-shadow:inset0-lpx0rgba(0,0,0,.15);box-shadow:inset0~lpx0rgba(0,0,0,•15);-webkit-transition:;transition:;}例了:<divclass二〃progress"〉<divclass二"progress-bar"style二气「idth:30%;〃role^^progrcssbar'7aria-valuenow=,,30/,aria-valuemin=,zO/,aria-valuemax=,z100/z><spanclass=,zsr-only/z>30%</span></div></div>role属性作用:告诉搜索引擎这个div的作用是进度条;aria-ow='?30”屈性作用:当而进度条的进度为40%;aria-valuemin二”0”屈性作用:进度条的最小值为0%;aria一valuemax二”100"属性作用:进度条的最大值为100%;-only类的<span>标签从进度条组件小移除,而让当前进度显示出來;<divclass二〃progress"〉<divclass二〃progress-bar"style二〃width:40%;〃role=z'progressbar,/aria-valuenow二〃40"aria-valuemin二〃0"aria~valuemax=/z100,z>40%</div></div>40%彩色进度条彩色进度条和警