Bootstrap教程(18)--进度条

怼烎@ 2022-11-02 13:25 144阅读 0赞

***[点此查看全部文字教程、视频教程、源代码][Link 1]***

### 本文目录 ###

*  1. 概述
 *  2. 普通进度条
 *  3. 隐藏文本
 *  4. 调整颜色
 *  5. 条纹效果
 *  6. 动画效果
 *  7. 小结

# 1. 概述 #

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

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

# 2. 普通进度条 #

先看一段代码：

<div class="progress">
                        <div class="progress-bar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                            style="width: 60%;">
                            <span>60%</span>
                        </div>
                    </div>

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

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

最后，`<span>60%</span>`是进度条内显示文体，所以效果如下：  
![在这里插入图片描述][20210225163033400.png_pic_center]

# 3. 隐藏文本 #

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

示例代码：

<div class="progress">
                        <div class="progress-bar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                            style="width: 60%;">
                            <span class="sr-only">60%</span>
                        </div>
                    </div>

对应效果：  
![在这里插入图片描述][20210225163054808.png_pic_center]

# 4. 调整颜色 #

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

<div class="progress">
                        <div class="progress-bar progress-bar-success" aria-valuenow="60" aria-valuemin="0"
                            aria-valuemax="100" style="width: 60%;">
                            <span class="sr-only">60%</span>
                        </div>
                    </div>
                    <div class="progress">
                        <div class="progress-bar progress-bar-info" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                            style="width: 60%;">
                            <span class="sr-only">60%</span>
                        </div>
                    </div>
                    <div class="progress">
                        <div class="progress-bar progress-bar-warning" aria-valuenow="60" aria-valuemin="0"
                            aria-valuemax="100" style="width: 60%;">
                            <span class="sr-only">60%</span>
                        </div>
                    </div>
                    <div class="progress">
                        <div class="progress-bar progress-bar-danger" aria-valuenow="60" aria-valuemin="0"
                            aria-valuemax="100" style="width: 60%;">
                            <span class="sr-only">60%</span>
                        </div>
                    </div>

效果如下：  
![在这里插入图片描述][20210225163156477.png_pic_center]

# 5. 条纹效果 #

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

<div class="progress">
                        <div class="progress-bar progress-bar-striped" aria-valuenow="60" aria-valuemin="0"
                            aria-valuemax="100" style="width: 60%;">
                            <span class="sr-only">60%</span>
                        </div>
                    </div>

效果如下：  
![在这里插入图片描述][20210225163323787.png_pic_center]

# 6. 动画效果 #

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

<div class="progress">
                        <div class="progress-bar progress-bar-striped active" aria-valuenow="60" aria-valuemin="0"
                            aria-valuemax="100" style="width: 60%;">
                            <span class="sr-only">60%</span>
                        </div>
                    </div>

# 7. 小结 #

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

[Link 1]: https://studyingpanda.blog.csdn.net/article/details/105329926
[20210225163033400.png_pic_center]: /images/20221024/771b7410e25f4e32ae362302bb3f128b.png
[20210225163054808.png_pic_center]: /images/20221024/9b1af167b05a4df39756726a805d20c3.png
[20210225163156477.png_pic_center]: /images/20221024/b67c00bb11ef40338b204d370c414817.png
[20210225163323787.png_pic_center]: /images/20221024/ab1ecb465f22464ca0cfe70ba01c5d3c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，144人围观）

还没有评论，来说两句吧...

相关阅读

相关进度条

[在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4...

我就是我/ 2024年04月17日 05:28/ 0 赞/ 79 阅读

相关进度条

<!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <meta

港控/mmm°/ 2022年12月25日 15:57/ 0 赞/ 279 阅读

相关 Bootstrap教程(18)--进度条

[点此查看全部文字教程、视频教程、源代码][Link 1] 本文目录 1. 概述 2. 普通进度条 3. 隐藏文本 4. 调整颜色 5.

怼烎@/ 2022年11月02日 13:25/ 0 赞/ 145 阅读

相关进度条

进度条--基本样式 <div class="progress"> <div class="progress-bar" style="width:8

墨蓝/ 2022年10月02日 14:48/ 0 赞/ 322 阅读

相关 bootstrap进度条

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

梦里梦外;/ 2022年10月02日 06:57/ 0 赞/ 156 阅读

相关 Bootstrap进度条

Bootstrap进度条使用css3过渡和动画来获得效果。 1.创建一个进度条的步骤添加一个带有.progress的<div> 在上面的<div>内，添

我就是我/ 2022年08月23日 08:49/ 0 赞/ 154 阅读

相关 Bootstrap进度条媒体对象和Well组件

Well组件 > 可以实现简单地嵌入效果 Well 是一种会引起内容凹陷显示或插图效果的容器 div中，为了创建 Well，只需要简单地把内容放在带有 class .w

电玩女神/ 2022年06月12日 05:26/ 0 赞/ 212 阅读

相关 bootstrap得动态进度条

Bootstrap的动态进度条： html: 创建一个modal 这里使用fade先将modal隐藏起来，然后modal里面嵌入progress 代码很简单

短命女/ 2021年11月02日 01:32/ 0 赞/ 314 阅读

相关 bootstrap插件进度条progress以及分页pagination

进度条可以显示用户任务的完成过程。创建一个基本的进度条的步骤如下：添加一个带有 .progress 类的 <div>。接着，在上面的 <div> 内，添加

Myth丶恋晨/ 2021年09月15日 01:42/ 0 赞/ 475 阅读

相关响应式前端框架Bootstrap系列（13）进度条

进度条使用 CSS3 过渡和动画来获得该效果。Internet Explorer 9 及之前的版本和旧版的 Firefox 不支持该特性，Opera 12 不支持动画。进度条的

不念不忘少年蓝@/ 2021年09月14日 14:18/ 0 赞/ 458 阅读