Bootstrap入門（二十一）組件15：警告框

通過(guò)這些簡(jiǎn)單、靈活的進(jìn)度條，為當(dāng)前工作流程或動(dòng)作提供實(shí)時(shí)反饋。

進(jìn)度條組件使用了 CSS3 的 transition 和 animation 屬性來(lái)完成一些特效。這些特性在 Internet Explorer 9 或以下版本中、Firefox 的老版本中沒(méi)有被支持。Opera 12 不支持 animation 屬性。

1.默認(rèn)的進(jìn)度條

2.帶顯示進(jìn)度的進(jìn)度條

3.情景進(jìn)度條

4.帶條紋的滾動(dòng)條

5.兩者結(jié)合/嵌套使用

先引入CSS文件

<link href="bootstrap.min.css" rel="stylesheet">

為了方便截圖和查看，我先加入一個(gè)style

<style>body{margin: 10px 0;}</style>

下面的代碼都放在一個(gè)容器div中

　　　 　<div class="container">...</div>

1.默認(rèn)的進(jìn)度條

假設(shè)是50%了，新建一個(gè)class為progress的div來(lái)承載進(jìn)度條

　　　　　　 <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.帶顯示進(jìn)度的進(jìn)度條

只是看圖的話，有時(shí)候很難知道準(zhǔn)確的進(jìn)度情況，我們可以把他顯示出來(lái)

添加代碼

　　　　　　　<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.情景進(jìn)度條

有時(shí)候，低于50%是一個(gè)顏色（警告），高于50%又是另外一個(gè)顏色（快成功了），是情景的

“”（還有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.帶條紋的滾動(dòng)條

有時(shí)候看上去有點(diǎn)單調(diào)，如果多個(gè)條紋就好看很多（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>

效果，這是的確滾動(dòng)起來(lái)的，如果不想動(dòng)，只是要條紋，只需要把class中active去掉就可以了

5.兩者結(jié)合/嵌套使用

添加代碼，嵌套使用就可以了

　　　　　　　<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>

效果：

或者也可以嵌套兩個(gè)默認(rèn)的樣式，同樣也是可以的

效果

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/hnnydxgjj/p/5888233.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。