网站建设服务商_凡科商城官网_线上商城_商标免费设计在线生成_微商城
当前位置:建站首页 > 新闻资讯 > 网站设计 >

微信小程序系统软件_BootStrap 完成各种样式的进度

发表日期:2021-01-12 16:40文章编辑:jianzhan浏览次数: 标签:    

BootStrap 实现各种样式的进度条效果       这篇文章主要介绍了BootStrap 实现各种样式的进度条效果,代码分为动态和叠加两种效果,需要的朋友可以参考下

Bootstrap提供了各式各样的进度条效果,下面通过实例代码给大家详细介绍,具体详情如下所示:

看下面的例子:

 !DOCTYPE html 
 html lang="" 
 head 
 meta charset="UTF-8" 
 meta name="viewport" content="width=device-width, initial-scale=1" 
 link href="../../css/bootstrap.min.css" rel="stylesheet" 
 script src="jquery/1.11.1/jquery.min.js" /script 
 script src="../../js/bootstrap.min.js" /script 
 title 进度条 /title 
 /head 
 body 
 div 
 div 
 div 
 h1 进度条 /h1 
 /div 
 div 
 div 
 div (20%) /div 
 /div 
 div 
 div progress-ess(60%) /div 
 /div 
 div 
 div progress-bar-danger(35%) /div 
 /div 
 div 
 div progress-bar-warning(90%) /div 
 /div 
 div 
 div progress-bar-striped(66%) /div 
 /div 
 div 
 div progress-bar-warning(35%) /div 
 div progress-bar-danger(25%) /div 
 div (30%) /div 
 /div 
 /div 
 /div 
 /div 
 /body 
 /html 

效果如下:

其中下面的一段产生了动态效果:

 div 
 div progress-bar-warning(66%) /div 
 /div 

下面一段产生了叠加效果:

 div 
 div progress-bar-warning(35%) /div 
 div progress-bar-danger(25%) /div 
 div (30%) /div 
 /div 

以上所述是小编给大家介绍的BootStrap 实现各种样式的进度条效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!


相关新闻