Bootstrap进度条学习使用

更新时间：2017年02月09日 09:30:13 作者：轻扰时光

这篇文章主要为大家详细介绍了Bootstrap进度条的学习使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了Bootstrap进度条的具体实现代码，供大家参考，具体内容如下

<!doctype html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Bootstrap</title>
 <link rel="stylesheet" href="css/bootstrap.css" rel="external nofollow" />
</head>
<body>
 <div class="container">
  <div class="row">
   <div class="progress"><!--进度条-->
    <div class="progress-bar" style="width:60%">60%</div>
   </div>
   <div class="progress">
    <div class="progress-bar progress-bar-danger" style="width:40%">40%</div>
   </div>
   <div class="progress">
    <div class="progress-bar progress-bar-info" style="width:80%">80%</div>
   </div>
   <div class="progress">
    <div class="progress-bar progress-bar-warning" style="width:75%">75%</div>
   </div>
   <!--带条纹的动态的进度条-->
   <div class="progress">
    <div class="progress-bar progress-bar-success progress-bar-striped active" style="width:68%">68%</div>
   </div>
   <!--带堆叠效果的进度条-->
   <div class="progress">
    <div class="progress-bar" style="width:10%">10%</div>
    <div class="progress-bar progress-bar-danger" style="width:10%">40%</div>
    <div class="progress-bar progress-bar-info" style="width:20%">80%</div>
    <div class="progress-bar progress-bar-warning" style="width:30%">75%</div>
    <div class="progress-bar progress-bar-success progress-bar-striped active" style="width:20%">20%</div>
   </div>
  </div> 
 </div>
 <script src="js/jquery-2.1.0.js"></script>
 <script src="js/bootstrap.js"></script>
</body>
</html>

效果图：

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

您可能感兴趣的文章:

js操作时间（年-月-日时-分-秒星期几）
js操作时间（年-月-日时-分-秒星期几）,需要的朋友可以参考下。
2010-06-06
JavaScript设计模式学习之适配器模式
这篇文章主要介绍了JavaScript设计模式之适配器模式，对设计模式不熟悉的同学，可以参考学习一下
2021-04-04
js异步之async和await实现同步写法
本文主要介绍了js异步之async和await实现同步写法，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
深入解析JavaScript中的变量作用域
这篇文章主要是对JavaScript中的变量作用域进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2013-12-12
原生JS实现鼠标滑动撒爱心特效
这篇文章主要为大家详细介绍了原生JS实现鼠标滑动撒爱心特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-10-10
JavaScript转换农历类实现及调用方法
农历是日常生活中不可或缺的一部分，它与人类的生活息息相关，从某种程度上说，它一直伴随着我们，今天的任务是JavaScript转换农历类的实现，感兴趣的你可以千万不要错过，希望本文对你有所帮助
2013-01-01
javascript 弹出的窗口返回值给父窗口具体实现
这篇文章主要介绍了javascript 弹出的窗口返回值给父窗口具体实现，有需要的朋友可以参考一下
2013-11-11
使用TypeScript在接口中定义静态方法详解
当我们谈论面向对象编程时,最难理解的事情之一就是静态属性与实例属性的概念,尤其是当我们试图在静态类型的基础上进行动态语言类型化时,在本文中,我将主要介绍一下如何使用TypeScript在接口中定义静态方法,需要的朋友可以参考下
2023-10-10
关于微信中a链接无法跳转问题
微信页面开发时，各个主页之间的跳转，完全是通过a链接进行的，但是来回跳转几次，再次从其他主页面跳回首页的时候，微信头部出现了跳转加载进度条，但是就是不跳转，也没有任何反应，怎么回事呢？下面小编给大家解答下
2016-08-08
JavaScript获取FCK编辑器信息的具体方法
这篇文章介绍了JavaScript获取FCK编辑器信息的实例代码，有需要的朋友可以参考一下
2013-07-07

Bootstrap进度条学习使用

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具