Урок 05

Кнопки, бейджи, ссылки

Кнопки

Базовый класс:

<button type="button" class="btn btn-primary">Кнопка</button>

Что даёт: готовый стиль с padding, радиусом, hover.

Варианты цветов

<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-light">Light</button>
<button class="btn btn-dark">Dark</button>
<button class="btn btn-link">Link</button>

Правило:

Primary — основное действие.
Secondary — второстепенное.
Danger — удаление.
Success — подтверждение.

Outline-варианты

<button class="btn btn-outline-primary">Primary</button>
<button class="btn btn-outline-secondary">Secondary</button>
<button class="btn btn-outline-danger">Danger</button>

Что даёт: прозрачный фон, рамка цвета.

Правило: outline — для второстепенных действий.

Размеры

<button class="btn btn-primary btn-sm">Маленькая</button>
<button class="btn btn-primary">Обычная</button>
<button class="btn btn-primary btn-lg">Большая</button>

Что даёт:

btn-sm — компактная.
btn-lg — крупная.

Кнопки-ссылки

<a href="#" class="btn btn-primary">Ссылка</a>

Правило: <a class="btn"> — визуально кнопка, но переход. Для действий — <button>.

Block-кнопка

<button class="btn btn-primary w-100">На всю ширину</button>

Что даёт: на всю ширину контейнера.

В Bootstrap 5 нет btn-block — используйте w-100.

Активное состояние

<button class="btn btn-primary active">Активная</button>
<button class="btn btn-primary" disabled>Отключена</button>

Правило:

active — визуально нажата.
disabled — недоступна.

⚠️ Для <a> используйте aria-disabled="true" и .disabled.

Группа кнопок

<div class="btn-group" role="group">
    <button class="btn btn-primary">Левая</button>
    <button class="btn btn-primary">Средняя</button>
    <button class="btn btn-primary">Правая</button>
</div>

Что даёт: склеенные кнопки без отступов.

Вертикально:

<div class="btn-group-vertical">
    <button class="btn btn-primary">Первая</button>
    <button class="btn btn-primary">Вторая</button>
</div>

Toolbar

<div class="btn-toolbar" role="toolbar">
    <div class="btn-group me-2">
        <button class="btn btn-secondary">1</button>
        <button class="btn btn-secondary">2</button>
    </div>
    <div class="btn-group">
        <button class="btn btn-secondary">3</button>
    </div>
</div>

Что даёт: группы кнопок с разделителями.

Кнопка с иконкой

<button class="btn btn-primary">
    <i class="bi bi-check"></i> Сохранить
</button>

<button class="btn btn-icon-only">
    <i class="bi bi-x"></i>
</button>

Что даёт: иконка + текст.

Кнопка с dropdown

<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
        Меню
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Действие 1</a></li>
        <li><a class="dropdown-item" href="#">Действие 2</a></li>
    </ul>
</div>

Что даёт: кнопка с выпадающим меню.

Бейджи

<span class="badge bg-primary">Новый</span>
<span class="badge bg-success">Активен</span>
<span class="badge bg-danger">Ошибка</span>
<span class="badge bg-warning text-dark">Внимание</span>

Что даёт: метка-плашка.

Позиционирование бейджа

На кнопке:

<button class="btn btn-primary position-relative">
    Уведомления
    <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
        5
    </span>
</button>

Что даёт: бейдж в углу кнопки.

Pill-бейдж

<span class="badge rounded-pill bg-primary">Пилюля</span>

Бейдж в заголовке

<h1>Заголовок <span class="badge bg-secondary">New</span></h1>

Полезные списки

Список с бейджами:

<ul class="list-group">
    <li class="list-group-item d-flex justify-content-between align-items-center">
        Входящие
        <span class="badge bg-primary rounded-pill">14</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
        Отправленные
        <span class="badge bg-secondary rounded-pill">2</span>
    </li>
</ul>

Классический inbox-паттерн.

Ссылки

Обычная:

<a href="#">Ссылка</a>

Утилиты:

<a href="#" class="link-primary">Primary</a>
<a href="#" class="link-secondary">Secondary</a>
<a href="#" class="link-success">Success</a>
<a href="#" class="link-danger">Danger</a>
<a href="#" class="link-warning">Warning</a>
<a href="#" class="link-info">Info</a>
<a href="#" class="link-dark">Dark</a>

Что даёт: цвет ссылки без CSS.

Убрать подчёркивание

<a href="#" class="text-decoration-none">Без подчёркивания</a>

Hover с underline:

<a href="#" class="text-decoration-none hover-underline">Ссылка</a>

Что даёт: по умолчанию без подчёркивания, при наведении — с.

Ссылка-кнопка

<a href="#" class="btn btn-primary">Кнопка-ссылка</a>
<a href="#" class="btn btn-outline-primary btn-sm">Маленькая</a>

Правило: переход — <a class="btn">. Действие — <button>.

Пример: карточка с действиями

<div class="card">
    <div class="card-body">
        <h5 class="card-title">
            Заголовок
            <span class="badge bg-success">Новое</span>
        </h5>
        <p class="card-text">Описание карточки.</p>
        <a href="#" class="btn btn-primary">Открыть</a>
        <a href="#" class="btn btn-outline-secondary">В избранное</a>
    </div>
</div>

Пример: пагинация

<nav>
    <ul class="pagination">
        <li class="page-item disabled">
            <a class="page-link" href="#">Назад</a>
        </li>
        <li class="page-item active">
            <a class="page-link" href="#">1</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">2</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">3</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">Вперёд</a>
        </li>
    </ul>
</nav>

Практика

1. Набор кнопок:

<div class="d-flex gap-2">
    <button class="btn btn-primary">Сохранить</button>
    <button class="btn btn-outline-secondary">Отмена</button>
    <button class="btn btn-danger">Удалить</button>
</div>

2. Кнопка с бейджем-уведомлением.

3. Список как inbox с бейджами.

4. Карточка с двумя действиями.

5. Группа кнопок для редактора (Bold, Italic, Underline).

Частые ошибки

1. btn-block:

<button class="btn btn-block">   <!-- Bootstrap 4 -->

Решение: w-100 (Bootstrap 5).

2. <a> без href:

<a class="btn btn-primary">Кнопка</a>

Решение: использовать <button>.

3. data-toggle вместо data-bs-toggle:

dropdown не работает

Решение: data-bs-toggle="dropdown".

4. btn-default:

Устарел

Решение: btn-secondary.

5. Badge без bg:

<span class="badge">New</span>   <!-- серый на сером -->

Решение: badge bg-primary.

6. Слишком много кнопок одного цвета:

Пользователь не понимает, где главное

Решение: primary + outline для второстепенных.

7. disabled на <a>:

<a disabled>   <!-- не работает -->

Решение: <button> или класс .disabled.

8. <button> без type:

<button>   <!-- по умолчанию submit -->

Решение: type="button" внутри форм.

Итог

btn + btn-{variant} — кнопка.
btn-outline-* — прозрачный фон.
btn-sm, btn-lg — размеры.
w-100 — на всю ширину.
disabled — недоступна.
btn-group — группа.
badge bg-* — бейдж.
rounded-pill — пилюля.
link-* — цвет ссылки.
text-decoration-none — без подчёркивания.
<a> для переходов, <button> для действий.

Дальше — формы и валидация.