Question

我的bootstrap进度条应该以10％的增量从0％进展到100％。调整窗口大小时，栏应自动调整。例如，当条形进度和50％时，如果我调整窗口大小，它应该仍然是50％宽度。

但是我的代码表现不正常。有时会停止，我必须调整窗口大小以使条形进度达到100％。

id = bar的进度条在正文中定义。完整如下：

<!-- JUMBOTRON with Logo and Links -->
    <div class="jumbotron" style="background:url(grass.png);background-size:1000px;background-repeat:repeat-x;padding-top:10px;">
        <div class="row">
            <div class="col-sm-1">
                <img src="logo.gif" width="50px">
            </div>
            <div class="col-sm-11">
                <div class="btn-group btn-group-justified">
        <a href="#" class="btn btn-info" role="button">LINK 1</a>
        <a href="#" class="btn btn-info" role="button">LINK 2</a>
        <a href="#" class="btn btn-info" role="button">LINK 3</a>
        <a href="#" class="btn btn-info" role="button">LINK 4</a>
                </div>
            </div>
        </div>
        <p style="color:white;">THIS IS A JUMBOTRON</p>
    </div>
<!-- Main container -->
<div class="container">

    <!-- Progress Bar -->
    <p>PROGRESS</p>
    <div class="progress progress-striped active">
        <div id="bar" class="progress-bar" style="width: 0%;"></div>
    </div>

</div>

我正在使用jquery更改width属性。完整部分如下：

<meta charset="utf-8"> 
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>CLEAN</title>
        <meta name="description" content="clean-page">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
        <!-- jQuery library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <!-- Latest compiled JavaScript -->
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<script>
  var bar = $("#bar");
  var bar_width;
  var width;
  var percentage;
  var newVal;

  var progress = setInterval(function () 
  {
    bar_width = $("#bar").width();
    width = ($(window).width());
    percentage = (Math.round(((bar_width/width)*100)/10)*10);

    if (percentage >= 100) 
    {
      clearInterval(progress);
      $('.progress').removeClass('active');
      $("#bar").width("100%");
     } 
     else 
     {
       percentage = percentage + 10;
       newVal = percentage + '%';
       $("#bar").width(newVal);
      }

  $("#bar").text(percentage + "%");
  }, 100);
</script>

我刚开始使用HTML，BOOTSTRAP，JQUERY。我在这里先向您的帮助表示感谢。

Answer 1

试试此代码

<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">

当您添加aria-valuenow="60"，aria-valuemin="0"，aria-valuemax="100"时，我认为它应该正常运行。

也不要忘记添加role="progressbar"

即使在Windows上调整大小，也会进行引导进度条

1 个答案: