Skip to main content

Компоненты

Более десятка повторно используемых компонентов построены так, чтобы обеспечить кнопки, выпадающие меню, группы ввода, навигации, оповещения, и многое другое.

Прогрессбар

Стилизация в HTML5 <progress> элемент с несколько дополнительными классами и несколько хитрых CSS конкретного браузера. Будьте уверены, чтобы прочти о поддержке браузеров.

Содержание

Пример

Чтобы надпись прогресс бар, просто добавьте <div> с вашим текстом заголовка, выровнять текст, используя служебный класс, и связать Заголовок с <progress> элементом используя aria-describedby атрибут.

Reticulating splines… 0%
Reticulating splines… 25%
Reticulating splines… 50%
Reticulating splines… 75%
Reticulating splines… 100%
<div class="text-xs-center" id="example-caption-1">Reticulating splines&hellip; 0%</div>
<progress class="progress" value="0" max="100" aria-describedby="example-caption-1"></progress>

<div class="text-xs-center" id="example-caption-2">Reticulating splines&hellip; 25%</div>
<progress class="progress" value="25" max="100" aria-describedby="example-caption-2"></progress>

<div class="text-xs-center" id="example-caption-3">Reticulating splines&hellip; 50%</div>
<progress class="progress" value="50" max="100" aria-describedby="example-caption-3"></progress>

<div class="text-xs-center" id="example-caption-4">Reticulating splines&hellip; 75%</div>
<progress class="progress" value="75" max="100" aria-describedby="example-caption-4"></progress>

<div class="text-xs-center" id="example-caption-5">Reticulating splines&hellip; 100%</div>
<progress class="progress" value="100" max="100" aria-describedby="example-caption-5"></progress>

Поддержки IE9

Internet Explorer 9 не поддерживает HTML5 в <progress> элемента, но мы можем работать вокруг этого.

Reticulating splines… 25%
<div class="text-xs-center" id="example-caption-6">Reticulating splines&hellip; 25%</div>
<progress class="progress" value="25" max="100" aria-describedby="example-caption-6">
  <div class="progress">
    <span class="progress-bar" style="width: 25%;"></span>
  </div>
</progress>

Контекстные альтернативы

Индикатор выполнения в различных вариантах использует некоторые одинаковые кнопки и классы замечаний для согласования стилей.

<progress class="progress progress-success" value="25" max="100"></progress>
<progress class="progress progress-info" value="50" max="100"></progress>
<progress class="progress progress-warning" value="75" max="100"></progress>
<progress class="progress progress-danger" value="100" max="100"></progress>

Полосатый индикатор

Использует градиент, чтобы создать полосатый эффект.

<progress class="progress progress-striped" value="10" max="100"></progress>
<progress class="progress progress-striped progress-success" value="25" max="100"></progress>
<progress class="progress progress-striped progress-info" value="50" max="100"></progress>
<progress class="progress progress-striped progress-warning" value="75" max="100"></progress>
<progress class="progress progress-striped progress-danger" value="100" max="100"></progress>

Анимированные полосы

Полосатый градиент также может быть анимированным. Добавить .progress-animated для .progress анимировать полосы справа налево с помощью CSS3 анимации.

Анимированный прогресс-бар не работает в IE9 и Opera 12 – так как они не поддерживают CSS3 анимации – ни в ie10+ и Microsoft Edge – так как они в настоящее время не поддерживают CSS3 анимации на ::-ms-fill псевдо-элемент.

<progress class="progress progress-striped progress-animated" value="25" max="100"></progress>