BootStrap 实现各种样式的进度条效果
2016-12-07 16:54
801 查看
Bootstrap提供了各式各样的进度条效果,下面通过实例代码给大家详细介绍,具体详情如下所示:
看下面的例子:
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="../../css/bootstrap.min.css" rel="stylesheet"> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script src="../../js/bootstrap.min.js"></script> <title>进度条</title> </head> <body> <div> <div class="container"> <div class="page-header"> <h1>进度条</h1> </div> <div class="col-lg-10"> <div class="progress"> <div class="progress-bar progress-bar-info" style="width: 20%">progress-bar-info(20%)</div> </div> <div class="progress"> <div class="progress-bar progress-bar-success" style="width: 60%">progress-bar-success(60%)</div> </div> <div class="progress"> <div class="progress-bar progress-bar-danger" style="width: 35%">progress-bar-danger(35%)</div> </div> <div class="progress"> <div class="progress-bar progress-bar-warning" style="width: 90%">progress-bar-warning(90%)</div> </div> <div class="progress active"> <div class="progress-bar progress-bar-striped" style="width: 66%">progress-bar-striped(66%)</div> </div><div class="progress"> <div class="progress-bar progress-bar-warning" style="width: 35%">progress-bar-warning(35%)</div> <div class="progress-bar progress-bar-danger" style="width: 25%">progress-bar-danger(25%)</div> <div class="progress-bar progress-bar-info" style="width: 30%">progress-bar-info(30%)</div> </div> </div> </div> </div> </body> </html>
效果如下:
其中下面的一段产生了动态效果:
<div class="progress active"> <div class="progress-bar progress-bar-striped" style="width: 66%">progress-bar-warning(66%)</div> </div>
下面一段产生了叠加效果:
<div class="progress"> <div class="progress-bar progress-bar-warning" style="width: 35%">progress-bar-warning(35%)</div> <div class="progress-bar progress-bar-danger" style="width: 25%">progress-bar-danger(25%)</div> <div class="progress-bar progress-bar-info" style="width: 30%">progress-bar-info(30%)</div> </div>
以上所述是小编给大家介绍的BootStrap 实现各种样式的进度条效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
- spring MVC + bootstrap实现文件上传示例(带进度条)
- BootStrap Progressbar 实现大文件上传的进度条的实例代码
- Bootstrap fileinput文件上传预览插件使用详解
- BootStrap fileinput.js文件上传组件实例代码
- Bootstrap文件上传组件之bootstrap fileinput
- JS文件上传神器bootstrap fileinput详解
- Bootstrap自定义文件上传下载样式
- 基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
- BootStrap实现文件上传并带有进度条效果
相关文章推荐
- Bootstrap实现各种进度条样式详解
- bootstrap中图标样式caret实现各种三角形
- BootStrap实现文件上传并带有进度条效果
- 实现 进度条效果 实例
- CSS滑动门技术实现TAB标签切换效果实例,支持各种浏览器
- [Wap] 制作自定义WmlListAdapter来实现Mobile.List控件的各种效果
- [Wap] 制作自定义WmlListAdapter来实现Mobile.List控件的各种效果
- 用CSS+JS实现的进度条效果效果
- JS 进度条效果实现代码整理
- DIV+CSS定义滚动条样式,实现内嵌效果
- CSS滑动门技术实现TAB标签切换效果实例,支持各种浏览器
- jQuery实现select下拉框样式美化效果
- [Wap] 制作自定义WmlListAdapter来实现Mobile.List控件的各种效果
- jquery实现股票的各种效果
- 详解JAVA POI导出EXCEL报表的操作(包括各种格式及样式的实现)
- CSS滑动门技术实现TAB标签切换效果实例,支持各种浏览器
- 用CSS+JS实现的进度条效果效果
- Visual C++实现各种文字特殊效果
- 各种 lightbox 实现效果介绍
- 在UITableView中实现各种翻转切换效果的Demo