Bootstrap - индикаторы выполнения: Полное руководство для начинающих

Здравствуйте, будущие веб-разработчики! Сегодня мы окунемся в чудесный мир индикаторов выполнения в Bootstrap. Как ваш добрый сосед-компьютерный учитель, я здесь, чтобы провести вас через это захватывающее путешествие. Так что возьмите себе чашечку кофе (или чая, если это ваше дело), и начнем!

Что такое индикаторы выполнения?

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

В мире веб-дизайна индикаторы выполнения incredibly полезны для:

• Отображения статуса загрузки
• Показа completion многошаговых форм
• Указания уровней навыков или оценок
• И многое другое!

Теперь, давайте натянем рукава и начнем кодить!

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

Давайте начнем с simplest формы индикатора выполнения в Bootstrap. Вот как он выглядит:

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

Что здесь происходит? Давайте разберем это:

1. У нас есть внешний <div> с классом progress. Это создает контейнер для нашего индикатора выполнения.
2. Внутри, у нас есть другой <div> с классом progress-bar. Это сам индикатор, который будет заполняться.
3. Мы устанавливаем width на 25% с помощью инлайнового CSS. Это определяет, насколько заполнен индикатор.
4. Атрибуты aria-* предназначены для доступности, помогая экранным readers понять статус индикатора.

Установка размера индикатора

Теперь давайте поговорим о том, как устанавливать размер индикаторов выполнения. Bootstrap предоставляет нам два основных способа управления размером: ширина и высота.

Ширина

Ширина индикатора выполнения представляет собой степень завершенности процесса. Мы можем устанавливать это с помощью процентов:

<div class="progress">
<div class="progress-bar" style="width: 0%"></div>
</div>
<div class="progress">
<div class="progress-bar" style="width: 25%"></div>
</div>
<div class="progress">
<div class="progress-bar" style="width: 50%"></div>
</div>
<div class="progress">
<div class="progress-bar" style="width: 75%"></div>
</div>
<div class="progress">
<div class="progress-bar" style="width: 100%"></div>
</div>

Этот код создаст пять индикаторов выполнения, каждый из которых заполнен до разного уровня. Это как если бы мы наполняли пять стаканов воды до разных уровней!

Высота

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

<div class="progress" style="height: 1px;">
<div class="progress-bar" style="width: 50%;"></div>
</div>
<div class="progress" style="height: 20px;">
<div class="progress-bar" style="width: 50%;"></div>
</div>

Здесь мы создаем два индикатора выполнения: один super slim (1px) и один extra thick (20px). Это как если бы мы сравнивали кусочек спагетти с толстым ломтем торта!

Метки

Иногда полезно добавить текст внутрь наших индикаторов выполнения. Вот как это делается:

<div class="progress">
<div class="progress-bar" style="width: 25%;">25%</div>
</div>

Просто, правда? Просто добавьте текст внутрь progress-bar div. Это как если бы вы писали на самом индикаторе!

Фон

Хотите сделать ваши индикаторы выполнения более яркими? Bootstrap предоставляет нам несколько предопределенных классов цветов:

<div class="progress">
<div class="progress-bar bg-success" style="width: 25%"></div>
</div>
<div class="progress">
<div class="progress-bar bg-info" style="width: 50%"></div>
</div>
<div class="progress">
<div class="progress-bar bg-warning" style="width: 75%"></div>
</div>
<div class="progress">
<div class="progress-bar bg-danger" style="width: 100%"></div>
</div>

Эти классы (bg-success, bg-info, bg-warning, bg-danger) дают нам зеленые, синие, желтые и красные индикаторы соответственно. Это как если бы у нас была маленькая радуга индикаторов!

Множественные индикаторы

Иногда одного индикатора недостаточно. Может быть, вы хотите показать прогресс в разных категориях на одном индикаторе. Bootstrap позволяет нам складывать несколько индикаторов:

<div class="progress">
<div class="progress-bar" style="width: 15%">15%</div>
<div class="progress-bar bg-success" style="width: 30%">30%</div>
<div class="progress-bar bg-info" style="width: 20%">20%</div>
</div>

Этот код создает один индикатор выполнения с тремя сегментами, каждый из которых имеет разный цвет и ширину. Это как если бы у нас был разноцветный бутерброд прогресса!

Полосатый индикатор

Хотите добавить немного изюминки вашим индикаторам выполнения? Попробуйте добавить полоски:

<div class="progress">
<div class="progress-bar progress-bar-striped" style="width: 40%"></div>
</div>

Класс progress-bar-striped добавляет диагональные полоски к нашему индикатору. Это как если бы ваш индикатор надел модный пиджак в полоску!

Анимированные полоски

Но почему останавливаться на статичных полосках, если мы можем сделать их двигающимися? Вот посмотрите:

<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 75%"></div>
</div>

Добавление класса progress-bar-animated делает наши полоски двигаться справа налево. Это как если бы ваш индикатор выполнял маленький танец!

Combining It All

Теперь, когда мы узнали все эти классные функции, давайте combine их в один super индикатор выполнения:

<div class="progress" style="height: 30px;">
<div class="progress-bar bg-success progress-bar-striped progress-bar-animated" style="width: 40%">40% Complete</div>
</div>

Этот код создает высокий, зеленый, полосатый, анимированный индикатор выполнения, заполненный на 40% с меткой. Это как швейцарский армейский нож индикаторов выполнения!

Заключение

И вот оно,朋友们! Вы теперь профессионнальный пользователь индикаторов выполнения в Bootstrap. Помните, что эти индикаторы - это не только красивые визуалы - они являются способом общения с вашими пользователями, держа их в курсе и вовлеченными.

Продолжая ваше путешествие в программировании, не забывайте экспериментировать и получать удовольствие. Может быть, вы создадите индикатор выполнения, который заполняется по мере прокрутки страницы, или один, который показывает, как близко вы к тому, чтобы побить свой рекорд в игре. Возможности безграничны!

Продолжайте программировать, продолжайте учиться, и, что самое главное, продолжайте двигаться вперед. До свидания, ваш добрый сосед-компьютерный учитель!

Credits: Image by storyset