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

Як додати індикатори виконання Bootstrap на сайт Weebly?

2

Фреймворк Bootstrap пропонує багато простих у використанні функцій, і індикатори прогресу є одними з них. За допомогою Bootstrap можна створити багато різних типів балів прогресу, і в цій статті ми розглянемо деякі з них за допомогою коду CSS. Ознайомтеся з повними підручниками про те, як створювати індикатори прогресу за допомогою Bootstrap 5.

Як додати індикатори просування Bootstrap на Weebly?

Крок 1 – Посилання на Bootstrap CSS

Щоб додати індикатори прогресу, першим кроком є ​​зв’язати CSS Bootstrap з вашим сайтом Weebly. Додайте код нижче у розділі «Налаштування> SEO> Код заголовка ».

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

Ви також можете зв’язати таблицю стилів на рівні сторінки, якщо хочете, щоб смуги прогресу були лише на цій сторінці.

Крок 2 – Додавання додаткового CSS для індикаторів прогресу

Додайте нижченаведений код CSS у розділі “Код заголовка" на сторінці, куди потрібно додати індикатори прогресу. Клас “.margin” використовується для створення поля розміром 10 пікселів, щоб смуги не були усіченими.

<style> .margin { margin: 10px; } .progress { background-color: #FFFFFF; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); } .progress-label { font-size: 18px; padding: 8px 0; } .progress-xxs { height: 3px; } .progress-xs { height: 8px; } .progress-sm { height: 12px; } .progress-bar-red { background: #8b2626; } .progress-bar-blue { background: #43668c; } .progress-bar-green { background: #649f2b; } .progress-bar-aqua { background: #86b998; } .progress-bar-yellow { background: #d0b426; } .progress-bar-brown { background: #6f6f55; } .progress-bar-violet { background: #8270a4; } .progress-bar-orange { background: #ae6926; } .sr-only { position: relative !important </style>

Крок 3 – Додавання HTML для панелей прогресу

Нижче наведено HTML -код разом із зображенням того, як він виглядає на веб -сайті Weebly. Стовпи можна використовувати як елемент повної ширини або як частину стовпця. Текст, відсоток та кольори можна налаштувати відповідно до ваших потреб.

Тонкі смуги прогресу

Як додати індикатори виконання Bootstrap на сайт Weebly?

<!-- Thin Size Progress Bars --> <div class="margin"> <h3 class="progress-label">Bootstrap <span class="pull-right">92%</span> </h3> <div class="progress progress-xxs"> <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="92" aria-valuemin="0" aria-valuemax="100" style="width: 92%"> </div> </div> <h3 class="progress-label">CoffeeScript <span class="pull-right">68%</span> </h3> <div class="progress progress-xxs"> <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="68" aria-valuemin="0" aria-valuemax="100" style="width: 68%"> </div> </div> <h3 class="progress-label">HTML/CSS <span class="pull-right">78%</span> </h3> <div class="progress progress-xxs"> <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100" style="width: 78%"> </div> </div> </div> <!-- End Thin Size Progress Bars -->

Середній розмір

Як додати індикатори виконання Bootstrap на сайт Weebly?

<!-- Medium Size Progress Bars --> <div class="margin"> <h3 class="progress-label">Bootstrap <span class="pull-right">92%</span> </h3> <div class="progress progress-xs"> <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="92" aria-valuemin="0" aria-valuemax="100" style="width: 92%"> </div> </div> <h3 class="progress-label">CoffeeScript <span class="pull-right">68%</span> </h3> <div class="progress progress-xs"> <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="68" aria-valuemin="0" aria-valuemax="100" style="width: 68%"> </div> </div> <h3 class="progress-label">HTML/CSS <span class="pull-right">78%</span> </h3> <div class="progress progress-xs"> <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100" style="width: 78%"> </div> </div> </div> <!-- End Medium Size Progress Bars -->

Товстий розмір

Як додати індикатори виконання Bootstrap на сайт Weebly?

<!-- Thick Size Progress Bars --> <div class="margin"> <h3 class="progress-label">Bootstrap <span class="pull-right">92%</span> </h3> <div class="progress progress-sm"> <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="92" aria-valuemin="0" aria-valuemax="100" style="width: 92%"> </div> </div> <h3 class="progress-label">CoffeeScript <span class="pull-right">68%</span> </h3> <div class="progress progress-sm"> <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="68" aria-valuemin="0" aria-valuemax="100" style="width: 68%"> </div> </div> <h3 class="progress-label">HTML/CSS <span class="pull-right">78%</span> </h3> <div class="progress progress-sm"> <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100" style="width: 78%"> </div> </div> </div> <!-- End Thick Size Progress Bars -->

Розмір за замовчуванням

Як додати індикатори виконання Bootstrap на сайт Weebly?

<!-- Default Size Progress Bars --> <div class="margin"> <h3 class="progress-label">Bootstrap <span class="pull-right">92%</span> </h3> <div class="progress"> <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="92" aria-valuemin="0" aria-valuemax="100" style="width: 92%"> </div> </div> <h3 class="progress-label">CoffeeScript <span class="pull-right">68%</span> </h3> <div class="progress"> <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="68" aria-valuemin="0" aria-valuemax="100" style="width: 68%"> </div> </div> <h3 class="progress-label">HTML/CSS <span class="pull-right">78%</span> </h3> <div class="progress"> <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100" style="width: 78%"> </div> </div> </div> <!-- End Default Size Progress Bars -->

Кольорові смужки

Кольори визначаються в додатковому CSS на кроці 2, і ви можете додати будь -який колір, який вам потрібен.

Як додати індикатори виконання Bootstrap на сайт Weebly?

Стовпи розміщені у двох стовпцях за допомогою класу “col-md-6”. Ви можете видалити цей клас, щоб зробити стовпці на всю ширину.

<div class="col-md-6"> <!-- Red --> <h3 class="progress-label">Red <span class="pull-right">92%</span> </h3> <div class="progress progress-sm"> <div class="progress-bar progress-bar-red" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%"> </div> </div> <!-- End Red --> <!-- Blue --> <h3 class="progress-label">Blue <span class="pull-right">68%</span> </h3> <div class="progress progress-sm"> <div class="progress-bar progress-bar-blue" role="progressbar" aria-valuenow="82" aria-valuemin="0" aria-valuemax="100" style="width: 82%"> </div> </div> <!-- End Blue --> <!-- Green --> <h3 class="progress-label">Green <span class="pull-right">78%</span> </h3> <div class="progress progress-sm"> <div class="progress-bar progress-bar-green" role="progressbar" aria-valuenow="74" aria-valuemin="0" aria-valuemax="100" style="width: 74%"> </div> </div> <!-- End Green --> <!-- Aqua --> <h3 class="progress-label">Aqua <span class="pull-right">78%</span> </h3> <div class="progress progress-sm"> <div class="progress-bar progress-bar-aqua" role="progressbar" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100" style="width: 78%"> </div> </div> <!-- End Aqua --> </div> <div class="col-md-6"> <!-- Yellow --> <h3 class="progress-label">Yellow <span class="pull-right">92%</span> </h3> <div class="progress progress-sm"> <div class="progress-bar progress-bar-yellow" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%"> </div> </div> <!-- End Yellow --> <!-- Brown --> <h3 class="progress-label">Brown <span class="pull-right">68%</span> </h3> <div class="progress progress-sm"> <div class="progress-bar progress-bar-brown" role="progressbar" aria-valuenow="82" aria-valuemin="0" aria-valuemax="100" style="width: 82%"> </div> </div> <!-- End Brown --> <!-- Violet --> <h3 class="progress-label">Violet <span class="pull-right">78%</span> </h3> <div class="progress progress-sm"> <div class="progress-bar progress-bar-violet" role="progressbar" aria-valuenow="74" aria-valuemin="0" aria-valuemax="100" style="width: 74%"> </div> </div> <!-- End Violet --> <!-- Orange --> <h3 class="progress-label">Orange <span class="pull-right">78%</span> </h3> <div class="progress progress-sm"> <div class="progress-bar progress-bar-orange" role="progressbar" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100" style="width: 78%"> </div> </div> <!-- End Orange --> </div> <!-- End Colored Progress Bars -->

Кольорові смужки з текстом

Як додати індикатори виконання Bootstrap на сайт Weebly?

<!-- Colored Progress Bars with Text --> <div class="margin"> <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% Complete (Sucess)</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: 70%;"> <span class="sr-only">70% Complete (info)</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: 60%;"> <span class="sr-only">60%Complete (warning)</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: 50%;"> <span class="sr-only">50% Complete (danger)</span> </div> </div> </div> <!-- End Colored Progress Bars with Text -->

Смугасті бруски

Як додати індикатори виконання Bootstrap на сайт Weebly?

<!-- Striped Progress Bars --> <div class="margin"> <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% Complete (Sucess)</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: 80%;"> <span class="sr-only">80% Complete (info)</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: 60%;"> <span class="sr-only">60%Complete (warning)</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: 50%;"> <span class="sr-only">50% Complete (danger)</span> </div> </div> </div> <!-- End Striped Progress Bars -->

Анімовані бари

Як додати індикатори виконання Bootstrap на сайт Weebly?

<!-- Animated Progress Bars --> <div class="margin"> <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: 90%;"> <span class="sr-only">90% Complete (Sucess)</span> </div> </div> <div class="progress progress-striped active"> <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 50%;"> <span class="sr-only">50% Complete (info)</span> </div> </div> <div class="progress progress-striped active"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"> <span class="sr-only">80%Complete (warning)</span> </div> </div> <div class="progress progress-striped active"> <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 70%;"> <span class="sr-only">70% Complete (danger)</span> </div> </div> </div> <!-- End Animated Progress Bars -->

Примітка: Оскільки Bootstrap є фреймворком, він може конфліктувати з іншими стилями на веб -сайті Weebly. Тому ми рекомендуємо використовувати коди віджетів на рівні сторінки, щоб ви могли легко перевірити всі елементи на цій сторінці.

Джерело запису: webnots.com
Залиште відповідь

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