首页 > 代码库 > Bootstrap入门（二十一）组件15：警告框
Bootstrap入门（二十一）组件15：警告框
Bootstrap入门（二十一）组件15：警告框
通过这些简单、灵活的进度条，为当前工作流程或动作提供实时反馈。
进度条组件使用了 CSS3 的 transition 和 animation 属性来完成一些特效。这些特性在 Internet Explorer 9 或以下版本中、Firefox 的老版本中没有被支持。Opera 12 不支持 animation 属性。
1.默认的进度条
2.带显示进度的进度条
3.情景进度条
4.带条纹的滚动条
5.两者结合/嵌套使用
先引入CSS文件
<link href="bootstrap.min.css" rel="stylesheet">
为了方便截图和查看，我先加入一个style
<style> body{ margin: 10px 0; } </style>
下面的代码都放在一个容器div中
<div class="container"> ... </div>
1.默认的进度条
假设是50%了，新建一个class为progress的div来承载进度条
<div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%"> <span class="sr-only">50%</span> </div> </div>
效果
2.带显示进度的进度条
只是看图的话，有时候很难知道准确的进度情况，我们可以把他显示出来
添加代码
<div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:60%"> 60% </div> </div>
效果
3.情景进度条
有时候，低于50%是一个颜色（警告），高于50%又是另外一个颜色（快成功了），是情景的
“”（还有progress-bar-info progress-bar-danger等）
添加代码
<div class="progress"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:40%"> 40% </div> </div> <div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:90%"> 90% </div> </div>
效果
4.带条纹的滚动条
有时候看上去有点单调，如果多个条纹就好看很多（IE 8不支持）
添加代码
<div class="progress"> <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:90%"> 90% </div> </div>
效果，这是的确滚动起来的，如果不想动，只是要条纹，只需要把class中active去掉就可以了
5.两者结合/嵌套使用
添加代码，嵌套使用就可以了
<div class="progress"> <div class="progress-bar" style="width:30%"></div> <div class="progress-bar progress-bar-success progress-bar-striped" style="width:25%"></div> </div>
效果：
或者也可以嵌套两个默认的样式，同样也是可以的
效果
Bootstrap入门（二十一）组件15：警告框
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。