Bootstrap4如何设置进度条

今天武志伟小编分享一下Bootstrap4如何设置进度条属性，做出漂亮的进度条。

操作方法

  • 01

    添加一个带有 .progress 类的 <div>。 接着，在上面的 <div> 内，添加一个带有 class .progress-bar 的空的 <div>。 添加一个带有百分比表示的宽度的 style 属性，例如 style="width:70%" 表示进度条在 70% 的位置。 实例 <div class="progress">  <div class="progress-bar" style="width:70%"></div></div>

  • 02

    进度条高度 进度条高度默认为 16px。我们可以使用 CSS 的 height 属性来修改他： 实例 <div class="progress">  <div class="progress-bar" style="width:40%;height:20px"></div></div>

  • 03

    进度条标签 可以在进度条内添加文本，如进度的百分比： 实例 <div class="progress">  <div class="progress-bar" style="width:70%">70%</div></div>

  • 04

    不同颜色的进度条 默认情况下进度条为蓝色，Bootstrap4 还提供了以下颜色的进度条： 实例 <div class="progress">  <div class="progress-bar bg-success" style="width:40%"></div></div> <div class="progress">  <div class="progress-bar bg-info" style="width:50%"></div></div>

  • 05

    条纹的进度条 可以使用 .progress-bar-striped 类来设置条纹进度条： 实例 <div class="progress">  <div class="progress-bar progress-bar-striped" style="width:40%"></div></div>

  • 06

    动画进度条 使用 .progress-bar-animated 类可以为进度条添加动画： 实例 <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 40%"></div>

  • 07

    混合色彩进度条 进度条可以设置多种颜色： 实例 <div class="progress">  <div class="progress-bar bg-success" style="width:40%">    Free Space  </div>  <div class="progress-bar bg-warning" style="width:10%">    Warning  </div>  <div class="progress-bar bg-danger" style="width:20%">    Danger  </div></div>

赞 (0)

相关推荐

  • 如何在PPT中制作炫酷的进度条动画

    之前有见人做过进度条的动画,那是真的超级炫酷.那么,我们有办法做到么? 操作方法 01 首先新建一个幻灯片,插入一个矩形.这就是我们的进度条啦. 02 个位数的制作 1.插入一个文本框,在其中分别输入 ...

  • HTML5中的进度条，progress，动态进度条

    HTML5新加了一个进度条控件,我们不再需要使用其他脚本库,就可以轻松的创建一个进度条了.下面来详细看下,这个怎么使用. 操作方法 01 从图中的代码看,要生成一个进度条十分简单,用progress控 ...

  • C#进度条怎么用 / C#progressBar的用法

    在编程工作中经常需要设置进度条,比如表示下载的进度.拷贝的进度.复制文件的进度等等.下面小编就介绍一下在C#中进度条的使用方法: 操作方法 01 打开Microsoft Visual Studio 2 ...

  • Focusky怎么显示或隐藏底部播放进度条 Focusky底部进度条设置图文教程

    Focusky怎么显示底部播放进度条?在播放演示文稿时,有些用户不大喜欢进度条显示在屏幕上,那么这里我们教大家如何在Focusky放映时显示或隐藏进度条,具体怎么操作请看下文! Focusky显示/. ...

  • 在QQ影音中怎么设置鼠标悬停时进度条上显示预览窗口

    在QQ影音中怎么设置鼠标悬停时进度条上显示预览窗口

    我们在使用QQ影音的时候,有一个功能:鼠标悬停时进度条上显示预览窗口,当我们把鼠标在播放进度条上移动,就会显示未播放或已播放的视频窗口,想要开启,该怎么操作呢?今天就跟大家介绍一下在QQ影音中怎么设置 ...

  • 电脑PPT文件如何对动态进度条进行设置

    电脑PPT文件如何对动态进度条进行设置

    PPT是我们现在经常使用的办公软件,而今天小编跟大家分享 的是电脑PPT文件如何对动态进度条进行设置.具体如下:1. 首先我们在电脑中打开一份PPT文件,进入主界面之后在输入栏中输入数字.2. 之后我 ...

  • 在PP视频播放器全屏时怎么设置显示进度条和时间

    在PP视频播放器全屏时怎么设置显示进度条和时间

    我们在PP视频播放器播放节目或视频文件时,想要在全屏模式下,设置显示进度条和时间,以便查看播放进度和剩余播放时间,该怎么操作呢?今天就跟大家介绍一下在PP视频播放器全屏时怎么设置显示进度条和时间的具体 ...

  • 怎么设置电脑QQ影音鼠标悬停进度条上显示预览动画

    怎么设置电脑QQ影音鼠标悬停进度条上显示预览动画

    现在有很多人在电脑上使用QQ影音看视频,有些用户想知道怎么设置软件鼠标悬停进度条上显示预览动画,接下来小编就给大家介绍一下具体的操作步骤.具体如下:1. 首先第一步先点击左下角[开始]图标,接着根据下 ...

  • 表格里的进度条怎么设置（wps完成进度条怎么做）

    表格里的进度条怎么设置（wps完成进度条怎么做）

    在做电子表格的时候,对于一些百分比的数据,如果能加上进度条,看起来就很直观了.下面我们就给大家介绍一下,其实只需要简单的几步,就可以给你的电子表格增色不少.1.首先用鼠标选中需要加进度条的数据.2.然 ...