海口家政小程序开发_Bootstrap完成各种进度条样式

发布时间:2021-01-12 12:09 作者:jianzhan

摘要: Bootstrap完成各种各样进展条款式详细说明 加上一个含有 class .progress 的 div 。然后,在上边的 div 内,加上一个含有 class .progress-bar 的空的 div 。加上一个含有百分数表明的总宽的

Bootstrap实现各种进度条样式详解       本篇文章主要介绍了Bootstrap实现各种进度条样式详解 ,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
添加一个带有 class .progress 的 div 。 接着,在上面的 div 内,添加一个带有 class .progress-bar 的空的 div 。 添加一个带有百分比表示的宽度的 style 属性,例如 ; 表示进度条在 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="/scripts/jquery.min.js" /script 
 script src="/bootstrap/js/bootstrap.min.js" /script 
 /head 
 body 
 div 
 div role="progressbar" aria-valuenow="60"
aria-valuemin="0" aria-valuemax="100" 
 span 40% 完成 /span 
 /div 
 /div 

结果如下所示:

 

二:交替的进度条

创建不同样式的进度条的步骤如下:

添加一个带有 class .progress 的 div 。 接着,在上面的 div 内,添加一个带有 class .progress-bar 和 class progress-bar-* 的空的 div 。其中,* 、warning、danger。 添加一个带有百分比表示的宽度的 style 属性,例如 ; 表示进度条在 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="/scripts/jquery.min.js" /script 
 script src="/bootstrap/js/bootstrap.min.js" /script 
 /head 
 body 

结果如下所示:

 

三:条纹的进度条

创建一个条纹的进度条的步骤如下:

添加一个带有 class .progress 和 .progress-striped 的 div 。 接着,在上面的 div 内,添加一个带有 class .progress-bar 和 class progress-bar-* 的空的 div 。其中,* 、warning、danger。 添加一个带有百分比表示的宽度的 style 属性,例如 ; 表示进度条在 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="/scripts/jquery.min.js" /script 
 script src="/bootstrap/js/bootstrap.min.js" /script 
 /head 
 body 

结果如下所示:

 

四:动画的进度条

创建一个动画的进度条的步骤如下:

添加一个带有 class .progress 和 .progress-striped 的 div 。同时添加 class .active。 接着,在上面的 div 内,添加一个带有 class .progress-bar 的空的 div 。 添加一个带有百分比表示的宽度的 style 属性,例如 ; 表示进度条在 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="/scripts/jquery.min.js" /script 
 script src="/bootstrap/js/bootstrap.min.js" /script 
 /head 
 body 

结果如下所示:

 

五:堆叠的进度条

您甚至可以堆叠多个进度条。把多个进度条放在相同的 .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="/scripts/jquery.min.js" /script 
 script src="/bootstrap/js/bootstrap.min.js" /script 
 /head 
 body 

结果如下所示:

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


  • 精彩纷呈桌游 艺术创意无

    桌面上入门机手机游戏是一种群体主题风格主题活动,群体主题风格主题活动是最能营造和煅炼小孩子多方面面的工作中工作能力。如何把桌面上入门机手机游戏玩殊荣荣誉出品质?如

  • H5方案策划

    模拟题目:H5计划方案方案策划|H5手机上手机游戏营销推广营销推广的优点 随着着H5营销推广营销推广的发展趋势发展趋势,许多的企业或是商家全是用H5手中机手机微信综合服务平台营

  • 幽会迅速关联暖味,玩这

    原题目:幽会迅速关联暖味,玩这好多个手机游戏 许多弟兄历经学习培训提高学好了怎样邀请女孩,可是在幽会之中還是不知道道个女孩怎样交往互动交流。 都不了解干什么说些什么

  • Mini视频语音,超好玩儿的

    模拟题目:Mini视頻视频语音,超好玩儿儿的视頻视频语音闲谈综合服务平台 由Mini精锐精英团队认真打造出出,许多人期待的“Mini视頻视频语音”震撼人心内心袭来! 唯一你需要不了,

  • 有害!微信朋友圈都会玩

    模拟题目:危害!手机微信微信朋友圈都是玩这一手机游戏! 昨日,手机上手机微信升級了全新升级升級的版本号号,也就是6.6.1版后,手机上手机微信手机微信微信小程序终于公布可