脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → bootstrap 进度条

Bootstrap 3 进度条的实现

 更新时间：2017年02月22日 10:35:30   作者：qq1214379009  
这篇文章主要介绍了Bootstrap 3 进度条的实现,非常不错，具有参考借鉴价值，需要的朋友可以参考下

基本样式

<div class="progress">
 <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
 <span class="sr-only">60% Complete</span>
 </div>
</div>

自带进度

<div class="progress">
 <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
 60%
 </div>
</div>
<div class="progress">
 <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
 0%
 </div>
</div>
<div class="progress">
 <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
 2%
 </div>
</div>

多种颜色

<div class="progress">
 <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
 <span class="sr-only">40% Complete (success)</span>
 </div>
</div>
<div class="progress">
 <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
 <span class="sr-only">20% Complete</span>
 </div>
</div>
<div class="progress">
 <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
 <span class="sr-only">60% Complete (warning)</span>
 </div>
</div>
<div class="progress">
 <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
 <span class="sr-only">80% Complete (danger)</span>
 </div>
</div>

条纹

<div class="progress">
 <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
 <span class="sr-only">40% Complete (success)</span>
 </div>
</div>
<div class="progress">
 <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
 <span class="sr-only">20% Complete</span>
 </div>
</div>
<div class="progress">
 <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
 <span class="sr-only">60% Complete (warning)</span>
 </div>
</div>
<div class="progress">
 <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
 <span class="sr-only">80% Complete (danger)</span>
 </div>
</div>

动态

<div class="progress">
 <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
 <span class="sr-only">45% Complete</span>
 </div>
</div>

堆叠

<div class="progress">
 <div class="progress-bar progress-bar-success" style="width: 35%">
 <span class="sr-only">35% Complete (success)</span>
 </div>
 <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
 <span class="sr-only">20% Complete (warning)</span>
 </div>
 <div class="progress-bar progress-bar-danger" style="width: 10%">
 <span class="sr-only">10% Complete (danger)</span>
 </div>
</div>

以上所述是小编给大家介绍的Bootstrap 3 进度条的实现，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • js拖拽的原型声明和用法总结

    js拖拽的原型声明和用法总结

    这篇文章主要为大家详细介绍了js拖拽的原型声明和用法总结，感兴趣的朋友可以参考一下
    2016-04-04
  • JavaScript利用HTML DOM进行文档操作的方法

    JavaScript利用HTML DOM进行文档操作的方法

    DOM是W3C制定的用于访问诸如XML和XHTML等结构化文档的标准。通过本文给大家介绍JavaScript利用HTML DOM进行文档操作的方法，需要的朋友参考下吧
    2016-03-03
  • HTML5实现微信拍摄上传照片功能

    HTML5实现微信拍摄上传照片功能

    这篇文章主要介绍了HTML5实现微信拍摄上传照片功能，实现HTML5 Canvas手机拍摄，本地压缩上传图片时遇到问题的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-04-04
  • layui table去掉右侧滑动条的实现方法

    layui table去掉右侧滑动条的实现方法

    今天小编就为大家分享一篇layui table去掉右侧滑动条的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 微信小程序表单验证功能完整实例

    微信小程序表单验证功能完整实例

    这篇文章主要介绍了微信小程序表单验证功能,结合完整实例形式分析了微信小程序完成表单验证功能所涉及的视图与逻辑操作技巧,需要的朋友可以参考下
    2017-12-12
  • JavaScript中数组对象的那些自带方法介绍

    JavaScript中数组对象的那些自带方法介绍

    数组对象自带方法想必大家都有所耳闻,今天主要为大家介绍下JavaScript中数组对象的那些自带方法，感兴趣的你可以参考下哈，希望可以帮助你学习javascript
    2013-03-03
  • 学习JavaScript设计模式之观察者模式

    学习JavaScript设计模式之观察者模式

    这篇文章主要为大家介绍了JavaScript设计模式中的观察者模式，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-01-01
  • js获取当前页面路径示例讲解

    js获取当前页面路径示例讲解

    本篇文章主要是对js获取当前页面路径的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2014-01-01
  • JS中Generator函数与async函数用法介绍

    JS中Generator函数与async函数用法介绍

    javascript中经常会用到异步编程，在ES6之后我们使用的 Generator函数、async函数、promise都是我们异步编程的一大助力，这里我们主要讲解Generator、async函数，并且简介他们之间的一些联系，本篇文章会带着一些简易案例，方便大家理解使用
    2023-06-06
  • javascript实现右侧弹出“分享到”窗口效果

    javascript实现右侧弹出“分享到”窗口效果

    这篇文章主要为大家介绍了javascript实现右侧弹出“分享到”窗口效果，以一个完整的js右侧弹出“分享到”窗口的实例代码进行分析，感兴趣的小伙伴们可以参考一下
    2016-02-02

最新评论