栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Html/CSS > Bootstrap教程

Bootstrap教程(18)--进度条

Bootstrap教程(18)--进度条

1. 概述

进度条的使用频率并不高,但是如果遇到合适的场景,使用之后对显示效果的提升还是比较明显的。

Bootstrap为进度条提供了比较优雅的实现,本篇就来介绍下常见用法。

2. 普通进度条

先看一段代码:

 				
>60%

首先是通过class="progress"设定了一个进度条容器。

然后在容器内定义了progress-bar进度条控件,属性aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"分别代表着当前进度值、最小值、最大值。

最后,60%是进度条内显示文体,所以效果如下:

3. 隐藏文本

可以使用sr-only类修饰进度条的文本元素,sr-only表示屏幕阅读器,也就是正常情况下不显示,当残障人员使用屏幕阅读器阅读网页时,可以通过声音等方式展示的内容。

示例代码:

				
class="sr-only">60%

对应效果:

4. 调整颜色

可以使用样式类调整进度条的颜色,示例代码:

				
class="sr-only">60%
class="sr-only">60%
class="sr-only">60%
class="sr-only">60%

效果如下:

5. 条纹效果

Bootstrap还可以通过progress-bar-striped类,为进度条设置条纹效果。示例代码:

				
class="sr-only">60%

效果如下:

6. 动画效果

还可以通过active类,为进度条增加横向滚动的动画效果,示例代码如下。

				
class="sr-only">60%
7. 小结

Bootstrap进度条提供了多种样式,其实也不要盲目选择华丽的效果,还是要根据具体情景选择合适的样式。

转载请注明:文章转载自 www.mshxw.com
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号