Bootstrap - Spinners

Добро пожаловать,野心勃勃 веб-разработчики! Сегодня мы окунаемся в захватывающий мир спиннеров Bootstrap. Как ваш добрососедский компьютерный учитель, я здесь, чтобы провести вас через это путешествие, шаг за шагом. Так что возьмите любимый напиток, устройтесь поудобнее и lets spin our way через этот учебник!

Как это работает

Спиннеры в Bootstrap используются для indication состояния загрузки в ваших веб-приложениях. Они такие как эти маленькие вращающиеся圈子, которые вы видите, когда веб-сайт загружает контент. Эти полезные компоненты помогают улучшить пользовательский опыт, предоставляя визуальную обратную связь о том, что что-то происходит за кулисами.

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

Спиннер с границей

Давайте начнем с самого базового спиннера: спиннера с границей. Этоvýchozí стиль спиннера в Bootstrap.

<div class="spinner-border" role="status">
<span class="visually-hidden">Загрузка...</span>
</div>

В этом примере у нас есть элемент div с двумя классами: spinner-border и role="status". Класс spinner-border применяет вращающую анимацию, в то время как role="status" помогает экранным дикторам понять, что это индикатор состояния.

Внутри div, у нас есть span с классом visually-hidden. Этот текст не виден на экране, но может быть прочитан экранными дикторами, улучшая доступность для пользователей с нарушениями зрения.

Цвета

Как хамелеон, меняющий цвета, наши спиннеры могут адаптироваться к разным темам! Bootstrap позволяет вам customize цвет ваших спиннеров с помощью утилит для цвета текста.

<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Загрузка...</span>
</div>
<div class="spinner-border text-secondary" role="status">
<span class="visually-hidden">Загрузка...</span>
</div>
<div class="spinner-border text-success" role="status">
<span class="visually-hidden">Загрузка...</span>
</div>
<div class="spinner-border text-danger" role="status">
<span class="visually-hidden">Загрузка...</span>
</div>
<div class="spinner-border text-warning" role="status">
<span class="visually-hidden">Загрузка...</span>
</div>
<div class="spinner-border text-info" role="status">
<span class="visually-hidden">Загрузка...</span>
</div>
<div class="spinner-border text-light" role="status">
<span class="visually-hidden">Загрузка...</span>
</div>
<div class="spinner-border text-dark" role="status">
<span class="visually-hidden">Загрузка...</span>
</div>

Each spinner in this example has an additional class like text-primary, text-secondary, etc. These classes change the color of the spinner to match Bootstrap's color scheme.

Растущий спиннер

Если спиннеры с границей не ваш杯 of tea, Bootstrap предлагает другой вкус: растущий спиннер. Этот спиннер растет и уменьшается вместо вращения.

<div class="spinner-grow" role="status">
<span class="visually-hidden">Загрузка...</span>
</div>

Структура аналогична спиннеру с границей, но мы используем класс spinner-grow вместо spinner-border.

Выравнивание

Выравнивание спиннеров так же просто, как pie с помощью утилит flexbox Bootstrap. Давайте рассмотрим некоторые примеры:

<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Загрузка...</span>
</div>
</div>

<div class="d-flex align-items-center">
<strong>Загрузка...</strong>
<div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
</div>

In the first example, we use justify-content-center to center the spinner horizontally. In the second, we align the spinner vertically with some text using align-items-center.

Отступ

Если вам нужно немного места вокруг вашего спиннера, утилиты отступа Bootstrap приходят на помощь!

<div class="spinner-border m-5" role="status">
<span class="visually-hidden">Загрузка...</span>
</div>

Класс m-5 добавляет отступ размером 5 (что обычно составляет 3rem) вокруг всех сторон спиннера.

Размещение

Спиннеры можно размещать внутри различных других элементов. Вот как можно поместить спиннер внутрь кнопки:

<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<span class="visually-hidden">Загрузка...</span>
</button>

<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
Загрузка...
</button>

In these examples, we place the spinner inside a button and use spinner-border-sm to make it smaller.

Flex

Утилиты Flexbox могут помочь вам создать более сложные макеты с спиннерами:

<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Загрузка...</span>
</div>
</div>

This centers the spinner horizontally within its container.

Плавающий

Для тех времен, когда вам нужно, чтобы ваш спиннер плавал, утилиты浮动 Bootstrap здесь, чтобы помочь:

<div class="clearfix">
<div class="spinner-border float-end" role="status">
<span class="visually-hidden">Загрузка...</span>
</div>
</div>

Класс float-end делает спиннер плавающим в правую сторону контейнера.

Выравнивание текста

Утилиты выравнивания текста также можно использовать с спиннерами:

<div class="text-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Загрузка...</span>
</div>
</div>

This centers the spinner within its container using text alignment.

Размер

Иногда размер имеет значение! Вы можете adjust размер своих спиннеров с помощью классов размерности Bootstrap:

<div class="spinner-border spinner-border-sm" role="status">
<span class="visually-hidden">Загрузка...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
<span class="visually-hidden">Загрузка...</span>
</div>

<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
<span class="visually-hidden">Загрузка...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
<span class="visually-hidden">Загрузка...</span>
</div>

Используйте spinner-border-sm или spinner-grow-sm для smaller спиннеров. Для пользовательских размеров вы можете использовать inline стили для установки конкретных размеров.

Кнопки

Last but not least, let's look at how to use spinners within buttons:

<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<span class="visually-hidden">Загрузка...</span>
</button>

<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
Загрузка...
</button>

<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
<span class="visually-hidden">Загрузка...</span>
</button>

<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
Загрузка...
</button>

These examples show how to incorporate both border and growing spinners into buttons, with and without accompanying text.

And there you have it, folks! You're now a Bootstrap spinner expert. Remember, practice makes perfect, so don't be afraid to experiment with these components in your projects. Happy coding, and may your web pages always spin in style!

Method	Description
spinner-border	Создает вращающийся спиннер с границей
spinner-grow	Создает растущий и уменьшающийся спиннер
text-[color]	Изменяет цвет спиннера (например, text-primary, text-secondary)
spinner-border-sm	Создает маленький спиннер с границей
spinner-grow-sm	Создает маленький растущий спиннер
m-[size]	Добавляет отступ вокруг спиннера (например, m-5)
d-flex	Создает контейнер flexbox
justify-content-center	Центрирует контент горизонтально в контейнере flexbox
align-items-center	Центрирует контент вертикально в контейнере flexbox
float-[direction]	Плавает спиннер (например, float-end)
text-center	Центрирует спиннер с помощью выравнивания текста
visually-hidden	Скрывает контент визуально, но оставляет его доступным для экранных дикторов

Credits: Image by storyset