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

网络编程 2024/11/15 佚名

3 2 1

一：默认的进度条

创建一个基本的进度条的步骤如下：

添加一个带有 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">

结果如下所示：

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

                                
                                
                                    bootstrap,进度条,bootstrap,进度条样式,bootstrap,动态进度条 
                                
                                    标签：
                                        bootstrap,进度条,bootstrap,进度条样式,bootstrap,动态进度条
                                     

                            
                        
                        
                            
                                免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
                                如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
                            
                        
                        
                            
                                
                                    上一篇
                                    微信小程序 动态绑定事件并实现事件修改样式
                                
                            
                            
                                
                                    下一篇
                                    微信小程序 本地数据存储实例详解
                                
                            
                        
                        
                        
                            
                                
                                
                                    评论“Bootstrap实现各种进度条样式详解”
                                
                            
                            
                                
                                    
                                        
                                            
                                                Bootstrap实现各种进度条样式详解
                                            
                                            
                                                
                                            
                                            
                                                
                                                
                                                
                                            
                                            
                                        
                                    
                                    
                                    
                                        暂无“Bootstrap实现各种进度条样式详解”评论...