Bootstrap 3中的分段进度条

Question

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

我试图创建一个进度条，直观地显示他们输入/已经输入的项目数。

以下是我尝试制作

的图片

到目前为止，我最接近的是使用Bootstrap的堆叠进度条。但是，对于堆叠条，未填充区域是单个不间断区域 - 它不会显示剩余的区段数。 Here's a fiddle showing what I mean.

这里是小提琴的标记：

<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导入样式。

但是，如果您非常难以使用引导组件，我有一个丑陋的解决方法here。