Bootstrap Прогресс-бары
В этой главе будут объяснены прогресс-бары Bootstrap. В этом руководстве вы увидите, как использовать Bootstrap для создания прогресс-баров для загрузки, перенаправления или состояний действий.
Прогресс-бары Bootstrap используют переходы и анимации CSS3 для достижения этого эффекта. Internet Explorer 9 и более ранние версии, а также старые версии Firefox не поддерживают эту функцию; Opera 12 не поддерживает анимацию.
Прогресс-бар по умолчанию
Выполните следующие шаги, чтобы создать базовый прогресс-бар:
- Добавьте <div> с классом.progressк <div>.
- Затем внутри вышеуказанного <div> добавьте <div> с классом.progress-barк пустому <div>.
- Добавьте атрибут style с шириной, выраженной в процентах, например style="60%"; указывает, что прогресс-бар находится на позиции 60%.
Давайте посмотрим на следующий пример:.sr-onlyЭтот класс может скрыть текстовое содержимое:
Пример
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60"
aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
<span class="sr-only">40% завершено</span>
</div>
</div>
Попробуйте сами »
Результат показан ниже:
Вы также можете задать текстовое содержимое в индикаторе выполнения:
Пример
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
70%
</div>
</div>
Попробуйте сами »
Результат показан ниже:
Альтернативные индикаторы выполнения
Выполните следующие шаги, чтобы создать индикаторы выполнения с различными стилями:
- Добавьте <div> с классом.progressк <div>.
- Далее, внутри указанного выше <div>, добавьте <div> с классом.progress-barи классомprogress-bar-*в пустой <div>. Где * может бытьsuccess、info、warning、danger。
- Добавьте атрибут style с шириной, выраженной в процентах, например style="60%"; указывает, что прогресс-бар находится на позиции 60%.
Давайте рассмотрим следующий пример:
Пример
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 90%;">
<span class="sr-only">90% завершено (успех)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 30%;">
<span class="sr-only">30% завершено (информация)</span>
</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: 20%;">
<span class="sr-only">20% завершено (предупреждение)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 10%;">
<span class="sr-only">10% завершено (опасность)</span>
</div>
</div>
Попробуйте сами »
Результат показан ниже:
Отобразить текстовое содержимое индикатора выполнения:
Пример
<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% завершено (успех)
</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% завершено (информация)
</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% завершено (предупреждение)
</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% завершено (опасность)
</div>
</div>
Попробуйте сами »
Результат показан ниже:
Полосатые индикаторы выполнения
Чтобы создать полосатый индикатор выполнения, выполните следующие шаги:
- Добавьте <div> с классами.progressи.progress-stripedк <div>.
- Далее, внутри указанного выше <div>, добавьте <div> с классом.progress-barи классомprogress-bar-*в пустой <div>. Где * может бытьsuccess、info、warning、danger。
- Добавьте атрибут style с шириной, выраженной в процентах, например style="60%"; указывает, что прогресс-бар находится на позиции 60%.
Давайте рассмотрим следующий пример:
Пример
<div class="progress progress-striped">
<div class="progress-bar progress-bar-success" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 90%;">
<span class="sr-only">90% завершено (успех)</span>
</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-info" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 30%;">
<span class="sr-only">30% завершено (информация)</span>
</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-warning" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 20%;">
<span class="sr-only">20% завершено (предупреждение)</span>
</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-danger" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 10%;">
<span class="sr-only">10% завершено (опасность)</span>
</div>
</div>
Попробуйте сами »
Результат показан ниже:
Анимированные индикаторы выполнения
Выполните следующие шаги, чтобы создать анимированный индикатор выполнения:
- Добавьте <div> с классом.progressи.progress-stripedк <div>. Также добавьте класс.active。
- Затем внутри вышеуказанного <div> добавьте <div> с классом.progress-barк пустому <div>.
- Добавьте атрибут style с шириной, выраженной в процентах, например style="60%"; указывает, что прогресс-бар находится на позиции 60%.
Это придаст полосам эффект движения справа налево.
Давайте посмотрим на пример ниже:
Пример
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-success" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 40%;">
<span class="sr-only">40% завершено</span>
</div>
</div>
Попробуйте сами »
Результат следующий:
Составные индикаторы выполнения
Вы даже можете разместить несколько индикаторов выполнения друг над другом. Поместите несколько индикаторов выполнения в один и тот же.progress, чтобы добиться наложения, как показано в примере ниже:
Пример
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 40%;">
<span class="sr-only">40% завершено</span>
</div>
<div class="progress-bar progress-bar-info" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 30%;">
<span class="sr-only">30% выполнено (информация)</span>
</div>
<div class="progress-bar progress-bar-warning" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 20%;">
<span class="sr-only">20% завершено (предупреждение)</span>
</div>
</div>
Попробуйте сами »
Результат следующий:
Размеры индикатора выполнения
Мы можем задать размер индикатора выполнения с помощью атрибута height:
Пример
<div class="progress" style="height: 1px;">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress" style="height: 20px;">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Попробуйте сами »
Результат следующий:
