bootstrap 进度条的百分比

Question

我有一个每个季度都想达到的销售目标，比如说 100。

我的进度条应该显示本季度到目前为止我的销售进度。

如果我落后了

超速

问题来了，我想不出一种方法来将红色标记显示为绿色条的准确百分比，因为它是百分之一的百分比。 Bootstrap 似乎只允许我堆叠进度条，但我只想将该进度条的百分比显示为红色或蓝色。

Answer 1

Bootstrap 堆叠式进度条可能会拯救你，查看：Stacked progress bar

Answer 2

你可以使用一个box-shadow:inset在右侧创建一个内边框-进度条内（你可以使用js来确定所需的颜色和大小) 而不改变钢筋的整体外部尺寸。我使用了一个 35% 宽度的进度条和一个 -13 像素和红色的框阴影。这些可以根据您的销售数据进行计算并相应地进行修改。

为此请注意 - 我为 css 规则使用了内联样式 - 我通常会把它拉出来并放在外部 CSS，但我这样做是为了这个例子。

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="progress">
   <div class="progress-bar progress-bar-success" style="width: 35%;  box-shadow:inset -13px 0px 0px red;">
  <span class="sr-only">35% Complete (success)</span>
   </div>
  </div>

bootstrap 进度条的百分比

Percent of a bootstrap progress bar

javascript

twitter-bootstrap

progress-bar