4.15、Bootstrap V4自学之路-----组件---进度条

原创
2016/03/25 00:08
阅读数 125

示例


<progress class="progress" value="0" max="100">0%</progress>
<progress class="progress" value="25" max="100">25%</progress>
<progress class="progress" value="50" max="100">50%</progress>
<progress class="progress" value="75" max="100">75%</progress>
<progress class="progress" value="100" max="100">100%</progress>

PS:这感觉是挺开心的。虽然用到的地方可能不多,但是用到的话,一定很赞!

IE9 支持

Internet Explorer 9 不支持HTML5的<progress>元素,但是我们可以绕过它:

<progress class="progress" value="25" max="100">
  <div class="progress">
    <span class="progress-bar" style="width: 25%;">25%</span>
  </div>
</progress>

IE9,你好!再见!

如果为了IE9,全部都这样去写兼容,感觉有些被拖累。如果是做产品的话这个方法一定不能少。说着说,为了做产品,肯定还会用BSv3吧。

补一张IE9不兼容的样子。

上下文的替代品

进度条使用一些与按钮以及alert相同的类,以统一样式。

是使用 .progress-success类等。 还记得吗?

<progress class="progress progress-success" value="25" max="100">25%</progress>
<progress class="progress progress-info" value="50" max="100">50%</progress>
<progress class="progress progress-warning" value="75" max="100">75%</progress>
<progress class="progress progress-danger" value="100" max="100">100%</progress>

PS:我原本只想是颜色用起来比较丰富。但看了subtitle,我觉得所有的*-success等类,都是可以用在样式统一上的。

条纹

使用渐变以创建条纹效果。使用条纹.progress-striped类 达到条纹色彩的效果。 striped 英文是,条纹。

<progress class="progress progress-striped" value="10" max="100">10%</progress>
<progress class="progress progress-striped progress-success" value="25" max="100">25%</progress>
<progress class="progress progress-striped progress-info" value="50" max="100">50%</progress>
<progress class="progress progress-striped progress-warning" value="75" max="100">75%</progress>
<progress class="progress progress-striped progress-danger" value="100" max="100">100%</progress>

会动的条纹

条纹渐变还可以动起来。在.progress中添加.progress-animated,可以利用CSS3动画让条纹从右向左滚动。

会动的进度条在IE9和Opera12中不起作用,因为它们不支持CSS3动画。animated,英文是,动画,活生生的。


<progress class="progress progress-striped progress-animated" value="25" max="100">25%</progress>

这个我失败了。FF下不会动。chrome下也不会动。英文文档也没有介绍。且行且看吧,mark着。

展开阅读全文
打赏
1
2 收藏
分享
加载中
Asktao博主

引用来自“Jarvan4dev”的评论

看你写了很多这样的文章,很好,但不知道你是都能把这些组件搭成一个完整的网页
谢谢你的关注,写的东西有人看我觉得真的很开心。 现在是学习阶段,以后很定会使用到这些组件功能去实际的应用。 如果搭建成一个完整的页面,我想起了layoutit。 实际应用,或许使用bootstrap去仿站的方式练习,是我的一个方法。
2016/03/25 08:57
回复
举报
看你写了很多这样的文章,很好,但不知道你是都能把这些组件搭成一个完整的网页
2016/03/25 08:52
回复
举报
更多评论
打赏
2 评论
2 收藏
1
分享
返回顶部
顶部