Кнопки
Используйте настраиваемые стили кнопок Bootstrap для действий в формах, диалоговых окнах и т.д. С поддержкой нескольких размеров, состояний и т.д.
Базовый класс
Bootstrap имеет базовый класс .btn , который устанавливает основные стили, такие как отступы и выравнивание содержимого. По умолчанию элементы управления .btn имеют прозрачную рамку и цвет фона и не имеют каких-либо явных стилей фокуса и наведения.
Класс .btn предназначен для использования в сочетании с нашими вариантами кнопок или в качестве основы для ваших собственных стилей.
Варианты
Bootstrap включает в себя несколько вариантов кнопок, каждый из которых служит своей семантической цели, с добавлением нескольких дополнений для большего контроля.
Отключение переноса текста
Если Вы не хотите, чтобы текст кнопки переносился, Вы можете добавить к кнопке класс .text-nowrap . В Sass Вы можете установить $btn-white-space: nowrap , чтобы отключить перенос текста для каждой кнопки.
Теги кнопок
Классы .btn предназначены для использования с элементом <button> . Однако Вы также можете использовать эти классы для элементов <a> или <input> (хотя некоторые браузеры могут применять несколько иной рендеринг).
При использовании классов кнопок в элементах <a> , которые используются для запуска функциональности на странице (например, сворачивания содержимого), вместо того, чтобы ссылаться на новые страницы или разделы на текущей странице, этим ссылкам следует присвоить кнопку role="button" , чтобы должным образом донести свою цель до вспомогательных технологий, таких как программы чтения с экрана.
Контурные кнопки
Нужна кнопка, но не богаты цвета фона, которые они приносят? Замените классы модификаторов по умолчанию на классы .btn-outline-* , чтобы удалить все фоновые изображения и цвета на любой кнопке.
Размеры
Хотите кнопки большего или меньшего размера? Добавьте .btn-lg или .btn-sm для дополнительных размеров.
Вы даже можете изменить свой собственный размер с помощью переменных CSS:
Отключенное состояние
Чтобы кнопки выглядели неактивными, добавьте логический атрибут disabled к любому элементу <button> . К отключенным кнопкам применяются pointer-events: none , что предотвращает срабатывание состояний наведения и активного состояния.
Отключенные кнопки, использующие элемент <a> , ведут себя немного иначе:
- <a> не поддерживают атрибут disabled , поэтому вы должны добавить класс .disabled , чтобы он визуально выглядел отключенным.
- Включены некоторые удобные для будущего стили для отключения всех pointer-events на кнопках привязки.
- Отключенные кнопки с использованием <a> должны включать атрибут aria-disabled="true" , чтобы указать состояние элемента для вспомогательных технологий.
- Отключенные кнопки с использованием <a> не должны включать атрибут href .
Предупреждение о функциональности ссылок
Чтобы охватить случаи, когда вам нужно сохранить атрибут href в отключенной ссылке, класс .disabled использует pointer-events: none , чтобы попытаться отключить функциональность ссылки для <a> . Обратите внимание, что это свойство CSS еще не стандартизировано для HTML, но все современные браузеры его поддерживают. Кроме того, даже в браузерах, которые поддерживают pointer-events: none , навигация с помощью клавиатуры остается неизменной, а это означает, что зрячие пользователи клавиатуры и пользователи вспомогательных технологий по-прежнему смогут активировать эти ссылки. Чтобы быть в безопасности, в дополнение к aria-disabled="true" также включите атрибут tabindex="-1" в эти ссылки, чтобы они не получали фокус клавиатуры, и используйте собственный JavaScript, чтобы полностью отключить их функциональность.
Блочные кнопки
Создавайте гибкие стопки полноразмерных «блочных кнопок», как в Bootstrap 4, с помощью наших утилит display и gap. Используя утилиты вместо классов, специфичных для кнопок, мы получаем гораздо больший контроль над интервалом, выравниванием и поведением.
Здесь мы создаем адаптивный вариант, начиная с вертикально расположенных кнопок до контрольной точки md , где .d-md-block заменяет класс .d-grid , тем самым сводя на нет утилиту gap-2 . Измените размер браузера, чтобы увидеть, как они меняются.
Вы можете настроить ширину кнопок блока с помощью классов ширины столбцов сетки. Например, для «блочной кнопки» половинной ширины используйте .col-6 . Отцентрируйте его также по горизонтали с помощью .mx-auto .
Дополнительные утилиты можно использовать для регулировки выравнивания кнопок по горизонтали. Здесь мы взяли наш предыдущий отзывчивый пример и добавили несколько утилит гибкости и утилиту поля для кнопки, чтобы выровнять кнопки по правому краю, когда они больше не сложены.
Плагин кнопки
Плагин кнопок позволяет создавать простые кнопки включения/выключения.
Переключение состояния
Добавьте data-bs-toggle="button" для переключения состояния active . Если Вы предварительно переключаете кнопку, Вы должны вручную добавить класс .active и aria-pressed="true" чтобы гарантировать, что это будет правильно передано вспомогательным технологиям.
Методы
Вы можете создать экземпляр кнопки с помощью конструктора кнопки, например:
| Метод | Описание |
|---|---|
| dispose | Destroys an element’s button. (Removes stored data on the DOM element). |
| getInstance | Static method which allows you to get the button instance associated to a DOM element, you can use it like this: bootstrap.Button.getInstance(element) . |
| getOrCreateInstance | Static method which returns a button instance associated to a DOM element or create a new one in case it wasn’t initialized. You can use it like this: bootstrap.Button.getOrCreateInstance(element) . |
| toggle | Toggles push state. Gives the button the appearance that it has been activated. |
Например, чтобы переключить все кнопки
Переменные
В рамках развивающегося подхода Bootstrap к переменным CSS кнопки теперь используют локальные переменные CSS в .btn для расширенной настройки в реальном времени. Значения переменных CSS задаются через Sass, поэтому настройка Sass по-прежнему поддерживается.
Каждый класс модификатора .btn-* обновляет соответствующие переменные CSS, чтобы свести к минимуму дополнительные правила CSS с нашими миксинами button-variant() , button-outline-variant() и button-size() .
Вот пример создания пользовательского класса модификатора .btn-* , как мы делаем для кнопок, уникальных для наших документов, путем переназначения переменных CSS Bootstrap с помощью смеси наших собственных переменных CSS и Sass.