Последние учебники веб-разработки
 

Bootstrap Progress Bars

❮ Предыдущая Следующая Глава ❯

Базовый индикатор прогресса

Индикатор хода выполнения может быть использован, чтобы показать пользователю, как далеко он / она находится в процессе.

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

Строка прогресса по умолчанию в Bootstrap выглядит следующим образом :

70% Complete

Чтобы создать строку прогресса по умолчанию, добавьте .progress класс к <div> элемент:

пример

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="70"
  aria-valuemin="0" aria-valuemax="100" style="width:70%">
    <span class="sr-only">70% Complete</span>
  </div>
</div>
Попробуй сам "

Примечание: бары Прогресс не поддерживаются в Internet Explorer 9 и более ранних версий (потому что они используют CSS3 переходов и анимации для достижения некоторых их последствий).

Примечание: Для того, чтобы помочь улучшить доступность для людей , использующих программы чтения с экрана, вы должны включать в себя aria-* атрибуты.

Прогресс бар с ярлыком

Строка прогресса с этикеткой выглядит следующим образом:

70%

Удалите .sr-only класс от индикатору выполнения , чтобы показать видимый процент:

пример

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="70"
  aria-valuemin="0" aria-valuemax="100" style="width:70%">
    70%
  </div>
</div>
Попробуй сам "

Бары Цветные Прогресс

Контекстные классы используются для обеспечения "смысл через цветов".

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

  • .progress-bar-success
  • .progress-bar-info
  • .progress-bar-warning
  • .progress-bar-danger
40% Complete (успех)
50% Complete (данные)
60% Complete (предупреждение)
70% Complete (опасность)

В следующем примере показано, как создать прогресс бары с различными контекстными классами:

пример

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
  aria-valuemin="0" aria-valuemax="100" style="width:40%">
    40% Complete (success)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50"
  aria-valuemin="0" aria-valuemax="100" style="width:50%">
    50% Complete (info)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60"
  aria-valuemin="0" aria-valuemax="100" style="width:60%">
    60% Complete (warning)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70"
  aria-valuemin="0" aria-valuemax="100" style="width:70%">
    70% Complete (danger)
  </div>
</div>
Попробуй сам "

Бары Полосатый Прогресс

бары Прогресс также может быть полосатым:

40% Complete (успех)
50% Complete (данные)
60% Complete (предупреждение)
70% Complete (опасность)

Добавить класс .progress-bar-striped , чтобы добавить полосы к барам прогресса:

пример

<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar"
  aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
    40% Complete (success)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar"
  aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%">
    50% Complete (info)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar"
  aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%">
    60% Complete (warning)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar"
  aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
    70% Complete (danger)
  </div>
</div>
Попробуй сам "

Анимированные Бар Прогресс

Вот "animated" прогресс бар:

40%

Добавьте класс .active анимации прогресс бар:

пример

<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar"
  aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
    40%
  </div>
</div>
Попробуй сам "

Уложив Барс Прогресс

бары Прогресс также могут быть уложены:

Свободное место
Предупреждение
Опасность

Создайте пакетный прогресс бар, разместив несколько баров в то же <div class="progress"> :

пример

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" style="width:40%">
    Free Space
  </div>
  <div class="progress-bar progress-bar-warning" role="progressbar" style="width:10%">
    Warning
  </div>
  <div class="progress-bar progress-bar-danger" role="progressbar" style="width:20%">
    Danger
  </div>
</div>
Попробуй сам "

Проверьте себя с упражнениями!

Упражнение 1 » Упражнение 2» Упражнение 3 » Упражнение 4»


❮ Предыдущая Следующая Глава ❯