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

    写在前面:

      bootstrap进度条的样式还是很好看的,直接拿demo来用就可以。

      下面看个简单的例子的代码吧

    <div id="myProgress" class="progress" style=" 500px">
        <div id="probar" class="progress-bar progress-bar-grey"  role="progressbar" aria-valuenow="40"
             aria-valuemin="0" aria-valuemax="100" style=" 10%;">
        </div>
    </div>

      效果图显示:

      

      由于bootstrap进度条控制其进度是靠width的,故我们只需要动态改变它的width就可以了。如果使用jquery来改变则通过改变css的属性就可以了

    $("#probar").css("width","60%")

      如果要想在进度条上显示数字,则设置宽度的同时,并设置下text就可以了

    $("#probar").css("width","60%").text("60%");

      通过点击按钮,改变进度条的进度并显示文字的效果的效果图

  • 相关阅读:
    053705
    053704
    053703
    053702
    053701
    053700
    053699
    053698
    053697
    HDU 3746 Cyclic Nacklace
  • 原文地址:https://www.cnblogs.com/eleven258/p/9570334.html
Copyright © 2011-2022 走看看