Bootstrap实现各种进度条样式详解

(编辑：jimmy 日期: 2024/11/17 浏览：3 次 )
一：默认的进度条
创建一个基本的进度条的步骤如下：
添加一个带有 class .progress 的 <div>。
接着，在上面的 <div> 内，添加一个带有 class .progress-bar 的空的 <div>。
添加一个带有百分比表示的宽度的 style 属性，例如 style="60%"; 表示进度条在 60% 的位置。
让我们看看下面的实例：
<!DOCTYPE html>

<html>

<head>

<title>Bootstrap 实例 - 进度条</title>

<link href="/bootstrap/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet">

<script src="/UploadFiles/2021-04-02/jquery.min.js">

结果如下所示：
 
二：交替的进度条
创建不同样式的进度条的步骤如下：

  添加一个带有 class .progress 的 <div>。
  接着，在上面的 <div> 内，添加一个带有 class .progress-bar 和 class progress-bar-* 的空的 <div>。其中，* 可以是 success、info、warning、danger。
  添加一个带有百分比表示的宽度的 style 属性，例如 style="60%"; 表示进度条在 60% 的位置。

让我们看看下面的实例：


<!DOCTYPE html>

<html>

<head>

<title>Bootstrap 实例 - 交替的进度条</title>

<link href="/bootstrap/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet">

<script src="/UploadFiles/2021-04-02/jquery.min.js">

结果如下所示：
 
三：条纹的进度条
创建一个条纹的进度条的步骤如下：

  添加一个带有 class .progress 和 .progress-striped 的 <div>。
  接着，在上面的 <div> 内，添加一个带有 class .progress-bar 和 class progress-bar-* 的空的 <div>。其中，* 可以是 success、info、warning、danger。
  添加一个带有百分比表示的宽度的 style 属性，例如 style="60%"; 表示进度条在 60% 的位置。

让我们看看下面的实例：


<!DOCTYPE html>

<html>

<head>

<title>Bootstrap 实例 - 条纹的进度条</title>

<link href="/bootstrap/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet">

<script src="/UploadFiles/2021-04-02/jquery.min.js">

结果如下所示：
 
四：动画的进度条
创建一个动画的进度条的步骤如下：

  添加一个带有 class .progress 和 .progress-striped 的 <div>。同时添加 class .active。
  接着，在上面的 <div> 内，添加一个带有 class .progress-bar 的空的 <div>。
  添加一个带有百分比表示的宽度的 style 属性，例如 style="60%"; 表示进度条在 60% 的位置。

这将会使条纹具有从右向左的运动感。
让我们看看下面的实例：


<!DOCTYPE html>

<html>

<head>

<title>Bootstrap 实例 - 动画的进度条</title>

<link href="/bootstrap/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet">

<script src="/UploadFiles/2021-04-02/jquery.min.js">

结果如下所示：
 
五：堆叠的进度条
您甚至可以堆叠多个进度条。把多个进度条放在相同的 .progress 中即可实现堆叠，如下面的实例所示：


<!DOCTYPE html>

<html>

<head>

<title>Bootstrap 实例 - 堆叠的进度条</title>

<link href="/bootstrap/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet">

<script src="/UploadFiles/2021-04-02/jquery.min.js">

结果如下所示：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

            
            上一篇：微信小程序 动态绑定事件并实现事件修改样式

            下一篇：微信小程序 本地数据存储实例详解

        
    
    一句话新闻
Windows上运行安卓你用过了吗
在去年的5月23日，借助Intel Bridge Technology以及Intel Celadon两项技术的驱动，Intel为PC用户带来了Android On Windows（AOW）平台，并携手国内软件公司腾讯共同推出了腾讯应用宝电脑版，将Windows与安卓两大生态进行了融合，PC的使用体验随即被带入到了一个全新的阶段。
    
    
        友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 网站地图 SiteMap
    
    
        
            
                主页
                破解
                音乐
                影视