Public/lib/Juece/bootstrap-3.3.7/docs/_includes/components/progress-bars.html

（开头部分） 10KB

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

<div class="bs-docs-section">
  <h1 id="progress" class="page-header">Progress bars</h1>

  <p class="lead">Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.</p>

  <div class="bs-callout bs-callout-danger" id="callout-progress-animation-css3">
    <h4>Cross-browser compatibility</h4>
    <p>Progress bars use CSS3 transitions and animations to achieve some of their effects. These features are not supported in Internet Explorer 9 and below or older versions of Firefox. Opera 12 does not support animations.</p>
  </div>

  <div class="bs-callout bs-callout-info">
    <h4 id="callout-progress-csp">Content Security Policy (CSP) compatibility</h4>
    <p>If your website has a <a href="https://developer.mozilla.org/en-US/docs/Web/Security/CSP">Content Security Policy (CSP)</a> which doesn't allow <code>style-src 'unsafe-inline'</code>, then you won't be able to use inline <code>style</code> attributes to set progress bar widths as shown in our examples below. Alternative methods for setting the widths that are compatible with strict CSPs include using a little custom JavaScript (that sets <code>element.style.width</code>) or using custom CSS classes.</p>
  </div>

  <h2 id="progress-basic">Basic example</h2>
  <p>Default progress bar.</p>
  <div class="bs-example" data-example-id="simple-progress-bar">
    <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
        <span class="sr-only">60% Complete</span>
      </div>
    </div>
  </div>
{% highlight html %}
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>
{% endhighlight %}

  <h2 id="progress-label">With label</h2>
  <p>Remove the <code>&lt;span&gt;</code> with <code>.sr-only</code> class from within the progress bar to show a visible percentage.</p>
  <div class="bs-example" data-example-id="progress-bar-with-label">
    <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
        60%
      </div>
    </div>
  </div>
{% highlight html %}
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>
{% endhighlight %}
  <p>To ensure that the label text remains legible even for low percentages, consider adding a <code>min-width</code> to the progress bar.</p>
  <div class="bs-example" data-example-id="progress-bar-at-low-percentage">
    <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
        0%
      </div>
    </div>
    <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
        2%
      </div>
    </div>
后面还有 154 行代码，解锁后查看完整代码

24 小时内免费解锁 3 个项目，之后 1 积分/个。 规则说明

AI 解读

登录后可用，每次 10 积分，解读结果公开显示在下面。

还没有人解读过这个文件。