Bootstrap Buttons (кнопки): класс, цвета и расширенные примеры
Базовый класс кнопок
Используйте основной класс .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">
Отключенное состояние (неактивные кнопки)
Сделайте кнопки неактивными, добавив логический атрибут 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>
Предупреждение о функциональности ссылок
Класс .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 (ответы на часто задаваемые вопросы)
<a href="#" class="btn btn-primary">Моя ссылка-кнопка</a>
.text-nowrap
класс к кнопке. В Sass вы можете $btn-white-space: nowrap
отключить перенос текста для каждой кнопки..btn
. Класс .btn
может быть использован с элементом <button>
, <a>
или <input>
..btn-lg
, .btn-sm
и .btn-block
..btn-outline-*
, где *
- это один из предопределенных стилей кнопок.На этой странице