bootstrap-进度条--条纹进度条
2017-05-26 09:50
351 查看
1.运行效果如图所示
2.实现代码如下
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>进度条--条纹进度条</title> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- 可选的 Bootstrap 主题文件(一般不用引入) --> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> </head> <body> <div class="progress progress-striped"> <div class="progress-bar progress-bar-success" style="width:40%"></div> </div> <div class="progress progress-striped"> <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"> <div class="progress-bar progress-bar-danger" style="width:50%"></div> </div> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </body> </html>
相关文章推荐
- bootstrap-进度条--动态条纹进度条
- Bootstrap 条纹进度条
- bootstrap-层叠条纹进度条
- Android条纹进度条的实现(调整view宽度仿进度条)
- Android自定义圆形进度条,结合AsyncTask下载显示进度
- 1.CCProgressTo进度动作,条形进度条,扇形进度条
- 在winform中使用进度条显示任务的执行进度
- 使用ASP.NET Atlas编写显示真实进度的ProgressBar(进度条)控件
- 自定义进度条渐变色进度条
- Xamarin XAML语言教程使用属性设置进度条的当前进度
- [置顶] 【javascript 画进度条】js实现进度条的方法
- Python实现采用进度条实时显示处理进度的方法
- Bootstrap基本组件学习笔记之进度条(15)
- bootstrap学习23---进度条
- iOS的花式进度条-五边形进度条,六边形进度条
- Bootstrap 进度条
- bootstrap3的 progress 进度条
- 自定义圆形进度条,绘制进度条
- Bootstrap 基本进度条
- bootstrap-进度条