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>

效果：

或者也可以嵌套兩個默認的樣式，同樣也是可以的

效果

?

?

轉載于:https://www.cnblogs.com/hnnydxgjj/p/5888233.html

總結

以上是生活随笔為你收集整理的Bootstrap入门（二十一）组件15：警告框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。