杭州网站建设
本内容完全由佚站互联成员原创并且免费提供交流学习,如有转载,请注明出处。

在一些网站建设项目中,我们偶尔会使用到一个功能,那就是进度条,进度条样式做起来也是相当麻烦的事情,不过好在Bootstrap已经自带了进度条样式,你只需要简单调用即可,让我们赶紧来看看怎么使用Bootstrap进度条吧。


Bootstrap进度条默认样式

当你需要定义一个进度条的时候,我们需要分两个结构进行,第一个是父容器,第二个是进度条,所以类似编码如下:<div class="progress">   <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">   </div> </div>外层的div作为整个进度条的容器,引入样式progress,内部的div作为进度条整体结构,引入样式progress-bar,从而显示当前进度。


Bootstrap进度条其他样式

与按钮元素等样式相同,Bootstrap进度条同样提供了其他颜色的样式进行调用,对应颜色也分别有绿色、蓝色、橙色以及红色。
例如我们需要调用绿色的进度条样式,那么编码如下:<div class="progress">   <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">   </div> </div>我们需要将对应的颜色样式引入到容器内的div中,且需要与progress-bar同时引用,这几个颜色的样式分别为:
Progress-bar-success、Progress-bar-info、progress-bar-warning以及progress-bar-danger。


Bootstrap进度条条纹样式

是不是看腻了纯色调的进度条?那么你同样可以采用条纹样式的进度条,使用方式更是简单异常,只需要在父容器中加入progress-striped样式即可,例如:<div class="progress progress-striped">   <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">   </div> </div>以上代码就是定义了绿色条纹进度条。


Bootstrap进度条动态效果

如果你想要让自己的进度条看起来更为酷炫,那么可以通过在父容器中引入一个active样式从而让它动起来,不过遗憾的是这个动态效果无法在IE浏览器下显示。


写在文章最后

虽然Bootstrap自带的进度条样式很不错,而且使用起来很方便,但让人沮丧的是,由于这些进度条采用的是CSS3属性,所以在IE9以下浏览器无法实现。
当然,如果你的目标群体基本采用高级浏览器(类似Chrome),那么你就可以义无反顾地采用这个样式啦。


佚站互联 YEAHZAN,杭州网站建设 创新团队。本文版权所有,转载时请注明出处。

对此文章有疑问?可以留言提问,或者通过 在线联系 我们来获得帮助。