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

Як створити панелі виконання Bootstrap 5?

12

Індикатори прогресу використовуються для демонстрації навичок, відсотка завершеності проектів та для подібних цілей. 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.
  • Крім того, ви можете додати атрибути "роль" та "арія" до індикатора виконання для цілей читання.
  • “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>

Кілька смуг прогресу виглядатимуть так:

Як створити панелі виконання Bootstrap 5?

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 і 30px:

<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
Залиште відповідь

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі