Bootstrap教程(18)--进度条

简介: 本文目录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>是进度条内显示文体,所以效果如下:

image.png

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>

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>

效果如下:

image.png

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>


效果如下:

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

相关文章
Bootstrap5 进度条1
Bootstrap5 进度条用于显示任务完成情况。创建方法:使用带有 `.progress` 类的 `&lt;div&gt;` 包裹一个带有 `.progress-bar` 类的 `&lt;div&gt;`,并通过 `style=&quot;width:70%&quot;` 设置进度。
Bootstrap5 进度条7
混合色彩进度条示例:通过设置不同颜色的进度条段,直观展示不同状态的进度。例如,使用绿色表示空闲空间、黄色表示警告、红色表示危险。
Bootstrap5 进度条6
通过添加 `.progress-bar-animated` 类,可以为进度条添加动态效果,使其更加生动。
Bootstrap5 进度条5
使用 `.progress-bar-striped` 类可以创建条纹效果的进度条。
Bootstrap5 进度条4
Bootstrap5 提供了多种颜色的进度条,默认为蓝色。通过添加不同的背景色类(如 `bg-success`、`bg-info`、`bg-warning` 和 `bg-danger`),可以轻松改变进度条的颜色。
Bootstrap5 进度条3
进度条标签用于展示任务完成的进度,可在其中添加文本显示具体百分比。例如:`&lt;div class=&quot;progress&quot;&gt; &lt;div class=&quot;progress-bar&quot; style=&quot;width:70%&quot;&gt;70%&lt;/div&gt; &lt;/div&gt;` 显示一个70%完成的进度条。
|
2月前
|
前端开发
Bootstrap5 进度条2
进度条高度默认为 16px,可通过 CSS 的 height 属性调整。示例代码:&lt;div class=&quot;progress&quot; style=&quot;height:20px;&quot;&gt;&lt;div class=&quot;progress-bar&quot; style=&quot;width:40%;&quot;&gt;&lt;/div&gt;&lt;/div&gt;
|
5月前
|
JavaScript 前端开发
BootStrap在Vue中的安装使用详细教程
这篇文章提供了在Vue项目中安装和使用Bootstrap的详细教程,包括安装jQuery、引入Bootstrap、配置Webpack以及在项目中进行测试和查看效果的步骤。
BootStrap在Vue中的安装使用详细教程
|
8月前
|
前端开发 JavaScript
Bootstrap 5 保姆级教程(十三):滚动监听 & 侧边栏导航
Bootstrap 5 保姆级教程(十三):滚动监听 & 侧边栏导航
|
8月前
|
前端开发 JavaScript
Bootstrap 5 保姆级教程(十二):弹出框 & 消息弹窗
Bootstrap 5 保姆级教程(十二):弹出框 & 消息弹窗