Как создавать кнопки в Bootstrap 5?
<
div itemprop=»articleBody»>
Кнопки — один из основных элементов любой инфраструктуры пользовательского интерфейса. В другой нашей статье мы видели много примеров кнопок Bootstrap 3. В Bootstrap 4 внесены незначительные изменения в классы кнопок для улучшения взаимодействия с пользователем. Например, класс кнопки по умолчанию «.btn-dafault» заменяется на дополнительную кнопку с классом «.btn-secondary», а дополнительный класс маленькой кнопки «.btn-xs» удаляется. В Bootstrap 5 не так много изменений в кнопках. В этом руководстве мы подробнее рассмотрим создание различных типов кнопок с помощью Bootstrap 5.
Основы кнопок Bootstrap
Перед созданием кнопок запомните следующие моменты:
- Чтобы идентифицировать любой элемент как кнопку, вам нужно включить как минимум класс «.btn».
- Дополнительные классы будут определять только дальнейший стиль кнопки в дополнение к классу «.btn».
- Класс «.btn» можно добавить к элементам HTML, таким как
- Файлы сценария начальной загрузки нужны только для раздела «Плагины начальной загрузки» для создания эффекта переключения, другие кнопки будут просто работать с CSS. Дополнительные сведения см. В начальном шаблоне Bootstrap 5.
Основные кнопки по умолчанию
Вы можете создавать кнопки разных цветов, используя вспомогательные классы фона для класса «.btn».
- Начальный — это основная или основная кнопка синего цвета.
- Вторичный — кнопка белого цвета является дополнительной или альтернативной кнопкой.
- Успех — зеленая кнопка используется для положительных действий.
- Информация — Голубая кнопка для отображения информации.
- Предупреждение — желтая кнопка для предупреждающих действий.
- Опасность — Красная кнопка используется для действий при ошибке.
- Свет — Пуговица светло-серого цвета.
- Темный — Кнопка с темным фоном.
- Ссылка на сайт — Помимо цветов фона, вы также можете создать кнопку ссылки без фона.
Код основной кнопки должен выглядеть так:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>
<!-- Start of Button -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- End of Button -->
<!-- Bootstrap 5 Scripts -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>
Как объяснялось, класс «.btn» идентифицирует элемент как кнопку, а класс «.btn-primary» используется для создания кнопки основного (синего) цвета. Аналогично другие коды кнопок приведены ниже:
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-light">Light Button</button>
<button type="button" class="btn btn-dark">Dark Button</button>
<button type="button" class="btn btn-link">Link</button>
Последний элемент — это кнопка ссылки, которая будет выглядеть как отображаемая текстовая ссылка, но при нажатии или наведении на нее действует как кнопка. Кнопки по умолчанию в браузере будут выглядеть следующим образом:

Теги кнопок — использование классов кнопок с разными тегами
Классы кнопок поддерживаются в элементах
<a class="btn btn-primary" href="https://www.webnots.com/bootstrap-buttons-tutorial/#" role="button" style="color:white;">Anchor Tag</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input tag with type button">
<input class="btn btn-primary" type="submit" value="Input tag with type submit">
<input class="btn btn-primary" type="reset" value="Input tag with type reset">
Хотя элементы и атрибуты разные, внешний вид будет определяться на основе используемых классов CSS. В приведенном выше примере мы использовали «btn-primary», поэтому все кнопки будут созданы с основным синим цветом.

Кнопки контура
Начиная с Bootstrap 4 и 5, у вас также есть новый вариант для создания выделенных кнопок вместо обычных кнопок с заполненными цветами. Вам нужно добавить класс схемы, как показано ниже, чтобы создать кнопки с разным цветом:
<button type="button" class="btn btn-outline-primary">Primary Outline</button>
<button type="button" class="btn btn-outline-secondary">Secondary Outline</button>
<button type="button" class="btn btn-outline-success">Success Outline</button>
<button type="button" class="btn btn-outline-info">Info Outline</button>
<button type="button" class="btn btn-outline-warning">Warning Outline</button>
<button type="button" class="btn btn-outline-danger">Danger Outline</button>
<button type="button" class="btn btn-outline-light text-dark">Light Outline</button>
<button type="button" class="btn btn-outline-dark">Dark Outline</button>
Обведенные кнопки будут выглядеть так, как показано ниже, и при наведении курсора будут отображать соответствующие цвета:

Не забудьте включить дополнительный служебный класс текста «.text-dark» с кнопкой со светлым контуром. В противном случае текст может быть нечетко виден.
Различных размеров
Bootstrap позволяет создавать кнопки трех размеров: большие, стандартные и маленькие. Сверхмаленькая опция, доступная в Bootstrap 3, была удалена в версии Bootstrap 4 и далее. Различные размеры показаны ниже со стилем предупреждения:

Вот кнопка создания кода с разными размерами:
<button type="button" class="btn btn-warning btn-lg">Large button</button>
<button type="button" class="btn btn-warning">Default button</button>
<button type="button" class="btn btn-warning btn-sm">Small button</button>
Классы «.btn-lg» и «.btn-sm» используются для большего и меньшего размеров.
Кнопки блока полной ширины
Во всех приведенных выше примерах создаются кнопки, размер которых зависит от длины текста, заполнения и полей. Также есть возможность создать кнопку блока, которая унаследует ширину от родительского элемента. Это полезно для создания кнопок полной ширины, заключая код кнопки в любой родительский элемент (например, тег
) шириной 100%.

Просто добавьте класс «.btn-block» для создания кнопок блока, и код кнопки блока должен выглядеть следующим образом:
<div>
<button type="button" class="btn btn-success btn-block">Full Width Success Block Button</button>
<button type="button" class="btn btn-secondary btn-block">Full width Secondary Block Button</button>
</div>
Активные и отключенные кнопки
По умолчанию, когда кнопка нажата, она меняется на более темный цвет, чтобы указать, что она находится в активном состоянии. Вы также можете вручную установить активное состояние кнопки при ее загрузке, добавив класс «.active» вместе с aria-press = «правда» атрибут. . Точно так же вы можете отключить нажатие кнопок, добавив класс «.disabled».
<a href="https://www.webnots.com/bootstrap-buttons-tutorial/#" class="btn btn-info active" role="button" aria-pressed="true" style="color:white;">Active Link Info Button</a>
<button type="button" class="btn btn-success" disabled aria-disabled="true">Disabled Success Button</button>
Ниже показано, как это будет выглядеть в браузере. При наведении указателя мыши на отключенную кнопку курсор изменится на символ остановки без возможности щелкнуть.

На заметку:
- Обратите внимание, что элемент «.disabled» не поддерживается тегом . Хотя кнопка выглядит неактивной с тусклым цветом, гиперссылка будет продолжать работать как обычно при нажатии.
- Класс «.disabled» использует «события-указатели: нет;» для отключения щелчков мышью. Но элемент все еще можно сфокусировать и нажать с помощью клавиш клавиатуры.
- Класс «.disabled» не является частью базового класса «.btn», его следует добавлять вне классов кнопок.
Плагин кнопок
На данный момент мы обсудили кнопки, стилизованные под «bootstrap.min.css». В следующих разделах вы увидите создание эффектов переключения с помощью JavaScript, включенного в файл «bootstrap.min.js».
Переключение кнопки с помощью щелчка
Просто добавьте data-toggle = «кнопка» для переключения кнопки в активное состояние при нажатии.
<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
Click the button to see the toggle effect
</button>
Если вы хотите загрузить кнопку с переключенным активным состоянием, вам необходимо вручную добавить класс «.active», как описано ранее для создания активных кнопок. Также добавьте aria-press = «правда» чтобы сообщить программам чтения с экрана, что кнопка загружена в активном состоянии.
Кнопка переключения с флажком
Подобно переключению отдельных кнопок, вы также можете использовать функцию переключения для групп кнопок с флажками и переключателями. Опция флажка позволяет вам выбирать или переключать более одной кнопки с помощью тегов
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="checkbox" checked autocomplete="off"> Option 1 (selected)
</label>
<label class="btn btn-secondary">
<input type="checkbox" autocomplete="off"> Option 2
</label>
<label class="btn btn-secondary">
<input type="checkbox" autocomplete="off"> Option 3
</label>
</div>
В этом примере первая кнопка загружается в активном состоянии с использованием класса «.active» с параметром «checked» для тега . На рисунке ниже показано состояние после нажатия второй кнопки (первая и вторая кнопки выбраны как флажок).

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

Ниже приведен код для создания групп кнопок с переключателями-переключателями.
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Option 1 (selected)
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2" autocomplete="off"> Option 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3" autocomplete="off"> Option 3
</label>
</div>
Изучите Bootstrap 5 (Индекс)