bootstrap进度条

最新推荐文章于 2024-04-30 15:44:23 发布

cpf2016

最新推荐文章于 2024-04-30 15:44:23 发布

阅读量624

点赞数

分类专栏： bootstrap 文章标签： javascript ViewUI

bootstrap 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

（1）普通进度条

1.实现

外容器使用“progress”样式，子容器使用“progress-bar”样式。

2.说明

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

1、role属性作用：告诉搜索引擎这个div的作用是进度条。

2、aria-valuenow="40"属性作用：当前进度条的进度为40%。

3、aria-valuemin="0"属性作用：进度条的最小值为0%。

4、aria-valuemax="100"属性作用：进度条的最大值为100%。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>进度条--基本样式</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>  
<div class="progress">
     <div class="progress-bar" style="width:80%">
	</div>
</div> 
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
</body>
</html>

（2）彩色进度条

1.实现

在progress-bar后添加指定样式即可

☑ progress-bar-info：表示信息进度条，进度条颜色为蓝色

☑ progress-bar-success：表示成功进度条，进度条颜色为绿色

☑ progress-bar-warning：表示警告进度条，进度条颜色为黄色

☑ progress-bar-danger：表示错误进度条，进度条颜色为红色

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>进度条--彩色进度条</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>  
<div class="progress">
    <div class="progress-bar progress-bar-success" style="width:40%"></div>
</div> 
<div class="progress">
 	<div class="progress-bar progress-bar-info" style="width:60%"></div>
</div> 
<div class="progress">
 	<div class="progress-bar progress-bar-warning" style="width:80%"></div>
</div> 
<div class="progress">
 	<div class="progress-bar progress-bar-danger" style="width:50%"></div>
</div> 

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
</body>
</html>

（3）条纹进度条

1.实现

在progress后添加progress-striped即可

2.实现动态条纹

继续加上active即可

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>进度条--动态条纹进度条</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-success" style="width:40%"></div>
</div> 
<div class="progress progress-striped active">
	<div class="progress-bar progress-bar-info" style="width:60%"></div>
</div> 
<div class="progress progress-striped">
	<div class="progress-bar progress-bar-warning" style="width:80%"></div>
</div> 
<div class="progress progress-striped active">
	<div class="progress-bar progress-bar-danger" style="width:50%"></div>
</div>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
</body>
</html>

（4）层叠进度条

1.实现

将所有progress-bar放在同一个progress下即可

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>进度条--层叠进度条</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<h5>正常层叠进度条</h5>
<div class="progress">
    <div class="progress-bar progress-bar-success" style="width:20%"></div>
    <div class="progress-bar progress-bar-info" style="width:10%"></div>
    <div class="progress-bar progress-bar-warning" style="width:30%"></div>
    <div class="progress-bar progress-bar-danger" style="width:15%"></div>
</div> 
<h5>不良效果层叠进度条</h5> 
<div class="progress">
	<div class="progress-bar progress-bar-success" style="width:20%"></div>
	<div class="progress-bar progress-bar-info" style="width:40%"></div>
	<div class="progress-bar progress-bar-warning" style="width:30%"></div>
	<div class="progress-bar progress-bar-danger" style="width:45%"></div>
</div> 

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
</body>
</html>

2.注意

所有和不能超过100%

（5）含有label进度条

1.实现

将内容放在progress-bar的范围之内即可

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>进度条--带Label的进度条</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>

<h1>进度条1</h1>
<div class="progress">
    <div class="progress-bar progress-bar-success"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%">20%</div>  
</div>  
<div class="progress">
	<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"   style="width:70%">70%</div>
</div>
<div class="progress">
	<div class="progress-bar progress-bar-warning"  role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width:30%">30%</div>
</div>
<div class="progress">
	<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" style="width:15%">15%</div>
</div>

<h1>进度条2</h1> 
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
</div>

  <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
</body>
</html>

cpf2016

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap进度条

（1）普通进度条 1.实现外容器使用“progress”样式，子容器使用“progress-bar”样式。 2.说明 40% Complete 1、role属性作用：告诉搜索引擎这个div的作用是进度条。2、aria-valuenow="40"属性作用：当前进度条的进度为
复制链接

扫一扫