脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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或css文件后面跟参数的原因说明

    js或css文件后面跟参数的原因说明

    经常看到不少导航网站测样式或js文件后面加了一些参数，主要是一你为一些并不经常更新的页面重新加载新修改的文件。
    2010-01-01
  • Javascript玩转继承（二）

    Javascript玩转继承（二）

    这篇文章主要介绍了对象伪装来实现继承。我们在这里先来说一下这种方式的优缺点
    2014-05-05
  • JS实现判断滚动条滚到页面底部并执行事件的方法

    JS实现判断滚动条滚到页面底部并执行事件的方法

    这篇文章主要介绍了JS实现判断滚动条滚到页面底部并执行事件的方法,本文先是分析了需求以及必备知识,然后给出实现代码,需要的朋友可以参考下
    2014-12-12
  • 扒一扒JavaScript 预解释

    扒一扒JavaScript 预解释

    这篇文章主要介绍了JavaScript 预解释,包含带var关键字预解释、带function关键字预解释,需要的朋友可以参考下
    2015-01-01
  • uniapp实现横向滚动选择日期

    uniapp实现横向滚动选择日期

    这篇文章主要为大家详细介绍了uniapp实现横向滚动选择日期，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-10-10
  • JS实现鼠标移动拖尾

    JS实现鼠标移动拖尾

    这篇文章主要为大家详细介绍了JS实现鼠标移动拖尾效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-12-12
  • uniapp调用百度语音实现录音转文字功能

    uniapp调用百度语音实现录音转文字功能

    这篇文章主要介绍了uniapp通过调用百度语音，实现录音转文字的功能。文中的示例代码对我们学习或工作有一定的帮助，感兴趣的小伙伴可以跟随小编学习一下
    2021-12-12
  • element中的$confirm的使用

    element中的$confirm的使用

    这篇文章主要介绍了element中的$confirm的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • 使用layer弹窗,制作编辑User信息页面的方法

    使用layer弹窗,制作编辑User信息页面的方法

    今天小编就为大家分享一篇使用layer弹窗,制作编辑User信息页面的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JavaScript组合模式Composite Pattern

    JavaScript组合模式Composite Pattern

    这篇文章主要介绍了学习理解JavaScript组合模式，组合模式及Composite Pattern又叫部分整体模式，是用于把一组相似的对象当作一个单一的对象
    2022-04-04

最新评论