TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

Как создать индикатор выполнения Bootstrap 5?

213

Индикаторы выполнения используются для демонстрации навыков, процента выполнения проектов и для аналогичных целей. Bootstrap 5 имеет разные стили индикаторов выполнения, аналогичные предыдущим версиям. В этом руководстве мы подробнее рассмотрим каждый тип индикаторов выполнения, предлагаемых в Bootstrap 5.

Учебник Bootstrap 5 Progress Bars

  1. Индикаторы выполнения HTML5
  2. Индикаторы выполнения начальной загрузки CSS-классы
  3. Создание индикаторов выполнения по умолчанию
  4. Индикаторы выполнения с разными цветами фона
  5. Добавление меток в индикаторы выполнения
  6. Несколько индикаторов выполнения
  7. Полосатый стиль
  8. Анимированный полосатый стиль
  9. Регулировка высоты

Давайте подробно обсудим каждую тему.

1 Индикаторы прогресса HTML5

Помните, что в HTML5 есть тег по умолчанию для создания горизонтальных индикаторов выполнения, чего в большинстве случаев бывает достаточно. Ниже приведен блок кода индикаторов выполнения HTML5.

<progress value="50" max="100">50 %</progress><br /> <progress value="60" max="100">60 %</progress><br /> <progress value="70" max="100">70 %</progress><br /> <progress value="80" max="100">80 %</progress><br />

В браузере это будет выглядеть так:

50 %

60 %

70 %

80 %

Bootstrap не использует индикатор выполнения HTML5 и имеет собственный стиль для компонента индикатора выполнения.

2 CSS-класса, используемые в индикаторах выполнения Bootstrap

Bootstrap 4 использует следующие классы CSS для создания индикаторов выполнения:

  • Класс «.progress» используется для внешней оболочки индикатора выполнения. Он используется для хранения нескольких индикаторов выполнения внутри оболочки.
  • Класс «.progress-bar» используется для создания фактического индикатора выполнения, показывающего процент выполнения.
  • Ширина каждого индикатора выполнения должна быть явно определена с помощью дополнительных классов CSS.
  • Кроме того, вы можете добавить атрибуты «role» и «aria» к индикатору выполнения для удобства чтения.
  • «Aria-valuenow» используется для обозначения текущего значения прогресса, «aria-valuemin» – это минимальное значение, равное 0, а «aria-valuemax» – максимальное значение, равное 100.

Давайте создадим несколько примеров с использованием этих классов.

3 индикатора выполнения по умолчанию

Индикатор выполнения по умолчанию использует основной цвет для отображения прогресса и светло-серый фон. Ниже приведен код для создания пяти индикаторов выполнения с прогрессом 0, 25, 50, 75 и 100%.

<div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar w-50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div> </div>

В браузере это будет выглядеть так:

Как упоминалось выше, ширина каждого индикатора выполнения должна быть явно задана для отображения завершения. Для этой цели вы можете использовать либо встроенный стиль, либо служебные классы. Мы использовали классы полезного размера для 25%, 50% и 75% с w-25, w-50 и w-75 соответственно. Для ширины 100% мы использовали встроенный стиль с «шириной: 100%».

Также не забудьте добавить ручной разрыв строки между индикаторами выполнения, чтобы все столбцы не отображались на одной строке.

4 индикатора прогресса с фонами

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

<div class="progress"> <div class="progress-bar w-25 bg-danger" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar w-50 bg-success" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar w-75 bg-info" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar bg-warning" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="80"></div> </div> <div class="progress"> <div class="progress-bar bg-dark" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="90"></div> </div> <div class="progress"> <div class="progress-bar bg-secondary" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="60"></div> </div>

Индикаторы выполнения будут выглядеть, как показано ниже:

Как создать индикатор выполнения Bootstrap 5?

Обратите внимание, что основной цвет является значением по умолчанию, поэтому вам не нужно указывать, хотите ли вы, чтобы прогресс был основным цветом. Также вы не можете использовать светлый цвет фона, так как фон индикатора выполнения также имеет светлый цвет.

Вы можете использовать фоновые служебные классы во внешней оболочке прогресса, чтобы изменить фон индикатора выполнения. Например, приведенный ниже код создаст индикатор выполнения с красным (опасным) цветом фона вместо светло-серого.

<div class="progress bg-danger"> <div class="progress-bar w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div>

Результат будет выглядеть в браузере, как показано ниже:

Как создать индикатор выполнения Bootstrap 5?

5 индикаторов прогресса с ярлыками

Если вы хотите добавить метки на индикатор выполнения, просто добавьте текст перед закрывающим

тег каждого индикатора выполнения. Ниже приведен пример выполнения 75%:

<div class="progress"> <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75% Completed</div> </div>

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

Как создать индикатор выполнения Bootstrap 5?

6 нескольких индикаторов прогресса

Добавление нескольких индикаторов выполнения в одну внешнюю оболочку приведет к созданию всех полос в одной строке.

<div class="progress"> <div class="progress-bar bg-danger" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">40%</div> <div class="progress-bar bg-success" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20%</div> <div class="progress-bar bg-warning" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">30%</div> </div>

Несколько индикаторов выполнения будут выглядеть, как показано ниже:

7 полосатых индикаторов прогресса

Класс «.progress-bar-striped» используется для создания полосатых индикаторов выполнения (вспомогательный класс фона используется для отображения разных цветов).

<div class="progress"> <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20%</div> </div> <div class="progress"> <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">40%</div> </div> <div class="progress"> <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">60%</div> </div> <div class="progress"> <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">80%</div> </div> <div class="progress"> <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">100%</div> </div>

Полосатые индикаторы выполнения должны выглядеть так:

Как создать индикатор выполнения Bootstrap 5?

8 полосатых анимированных индикаторов прогресса

Последний вариант – анимировать полосу с помощью класса «.progress-bar-animated».

<div class="progress"> <div class="progress-bar bg-success progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%">50%</div> </div>

Это создаст анимированный индикатор выполнения с зелеными полосами. Помните, что вы можете анимировать только полосатые полосы, но не стандартные.

9 Изменение высоты или толщины индикаторов прогресса

По умолчанию индикатор выполнения будет иметь высоту 1 бэр. Вы можете изменить высоту, используя встроенный стиль в классе «.progress-bar», и внешняя оболочка будет автоматически выровнена соответствующим образом. Давайте создадим две полосы размером 0.rem и высотой 30 пикселей:

<div class="progress"> <div class="progress-bar bg-danger" role="progressbar" style="width: 50%; height: 0.5rem;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div><br> <div class="progress"> <div class="progress-bar bg-info" role="progressbar" style="width: 75%; height: 30px;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div>

Результат в браузере должен быть таким, как показано ниже:

Как создать индикатор выполнения Bootstrap 5?

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


Изучите Bootstrap 5 (индекс )


Источник записи: www.webnots.com
Leave A Reply

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. Принимаю Подробнее