文档章节

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

Asktao
 Asktao
发布于 2016/03/25 00:08
字数 564
阅读 97
收藏 2

示例


<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着。

© 著作权归作者所有

Asktao
粉丝 27
博文 98
码字总数 114189
作品 0
丰台
程序员
私信 提问
加载中

评论(2)

Asktao
Asktao 博主

引用来自“Jarvan4dev”的评论

看你写了很多这样的文章,很好,但不知道你是都能把这些组件搭成一个完整的网页
谢谢你的关注,写的东西有人看我觉得真的很开心。 现在是学习阶段,以后很定会使用到这些组件功能去实际的应用。 如果搭建成一个完整的页面,我想起了layoutit。 实际应用,或许使用bootstrap去仿站的方式练习,是我的一个方法。
仰望星空之脚踏实地
仰望星空之脚踏实地
看你写了很多这样的文章,很好,但不知道你是都能把这些组件搭成一个完整的网页
Bootstrap V4 自学之路 文档目录

PS:将文档中的内容亲手梳理一遍,用自己的话重复一些遍。其中意义与COPY不同。是胜于蓝。 对自己的话! 课程目录 1、Bootstrap V4 自学之路------起步 1.1、Bootstrap V4自学之路------起步...

Asktao
2016/01/25
421
0
6.1、Bootstrap V4自学之路------迁移---升级到v4

升级到 v4 Bootstrap 4 几乎是对整个项目进行了重写。其中最显著的变化都概括到了下面的内容,与以前相比,拥有了更多的具体的类以及把一些有关的部分变成了相关的组件。 当心!它在 flux 中...

Asktao
2016/03/26
324
0
4.18、Bootstrap V4自学之路-----内容---滚动监听

总体来说,用起来不是特别满意,先放一放吧。 导航条示例 滚动监听插件会根据滚动的位置,自动更新导航条的目标。滚动在导航条下面的区域,查看类的改变。弹出菜单的子项也同样会被高亮。 <n...

Asktao
2016/03/25
49
0
Bootstrap V4 自学开始!

记在前面!!! 记在前面!!! 记在前面!!! 目标:克服一切困难学习Bootstrap V4文档所有知识,并做出相应效果实例。 结束日期:2016年3月25日 学习地址:http://wiki.jikexueyuan.com/project/b...

Asktao
2016/01/25
155
1
4.12、Bootstrap V4自学之路-----组件---导航栏

基础 这些是你开始使用导航条之前需要知道的东西: 导航条要求一个包裹的以及一个配色方案类(可以是或者)。 当在一个导航条中使用多个组件时,必须用一些 对齐类 。 导航条以及它们的内容默...

Asktao
2016/03/24
83
0

没有更多内容

加载失败,请刷新页面

加载更多

医疗在线客服咨询系统有哪些特点?

随着中国互联网网站的的快速发展,至今医疗行业已经拥有了独立的的运营网站,其中最具特色的便属于医疗在线客服咨询系统,医疗在线客服咨询系统为每个访问网站的患者提供即时的网络在线客服服...

唯喏
42分钟前
9
0
skywalking(容器部署)

skywalking(容器部署) 标签(空格分隔): APM [toc] 1. Elasticsearch SkywalkingElasticsearch 5.X(部分功能报错、拓扑图不显示) Skywalking需要Elasticsearch 6.X docker network create......

JUKE
49分钟前
7
0
解决Unable to find a single main class from the following candidates [xxx,xxx]

一、问题描述 1.1 开发环境配置 pom.xml <plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId><!--一定要对上springboot版本号,因......

TeddyIH
50分钟前
7
0
玩转Spring Boot 注册Servlet、Filter、Listener

玩转Spring Boot 注册Servlet、Filter、Listener JAVA架构师Ya七月 2019-08-23 玩转Spring Boot 注册Servlet、Filter、Listener 在Servlet 3.0之前我们都是使用web.xml进行配置,需要增加Ser...

Java架构师ya七
52分钟前
4
0
Dubbo服务限制大数据传输抛Data length too large: 13055248, max payload: 8388608解决方案

当dubbo服务提供者向消费层传输大数据容量数据时,会受到Dubbo的限制,报类似如下异常: 2019-08-23 11:04:31.711 [ DubboServerHandler-XX.XX.XX.XXX:20880-thread-87] - [ ERROR ] [com.al...

huangkejie
53分钟前
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部