0

我用Bootstrap设计了一个进度条,但我无法自定义进度条。自定义进度条bootsrap。填充点

代码

<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> 

如何使用点自定义进度条引导喜欢这幅画

image

回答

0

您可以使用图标和他们的进度条上的位置,无论你想。

.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>