自定义进度条bootsrap。填写点

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>