Как добавить индикатор выполнения Bootstrap на сайт Weebly?

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

Как добавить индикатор выполнения Bootstrap на Weebly?

Шаг 1. Свяжите Bootstrap CSS

Чтобы добавить индикаторы выполнения, первым делом нужно связать CSS Bootstrap с вашим сайтом Weebly. Добавьте приведенный ниже код в «Настройки> SEO> Код заголовка».

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" 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-код с изображением того, как он выглядит; щелкните здесь, чтобы просмотреть демонстрацию всех индикаторов выполнения 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 -->
Средний размер

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

<!-- 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 -->
Толстый размер

Толстые индикаторы прогресса

<!-- 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 -->
Размер по умолчанию

Полосы прогресса размера по умолчанию

<!-- 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, и вы можете добавить любой цвет, который хотите.

Цветные шкалы прогресса

Полосы помещаются в две колонки с использованием класса 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 -->
Цветные полосы с текстом на нем

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

<!-- 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 -->
Полосатые штанги

Полосатый индикатор выполнения

<!-- 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 -->
Анимированные панели

Анимированные индикаторы прогресса

<!-- 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. Следовательно, мы рекомендуем использовать коды виджетов на уровне страницы, чтобы вы могли легко проверить все элементы на этой странице.

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *