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>
效果图:
如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- bootstrap多种样式进度条展示
- bootstrap-进度条--基本样式
- SpringMVC实现的文件上传进度条Bootstrap展示
- Android一个应用中展示多个多种样式的Widget
- 基于 bootstrap 的数据展示--bootgrid 样式修改。
- 基于 bootstrap 的数据展示--bootgrid 样式改动。
- 基于 bootstrap 的数据展示--bootgrid 样式修改。
- RecyclerView的Item多种类型的选择和不同样式展示之利用框架方法实现
- Bootstrap历练实例:警告样式按钮
- Shell 循环中实现展示进度百分比的脚本方法
- 黑马商城项目_商品展示样式设计
- 结构-行为-样式-Bootstrap笔记
- datatables 配套bootstrap3样式使用小结(1)
- 温度计式的时间进度(前端样式)
- JS组件系列——Bootstrap寒冬暖身篇:弹出框和提示框效果以及代码展示
- JS组件系列——Bootstrap寒冬暖身篇:弹出框和提示框效果以及代码展示
- 使用bootstrap默认样式,修改input=file的展现样式
- bootstrap的3级菜单样式,支持母版页保留打开状态实现方法
- wpf slider 进度条的样式模板,带有进度颜色显示
- Android Material Design 进度条 自定义进度条样式