bootstrap-层叠条纹进度条

简介:

1.运行效果如图所示

wKiom1knk2KjacFrAAAhBqHofoc582.png-wh_50


2.实现代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>层叠条纹进度条</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" 
    href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" 
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" 
    crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件(一般不用引入) -->
    <link rel="stylesheet" 
    href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" 
    integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" 
    crossorigin="anonymous">
</head>
<body>
    <h5>层叠条纹进度条</h5>
    <div class="progress">
        <div class="progress-bar progress-bar-success" style="width:20%"></div>
        <div class="progress-bar progress-bar-info" style="width:20%"></div>
        <div class="progress-bar progress-bar-warning" style="width:30%"></div>
        <div class="progress-bar progress-bar-danger" style="width:15%"></div>
    </div>  
    <div class="progress">
        <div class="progress-bar progress-bar-success progress-bar-striped" style="width:20%">
        </div>
        <div class="progress-bar progress-bar-info progress-bar-striped" style="width:20%">
        </div>
        <div class="progress-bar progress-bar-striped progress-bar-warning" style="width:30%">
        </div>
        <div class="progress-bar progress-bar-danger progress-bar-striped" style="width:15%">
        </div>
    </div> 
    <div class="progress">
        <div class="progress-bar progress-bar-success" style="width:20%"></div>
        <div class="progress-bar progress-bar-info progress-bar-striped" style="width:20%">
        </div>
        <div class="progress-bar progress-bar-warning" style="width:30%"></div>
        <div class="progress-bar progress-bar-danger progress-bar-striped" style="width:15%">
        </div>
    </div>  


    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" 
    integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" 
    crossorigin="anonymous"></script>
</body>
</html>

本文转自 素颜猪 51CTO博客,原文链接:http://blog.51cto.com/suyanzhu/1929678

相关实践学习
Serverless极速搭建Hexo博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
相关文章
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%完成的进度条。
|
1月前
|
前端开发
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;
N..
|
7月前
|
开发框架 前端开发 UED
Bootstrap的CSS组件
Bootstrap的CSS组件
N..
68 0
|
前端开发 容器
|
前端开发 容器