Определить несколько баров в Bootstrap для дневного представления

Question

Мне нужно определить горизонтальную полосу с несколькими интервалами.Я пытаюсь начать:

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

демо

Результат

Мне нужно представлять день с несколькими интервалами.Дневной бар должен иметь метку, чтобы показывать только часы.Каждый интервал должен иметь метку внутри.Просто потому, что изображение лучше тысячи слов:

Как мне достичь этой цели?Любая помощь или предложение?

Answer 1

Вы можете использовать прозрачные интервалы индикатора выполнения для «пустых» временных интервалов.Ярлыки за пределами индикатора выполнения полностью зависят от вас, поскольку Bootstrap это не то, что обеспечивает.

 <div class="progress">
        <div class="progress-bar bg-transparent" role="progressbar" style="width: 10%"></div>
        <div class="progress-bar" role="progressbar" style="width: 20%" aria-valuemin="0" aria-valuemax="100">8:30-12:00</div>
        <div class="progress-bar bg-transparent" role="progressbar" style="width: 20%"></div>
        <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuemin="0" aria-valuemax="100">15:00-18:00</div>
 </div> 

https://www.codeply.com/go/A9mNyW8geC