菜单

bootstrap多种样式进度条展示

2019年8月23日 - 前端排行
bootstrap多种样式进度条展示

bootstrap多种样式进度条展示,bootstrap进度条

为大家分享了多种多样的bootstrap进度条样式,供大家参考,具体内容如下

1、默认的进度条
添加一个带有class .progress 的div,在其内添加一个带有 class
.progress-bar 的空div,为空div添加一个以百分比表示的style属性,如
style=”60%”表示进度条在60%的位置。 

2、不同样式的进度条 添加一个带有class .progress 的div,在其内添加一个带有class
.progress-bar 和class
.progress-bar-*(*可以是success、info、warning、danger)
的空div,为空div添加一个以百分比表示的style属性,如
style=”60%”表示进度条在60%的位置。 

3、条纹的进度条 添加一个带有class .progress 和class .progress-striped以及class
.active的div,在其内添加一个带有class .progress-bar
的空div,为空div添加一个以百分比表示的style属性,如
style=”60%”表示进度条在60%的位置。 

4、动画的进度条 添加一个带有class .progress 和class
.progress-striped的div,在其内添加一个带有 class .progress-bar 
的空div,为空div添加一个以百分比表示的style属性,如
style=”60%”表示进度条在60%的位置。 

5、堆叠的进度条 把多个进度条放在相同的 .progress 中即可实现堆叠。

<div id="out"> 
 默认的进度条: 
 <div class="progress"> 
 <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div> 
 </div> 
 不同样式的进度条: 
 <div class="progress"> 
 <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"></div> 
 </div> 
 <div class="progress"> 
 <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div> 
 </div> 
 <div class="progress"> 
 <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;"></div> 
 </div> 
 <div class="progress"> 
 <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;"></div> 
 </div> 
 条纹的进度条: 
 <div class="progress progress-striped"> 
 <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"></div> 
 </div> 
 <div class="progress progress-striped"> 
 <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div> 
 </div> 
 <div class="progress progress-striped"> 
 <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;"></div> 
 </div> 
 <div class="progress progress-striped"> 
 <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;"></div> 
 </div> 
 动画的进度条: 
 <div class="progress progress-striped active"> 
 <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"></div> 
 </div> 
 <div class="progress progress-striped active"> 
 <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div> 
 </div> 
 <div class="progress progress-striped active"> 
 <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;"></div> 
 </div> 
 <div class="progress progress-striped active"> 
 <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;"></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%;"></div> 
 <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;"></div> 
 <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="width: 10%;"></div> 
 <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100" style="width: 5%;"></div> 
 </div> 
</div> 

效果图:

图片 1

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

为大家分享了多种多样的bootstrap进度条样式,供大家参考,具体内容如下
1、默认的进度条 添加…

为大家分享了多种多样的bootstrap进度条样式,供大家参考,具体内容如下

本文将介绍Bootstrap进度条,在本文中你将看到如何使用Bootstrap创建加载,重定向或动作状态的进度条

1、默认的进度条
添加一个带有class .progress 的div,在其内添加一个带有 class
.progress-bar 的空div,为空div添加一个以百分比表示的style属性,如
style=”60%”表示进度条在60%的位置。 

   bootstrap进度条使用CSS3过渡和动画来获得该效果。Internet
Exploreer9及之前的版本和旧版的firefox不支持该特性,Opera12不支持动画。

2、不同样式的进度条 添加一个带有class .progress 的div,在其内添加一个带有class
.progress-bar 和class
.progress-bar-*(*可以是success、info、warning、danger)
的空div,为空div添加一个以百分比表示的style属性,如
style=”60%”表示进度条在60%的位置。 

默认的进度条

3、条纹的进度条 添加一个带有class .progress 和class .progress-striped以及class
.active的div,在其内添加一个带有class .progress-bar
的空div,为空div添加一个以百分比表示的style属性,如
style=”60%”表示进度条在60%的位置。 

创建一个基本的进度条的步骤如下:

4、动画的进度条 添加一个带有class .progress 和class
.progress-striped的div,在其内添加一个带有 class .progress-bar 
的空div,为空div添加一个以百分比表示的style属性,如
style=”60%”表示进度条在60%的位置。 

添加一个带有class .progress的div

5、堆叠的进度条 把多个进度条放在相同的 .progress 中即可实现堆叠。

接着,在上面的div 内,添加一个带有class .progress-bar的空的div

<div id="out"> 
 默认的进度条: 
 <div class="progress"> 
 <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div> 
 </div> 
 不同样式的进度条: 
 <div class="progress"> 
 <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"></div> 
 </div> 
 <div class="progress"> 
 <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div> 
 </div> 
 <div class="progress"> 
 <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;"></div> 
 </div> 
 <div class="progress"> 
 <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;"></div> 
 </div> 
 条纹的进度条: 
 <div class="progress progress-striped"> 
 <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"></div> 
 </div> 
 <div class="progress progress-striped"> 
 <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div> 
 </div> 
 <div class="progress progress-striped"> 
 <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;"></div> 
 </div> 
 <div class="progress progress-striped"> 
 <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;"></div> 
 </div> 
 动画的进度条: 
 <div class="progress progress-striped active"> 
 <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"></div> 
 </div> 
 <div class="progress progress-striped active"> 
 <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div> 
 </div> 
 <div class="progress progress-striped active"> 
 <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;"></div> 
 </div> 
 <div class="progress progress-striped active"> 
 <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;"></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%;"></div> 
 <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;"></div> 
 <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="width: 10%;"></div> 
 <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100" style="width: 5%;"></div> 
 </div> 
</div> 

添加一个带有百分比表示的宽度的style属性,例如 ;表示进度条在60%的位置。

效果图:

让我们看看下面的实例:

图片 2

图片 3

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

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

Bootstrap学习教程

交替的进度条

Bootstrap实战教程

创建不同样式的进度条的步骤如下:

Bootstrap Table使用教程

添加一个带有class progress的div

Bootstrap插件使用教程

接着,在上面的的div 添加一个带有class progress-bar和class
progress-bar-*的空的div 其中,*可以是success,info,warning,danger.

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

添加一个带有百分比表示的宽度的style属性,例如 ;表示进度条在60%的位置。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图