Bootstrap中的条纹进度条使用案例
生活随笔
收集整理的這篇文章主要介紹了
Bootstrap中的条纹进度条使用案例
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
?創(chuàng)建一個條紋的進度條的步驟如下：
1.添加一個帶有 class .progress 和 .progress-striped 的 <div>
2.接著在上面的 <div> 內(nèi)，添加一個帶有 class .progress-bar 和 class progress-bar-* 的空的 <div>。其中，* 可以是success、info、warning、danger
3.添加一個帶有百分比表示的寬度的 style 屬性，例如 style="60%"; 表示進度條在 60% 的位置
讓我們看看下面的實例：
<!DOCTYPE?html>?? <html>?? <head>?? ???<title>Bootstrap?實例?-?條紋的進度條</title>?? ???<link?href="/bootstrap/css/bootstrap.min.css"?rel="stylesheet">?? ???<script?src="/scripts/jquery.min.js"></script>?? ???<script?src="/bootstrap/js/bootstrap.min.js"></script>?? </head>?? <body>?? ?? <div?class="progress?progress-striped">?? ???<div?class="progress-bar?progress-bar-success"?role="progressbar"??? ??????aria-valuenow="60"?aria-valuemin="0"?aria-valuemax="100"??????? ??????style="width:?90%;">?? ??????<span?class="sr-only">90%?完成（成功）</span>?? ???</div>?? </div>?? <div?class="progress?progress-striped">?? ???<div?class="progress-bar?progress-bar-info"?role="progressbar"?? ??????aria-valuenow="60"?aria-valuemin="0"?aria-valuemax="100"??????? ??????style="width:?30%;">?? ??????<span?class="sr-only">30%?完成（信息）</span>?? ???</div>?? </div>?? <div?class="progress?progress-striped">?? ???<div?class="progress-bar?progress-bar-warning"?role="progressbar"??? ??????aria-valuenow="60"?aria-valuemin="0"?aria-valuemax="100"??????? ??????style="width:?20%;">?? ??????<span?class="sr-only">20%?完成（警告）</span>?? ???</div>?? </div>?? <div?class="progress?progress-striped">?? ???<div?class="progress-bar?progress-bar-danger"?role="progressbar"??? ??????aria-valuenow="60"?aria-valuemin="0"?aria-valuemax="100"??????? ??????style="width:?10%;">?? ??????<span?class="sr-only">10%?完成（危險）</span>?? ???</div>?? </div>?? ?? </body>?? </html>??
結(jié)果如下所示：
1.添加一個帶有 class .progress 和 .progress-striped 的 <div>
2.接著在上面的 <div> 內(nèi)，添加一個帶有 class .progress-bar 和 class progress-bar-* 的空的 <div>。其中，* 可以是success、info、warning、danger
3.添加一個帶有百分比表示的寬度的 style 屬性，例如 style="60%"; 表示進度條在 60% 的位置
讓我們看看下面的實例：
結(jié)果如下所示：
總結(jié)
以上是生活随笔為你收集整理的Bootstrap中的条纹进度条使用案例的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Bootstrap中实现图片圆角效果
- 下一篇： Bootstrap插件之-按钮插件