Bootstrap Buttons (кнопки): класс, цвета и расширенные примеры

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

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

Базовый класс кнопок

Используйте основной класс .btn с элементами <button>, <a> или <input>. Он удалит стиль кнопки по умолчанию и заменит его CSS-стилем кнопки Bootstrap. Кнопки с классом .btn автоматически получают указатель курсор при наведении.

По умолчанию класс .btn без какого-либо дополнительного оформления:

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

Результат:

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

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

Цвета (стили) кнопок

Чтобы задать цвет кнопки, добавьте класс .btn-* к существующему .btn. Кнопки Bootstrap бывают нескольких цветов, каждый из которых имеет своё значение.

<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>

Результат:

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

Вы можете изменить размер кнопки Bootstrap с помощью двух предопределённых классов: .btn-sm, чтобы сделать кнопку меньше, и .btn-lg чтобы сделать её больше.

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

Результат:

Если этого недостаточно, используйте утилиты изменения размера, например .p-* для добавления отступов.

<button type="button" class="btn btn-primary p-4">Кнопка нестандартного размера</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>

Результат:

Так же если вы хотите, чтобы кнопка, занимала всю ширину родительского элемента, используйте класс .btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level 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, чтобы отключить их функциональность.

Управление закруглением углов

По умолчанию кнопки с углами закругленными на 0.375rem (border-radius: 0.375rem). Вы можете это спокойно изменить при помощи классов .rounded-*, которые входят в утилиту Borders.

Например, если вы хотите сделать прямые углы, добавьте класс .rounded-0 к элементу .btn. А если нужны полукруглые углы, добавьте класс .rounded-pill и т.д..

<div class="d-flex gap-2 justify-content-center py-2">
  <button class="btn btn-primary rounded-0 px-3" type="button">Название кнопки</button>
  <button class="btn btn-primary rounded-pill px-3" type="button">Название кнопки</button>
  <button class="btn btn-primary rounded-end-pill px-3" type="button">Название кнопки :)</button>
</div>

Результат:

Кнопка в виде круга

Чтобы создать круглую кнопку Bootstrap, добавьте класс .rounded-circle к элементу .btn. Вы также можете задать размер круглой кнопки с помощью отступов p-*.

Круглые кнопки могут содержать значки и использоваться для создания кнопок уведомлений, аватаров, страниц и так далее. Содержимое кнопки автоматически центрируется по горизонтальной и вертикальной осям.

<button type="button" class="btn btn-primary rounded-circle">
  ⇑
</button>

Результат:

Выравнивание кнопок по центру, левому и правому краю

Кнопка в бутстрап по умолчанию отображается как inline-block. Это обстоятельство и определяет способы, с помощью которых её можно выравнивать.

Способ 1: обернуть кнопку элементом, который показывается в документе как блочный (т.е. у которого CSS-свойство display, равно значению block), и добавить к нему класс:

.text-start - чтобы выровнять по левому краю.
.text-end - чтобы выровнять по правому краю.
.text-center - чтобы выровнять по центру.

<div class="d-block text-start">
  <button class="btn btn-primary rounded-pill px-3" type="button">Название кнопки</button>
</div>
<div class="d-block text-end">
  <button class="btn btn-primary rounded-pill px-3" type="button">Название кнопки</button>
</div>
<div class="d-block text-center">
  <button class="btn btn-primary rounded-pill px-3" type="button">Название кнопки</button>
</div>

Результат:

Способ 2: обернуть кнопку элементом, который показывается в документе как флекс (т.е. у которого CSS-свойство display, равно значению flex), и добавить к нему класс:

.justify-content-start - чтобы выровнять по левому краю.
.justify-content-end - чтобы выровнять по правому краю.
.justify-content-center - чтобы выровнять по центру.

<div class="d-flex justify-content-start">
  <button class="btn btn-primary rounded-pill px-3" type="button">Название кнопки</button>
</div>
<div class="d-flex justify-content-end">
  <button class="btn btn-primary rounded-pill px-3" type="button">Название кнопки</button>
</div>
<div class="d-flex justify-content-center">
  <button class="btn btn-primary rounded-pill px-3" type="button">Название кнопки</button>
</div>

Результат:

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

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

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

Добавить, 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-*, где * - это один из предопределенных стилей кнопок.