Bootstrap 3中的分段进度条

Question

我有一个用户需要输入数据的网页。 一旦他们输入10个项目，他们就可以继续。

我正在尝试创建一个进度条，以直观地表示他们输入/已经输入的项目数量。

这是我正在尝试创建的图像

到目前为止，我最接近的是使用Bootstrap的堆叠进度条。 但是，对于堆叠条， 未填充的区域是单个不间断区域 - 它不显示剩余的区段数。 这是一个显示我的意思的小提琴。

这是小提琴的标记：

<div class="container">
    <div class="progress progress-bar-segmented">
        <div class="progress-bar" style="width: 10%"></div>
        <div class="progress-bar" style="width: 10%"></div>
        <div class="progress-bar" style="width: 10%"></div>
    </div>
</div>

我搜索过类似的例子，可以根据我的需要进行调整，但运气不好。 我也不确定我应该搜索什么或者称之为什么。 也许这会被认为是一个逐步进步的酒吧？

任何提出解决方案的帮助都将不胜感激。

Answer 1

在您的情况下，因为您不希望项目内的区域按百分比填充，我建议您只是并排创建十个空div，并添加类以填充项目时填充颜色。

只需点击下面的运行代码段 ，看看我的意思。

 .container { width: 100%; } .item { width: 10%; border: 1px solid grey; background-color: lightgray; border-radius: 3px; margin-right: 2px; float: left; display: block; height: 20px; } .filled { background-color: blue !important; } 

 <div class="container"> <div class="item filled"></div> <div class="item filled"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> 

仅当您需要以百分比填充div时才使用该引导程序组件。 对于样式，您可以从引导程序导入样式。

但是 ，如果你想要很难使用bootstrap组件 ，我在这里有一个丑陋的解决方法。