Bootstrap Buttons (кнопки)

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

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

Основы кнопок

Кнопки в Bootstrap 5 могут быть созданы с помощью класса .btn. Класс .btn может быть использован с элементом <button>, <a> или <input>. При использовании класса .btn с элементом <a>, который используется для запуска функциональности на странице, этим ссылкам следует присвоить кнопку role="button", чтобы должным образом донести свою цель до вспомогательных технологий, таких как программы чтения с экрана.

<button type="button" class="btn">Базовый класс</button>

Результат:

Класс .btn предназначен для использования в сочетании с нижеприведенными классами кнопок или для использования в качестве основы для ваших собственных пользовательских стилей.

Если вы используете класс .btn сам по себе, не забудьте, по крайней мере, определить некоторые явные стили :focus и / или :focus-visible.

Стили кнопок

Bootstrap 5 включает несколько предопределенных стилей кнопок, каждый из которых служит своей семантической цели, с добавлением нескольких дополнительных элементов для большего контроля. Некоторые из этих стилей включают:

.btn-primary: Используется для основных действий на странице.
.btn-secondary: Используется для второстепенных действий на странице.
.btn-success: Используется для действий, которые завершаются успешно.
.btn-danger: Используется для действий, которые могут привести к нежелательным последствиям.
.btn-warning: Используется для действий, которые требуют внимания пользователя.
.btn-info: Используется для действий, которые предоставляют дополнительную информацию.
.btn-light: Используется для действий, которые не требуют особого внимания.
.btn-dark: Используется для действий, которые требуют особого внимания.
.btn-link: Используется для создания ссылок, которые выглядят как кнопки.

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

Результат:

Совет по доступности: Использование цвета для придания значения обеспечивает только визуальную индикацию, которая не будет передана пользователям вспомогательных технологий, таких как программы чтения с экрана. Пожалуйста, убедитесь, что значение очевидно из самого содержимого (например, видимого текста с достаточным цветовым контрастом) или включено альтернативными средствами, такими как дополнительный текст, скрытый с помощью класса .visually-hidden.

Размеры кнопок

Bootstrap 5 поддерживает несколько размеров кнопок, которые могут быть созданы с помощью классов .btn-lg, .btn-sm и .btn-block. Класс .btn-lg используется для создания крупных кнопок, а класс .btn-sm используется для создания маленьких кнопок.

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

Результат:

Класс .btn-block используется для создания кнопок, которые занимают всю ширину родительского элемента.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>

Результат:

Вы даже можете изменить свой собственный размер с помощью переменных CSS:

<button type="button" class="btn btn-primary"
        style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;">
  Custom button
</button>

Результат:

Контурные кнопки

Bootstrap 5 также поддерживает контурные кнопки, которые не имеют фонового изображения или цвета. Контурные кнопки могут быть созданы с помощью класса .btn-outline-*, где * - это один из предопределенных стилей кнопок.

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

Результат:

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

Теги кнопок

Эти классы .btn предназначены для использования с элементом <button>. Однако вы также можете использовать эти классы в элементах <a> или <input> (хотя некоторые браузеры могут применять немного другой рендеринг).

При использовании классов кнопок в <a> элементах, которые используются для запуска функциональности на странице (например, сворачивания содержимого), вместо того, чтобы ссылаться на новые страницы или разделы на текущей странице, этим Linkм следует присвоить role="button", чтобы соответствующим образом передать их назначение вспомогательным технологиям, таким как программы чтения с экрана.

<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

Результат:

Link

Отключенное состояние (неактивные кнопки)

Сделайте кнопки неактивными, добавив логический атрибут disabled к любому <button> элементу. Отключенные кнопки pointer-events: none применяются к, предотвращая срабатывание состояния наведения и активного состояния.

<button type="button" class="btn btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary" disabled>Button</button>
<button type="button" class="btn btn-outline-primary" disabled>Primary button</button>
<button type="button" class="btn btn-outline-secondary" disabled>Button</button>

Результат:

Отключенные кнопки, использующие <a> элемент, ведут себя немного иначе:

<a> не поддерживают disabled атрибут, поэтому вы должны добавить класс .disabled, чтобы он визуально казался отключенным.
Включены некоторые удобные для будущего стили, чтобы отключить все pointer-events кнопки привязки. В браузерах, которые поддерживают это свойство, вы вообще не увидите отключенный курсор.
Отключенные кнопки должны включать атрибут aria-disabled="true", указывающий состояние элемента для вспомогательных технологий.

<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>

Результат:

Primary link Link

Предупреждение о функциональности ссылок

Класс .disabled использует pointer-events: none, чтобы попытаться отключить функциональность линии связи с <a>, но это свойство CSS еще не стандартизированы. Кроме того, даже в поддерживаемых браузерах pointer-events: none навигация с помощью клавиатуры остается неизменной, а это означает, что зрячие пользователи клавиатуры и пользователи вспомогательных технологий по-прежнему смогут активировать эти ссылки. Чтобы быть в безопасности, добавьте атрибут tabindex="-1" к этим Linkм (чтобы они не получали фокус клавиатуры) и используйте собственный JavaScript, чтобы отключить их функциональность.

Плагин кнопки

Плагин кнопок позволяет создавать простые кнопки включения / выключения.

Переключить состояния

Добавить, data-toggle="button" чтобы переключить состояние кнопки active. Если вы предварительно переключаете кнопку, вы должны вручную добавить .active класс и aria-pressed="true" в <button>.

<button type="button" class="btn btn-primary" data-toggle="button" autocomplete="off">Кнопка-переключатель</button>
<button type="button" class="btn btn-primary active" data-toggle="button" autocomplete="off" aria-pressed="true">Активная кнопка переключения</button>
<button type="button" class="btn btn-primary" disabled data-toggle="button" autocomplete="off">Отключенная кнопка переключения</button>

Результат:

<a href="#" class="btn btn-primary" role="button" data-toggle="button">Переключить ссылку</a>
<a href="#" class="btn btn-primary active" role="button" data-toggle="button" aria-pressed="true">Активная ссылка переключения</a>
<a href="#" class="btn btn-primary disabled" role="button" data-toggle="button">Отключено переключение ссылки</a>

Результат:

Переключить ссылку Активная ссылка переключения Отключено переключение ссылки

Методы

Вы можете создать экземпляр кнопки с помощью конструктора кнопки, например:

const bsButton = new bootstrap.Button('#myButton')

Метод	Описание
`dispose`	Уничтожает кнопку элемента. (Удаляет сохраненные данные в элементе DOM)
`getInstance`	Статический метод, который позволяет вам получить экземпляр button, связанный с элементом DOM, вы можете использовать его следующим образом: `bootstrap.Button.getInstance(element)`.
`getOrCreateInstance`	Статический метод, который возвращает экземпляр кнопки, связанный с элементом DOM, или создает новый экземпляр, если он не был инициализирован. Вы можете использовать его следующим образом: `bootstrap.Button.getOrCreateInstance(element)`.
`toggle`	Переключает состояние нажатия. Придает кнопке вид, что она была активирована.

Например, для переключения всех кнопок

document.querySelectorAll('.btn').forEach(buttonElement => {
  const button = bootstrap.Button.getOrCreateInstance(buttonElement)
  button.toggle()
} )

FAQ (ответы на часто задаваемые вопросы)

Как создать ссылку, которая выглядит как кнопка в Bootstrap 5?

Используйте классы стилей кнопок. Пример:

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

Как отключить перенос текста в кнопках

Если вы не хотите, чтобы текст кнопки переносился, вы можете добавить .text-nowrapкласс к кнопке. В Sass вы можете $btn-white-space: nowrap отключить перенос текста для каждой кнопки.

Как создать кнопку в Bootstrap 5?

Кнопка в Bootstrap 5 может быть создана с помощью класса .btn. Класс .btn может быть использован с элементом <button>, <a> или <input>.

Как изменить размер кнопки в Bootstrap 5?

Размер кнопки в Bootstrap 5 может быть изменен с помощью классов .btn-lg, .btn-sm и .btn-block.

Как создать контурную кнопку в Bootstrap 5?

Контурная кнопка в Bootstrap 5 может быть создана с помощью класса .btn-outline-*, где * - это один из предопределенных стилей кнопок.

На этой странице