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>

效果

Bootstrap入门(二十一)组件15:警告框

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>

效果

Bootstrap入门(二十一)组件15:警告框

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>

效果

Bootstrap入门(二十一)组件15:警告框

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去掉就可以了

Bootstrap入门(二十一)组件15:警告框

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:警告框

或者也可以嵌套两个默认的样式,同样也是可以的

效果

Bootstrap入门(二十一)组件15:警告框

上一篇:循序渐进看Java web日志跟踪(3)-Log4J的使用和配置


下一篇:HDU 3853 LOOPS 概率DP入门