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

但是，如果您想非常努力地使用引导组件，我这里有一个丑陋的解决方法。