Разбавители уровня бутстрапа?

Как я могу сделать индикаторы выполнения более тонкими с помощью Bootstrap 3.0? Я думаю о том, как выглядит понравившийся на YouTube счетчик (синяя полоса). Я пробовал искать любые трюки CSS, но ничего не мог найти.

Ответ 1

Так же просто:

.progress {height: 10px;}

См.: Уменьшение высоты индикатора выполнения.

Дополнительно, если вы хотите показать текст внутри индикатора выполнения:

.progress {height: 20px;} // we increased it so the text is visible or change font size
.progress .sr-only { position: relative; }

См.: Отображение текста внутри панели выполнения.

Ответ 2

Шина права, я просто хотел бы добавить, в некоторых случаях может понадобиться добавить важную команду, чтобы внести изменения в уже установленный параметр класса "progress", например:

.progress {height: 10px !important;}

Ответ 3

Вы могли бы просто использовать:

<div class='.progress-sm'>...your code... </div>

Я считаю, что это лучшее решение, так как вы будете использовать класс начальной загрузки.