Question

我是Bootstrap的新手。我下载了两个与简历相关的主题。一个主题有进度条和另一个主题。所以我从这里复制了代码并粘贴到另一个索引文件中。出现进度条但它是空的并且没有动画。请帮帮我，我被卡住了。我也复制并粘贴了CSS代码。下面是我复制并粘贴到其他主题的代码：

<!-- Skills Section -->
<section id="skills" class="skills-section section-padding">
  <div class="container">
    <h2 class="section-title wow fadeInUp">Skills</h2>

    <div class="row">
      <div class="col-md-6">
        <div class="skill-progress">
          <div class="skill-title"><h3>UX Design</h3></div> 
          <div class="progress">
            <div class="progress-bar six-sec-ease-in-out" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" ><span>95%</span>
            </div>
          </div><!-- /.progress -->
        </div><!-- /.skill-progress -->
        <div class="skill-progress">
          <div class="skill-title"><h3>Visual Design</h3></div> 
          <div class="progress">
            <div class="progress-bar six-sec-ease-in-out" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" ><span>80%</span>
            </div>
          </div><!-- /.progress -->
        </div><!-- /.skill-progress -->
        <div class="skill-progress">
          <div class="skill-title"><h3>Business Design</h3></div>  
          <div class="progress">
            <div class="progress-bar six-sec-ease-in-out" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" ><span>75%</span>
            </div>
          </div><!-- /.progress -->
        </div><!-- /.skill-progress -->
      </div><!-- /.col-md-6 -->

      <div class="col-md-6">
        <div class="skill-progress">
          <div class="skill-title"><h3>Branding Design</h3></div> 
          <div class="progress">
            <div class="progress-bar six-sec-ease-in-out" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" ><span>95%</span>
            </div>
          </div><!-- /.progress -->
        </div><!-- /.skill-progress -->
        <div class="skill-progress">
          <div class="skill-title"><h3>Motion Graphic</h3></div> 
          <div class="progress">
            <div class="progress-bar six-sec-ease-in-out" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" ><span>80%</span>
            </div>
          </div><!-- /.progress -->
        </div><!-- /.skill-progress -->
        <div class="skill-progress">
          <div class="skill-title"><h3>Flyers Designing</h3></div>  
          <div class="progress">
            <div class="progress-bar six-sec-ease-in-out" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" ><span>75%</span>
            </div>
          </div><!-- /.progress -->
        </div><!-- /.skill-progress -->
      </div><!-- /.col-md-6 -->
    </div><!-- /.row -->

    <div class="skill-chart text-center">
      <h3>More skills</h3>
    </div>

    <div class="row more-skill text-center">
      <div class="col-xs-12 col-sm-4 col-md-2">
          <div class="chart" data-percent="91" data-color="e74c3c">
                <span class="percent"></span>
                <div class="chart-text">
                  <span>leadership</span>
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-4 col-md-2">
          <div class="chart" data-percent="23" data-color="2ecc71">
                <span class="percent"></span>
                <div class="chart-text">
                  <span>Creativity</span>
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-4 col-md-2">
          <div class="chart" data-percent="68" data-color="3498db">
                <span class="percent"></span>
                <div class="chart-text">
                  <span>Management</span>
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-4 col-md-2">
          <div class="chart" data-percent="68" data-color="3498db">
                <span class="percent"></span>
                <div class="chart-text">
                  <span>Branding</span>
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-4 col-md-2">
          <div class="chart" data-percent="68" data-color="3498db">
                <span class="percent"></span>
                <div class="chart-text">
                  <span>Marketing</span>
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-4 col-md-2">
          <div class="chart" data-percent="68" data-color="3498db">
                <span class="percent"></span>
                <div class="chart-text">
                  <span>Motivation</span>
                </div>
            </div>
        </div>
    </div>

  </div><!-- /.container -->
</section><!-- End Skills Section -->

Answer 1

动画（线路的增长，至少在bootstrap 3中，就像这样：

$(function() {
  $('.progress-bar').each(function() { // loops through all bars
    var percent_fill = $(this).attr('aria-valuenow') + '%'; // grabs the % from your html aria-valuenow attribute.               
    $(this).animate({ width: percent_fill }, { duration: 2000 }); //animates. Here is where you could pass additional easing function if desired with the help of jquery ui
  });
});

现在我们缩小了Bootstrap 3，你需要遍历进度条并将值分配给每个，而不是我硬编码的80％。如果上面的代码有效，你需要jQuery。如果你想使用花哨的缓动/动画功能，你可能也需要jQuery UI。但你现在不行。

我修改了上面的剪辑器来处理你的例子。

进度条不动画或显示

1 个答案: