Pasek segmentów postępu w Bootstrap 3

Question

Mam stronę, na której użytkownik musi wprowadzić dane. Po wprowadzeniu 10 elementów mogą kontynuować.

Próbuję utworzyć pasek postępu, aby wizualnie przedstawić liczbę elementów, które wprowadzono/pozostawiono do wprowadzenia.

Oto obraz tego, co staram się tworzyć

Dotychczas najbliżej stałam korzysta ułożone paski postępu w Bootstrap. Jednak z ułożonymi w stos prętami, , niewypełniona sekcja jest pojedynczym nieprzerwanym regionem - nie pokazuje liczby pozostałych segmentów. Here's a fiddle showing what I mean.

Oto markup z skrzypce:

<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> 

Rozglądałem podobnych przykładów, które mogą być dostosowane do moich potrzeb, ale nie mieli dużo szczęścia. Nie jestem też pewien, czego dokładnie powinienem szukać i jak to nazwać. Może byłby to uważany za krokowy pasek postępu?

Każda pomoc w znalezieniu rozwiązania byłaby bardzo doceniana.

Answer 1

W twoim przypadku, ponieważ nie chcesz, aby obszar wewnątrz przedmiotów był wypełniany w procentach, polecam utworzenie dziesięciu pustych elementów div obok siebie i dodanie klas, aby wypełnić je kolorem, gdy elementy są wypełnione .

Po prostu kliknij poniżej, aby uzyskać opis . Ukończ poniżej fragment kodu kodu i zobacz, co mam na myśli.

.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>

Używaj bootstrap komponent tylko wtedy, gdy trzeba wypełnić div w procentowy części. Jeśli chodzi o style, możesz importować style z bootstrap.

ALE, jeśli chcesz bardzo trudno używać składnika bootstrap, mam brzydką obejście here.