zoukankan      html  css  js  c++  java
  • Bootstrap 进度条

    Bootstrap 进度条

    1、基础进度条

    <div class="progress">
        <div class="progress-bar"  style=" 40%;">
        </div>
    </div>

      1)根div必须 class="progress"

      2)前景div为 class="progress-bar", 通过style指定宽度

      

    2、指定颜色.

      progress-bar-success、progress-bar-info、progress-bar-warning、progress-bar-danger

    <div class="progress">
        <div class="progress-bar progress-bar-success"style=" 90%;">
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-info" style=" 30%;">
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-warning" style=" 20%;">
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-danger" style=" 10%;">
        </div>
    </div>

      

    3、条纹状,通过在根div添加 progress-striped 即可

      

    <div class="progress progress-striped">
        <div class="progress-bar progress-bar-success" style=" 90%;">
        </div>
    </div>

    4、在根div 添加active,即可实现带动画的进度条。

      

    <div class="progress progress-striped active">
        <div class="progress-bar progress-bar-success" 
             style=" 40%;">
        </div>
    </div>

    参考:http://www.runoob.com/bootstrap/bootstrap-progress-bars.html

  • 相关阅读:
    CodeForces
    hdu4003 树形dp
    hdu2196
    poj2486
    hdu1502 树形dp入门题
    cf 686D
    bzoj2763 分层图
    hdu4424 并查集+贪心+思维
    poj1734 最小环+输出路径
    集训题解1
  • 原文地址:https://www.cnblogs.com/tekkaman/p/6929114.html
Copyright © 2011-2022 走看看