Bootstrap 3 中的分段进度条

Question

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

我正在尝试创建一个进度条，以直观地表示他们还有多少项目 entered/have 需要输入。

这是我要创建的图像

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

这是来自 fiddle 的标记：

<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 组件。至于样式，您可以从 bootstrap.

导入样式

但是，如果你非常想使用bootstrap组件，我有一个丑陋的解决方法here.

Bootstrap 3 中的分段进度条

Segmented Progress Bar in Bootstrap 3

html

css

twitter-bootstrap

twitter-bootstrap-3

progress-bar