twitter-bootstrap - 自定义进度条引导程序。用点填充

Question

我用 Bootstrap 设计了一个进度条，但是我无法自定义进度条。

编码

<div class="progress">
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="30" aria-valuemin="60" aria-valuemax="60" style="width:60%">
        60%
    </div>
</div>
</div>

如何在 Bootstrap 中自定义进度条，如图所示

Answer 1

您可以使用图标并将它们放置在进度条上的任何位置。

.fa-circle{
  position:relative;
  right:50px;
  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
        
<div class="progress">
<span><i class="fa fa-circle"></i></span>
                  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="30"
                  aria-valuemin="60" aria-valuemax="60" style="width:60%">
                    60% 
                  </div>
                </div>
                </div>