Выберите группу стандартных классов оформления кнопок фреймворка bootstrap

Обновлено: 15.01.2025

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

Примеры

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

Primary Secondary Success Danger Warning Info Light Dark Link

Передача смысла вспомогательным технологиям

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

Отключение переноса текста

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

Теги кнопок

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

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

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

Нужна кнопка, но не богаты цвета фона, которые они приносят? Замените классы модификаторов по умолчанию на классы .btn-outline-* , чтобы удалить все фоновые изображения и цвета на любой кнопке.

Primary Secondary Success Danger Warning Info Light Dark В некоторых стилях кнопок используется относительно светлый цвет переднего плана, и их следует использовать только на темном фоне, чтобы обеспечить достаточный контраст.

Размеры

Хотите кнопки большего или меньшего размера? Добавьте .btn-lg или .btn-sm для дополнительных размеров.

Отключенное состояние

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

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

Класс .disabled использует pointer-events: none , чтобы попытаться отключить функциональность ссылок для <a> , но это свойство CSS еще не стандартизировано. Кроме того, даже в браузерах, которые поддерживают 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 .

Дополнительные утилиты можно использовать для регулировки выравнивания кнопок по горизонтали. Здесь мы взяли наш предыдущий отзывчивый пример и добавили несколько утилит гибкости и утилиту поля для кнопки, чтобы выровнять кнопки по правому краю, когда они больше не сложены.

Блочные кнопки

Вы можете настроить ширину кнопок блока с помощью классов ширины столбцов сетки. Например, для «блочной кнопки» половинной ширины используйте .col-6 . Отцентрируйте его также по горизонтали с помощью .mx-auto .

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

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

Визуально эти кнопки переключения идентичны кнопкам переключения флажков. Однако вспомогательные технологии передают их по-другому: переключатели флажков будут объявлены программами чтения с экрана как «отмечено»/«не отмечено» (поскольку, несмотря на их внешний вид, они по сути остаются флажками), тогда как эти переключатели будут объявлены как “кнопка”/“кнопка нажата”. Выбор между этими двумя подходами будет зависеть от типа создаваемого Вами переключателя и от того, будет ли этот переключатель иметь смысл для пользователей, когда он объявлен как флажок или как фактическая кнопка.

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

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

Кнопка-переключатель Активная кнопка-переключатель Отключенная кнопка-переключатель

Методы

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

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

Например, чтобы переключить все кнопки

Переменные

Миксины

Есть три миксина для кнопок: миксины для кнопок и вариантов контура кнопки (оба основаны на $theme-colors ), плюс миксин размера кнопки.

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

Примеры

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

Primary Secondary Success Danger Warning Info Light Dark Link

Использование вспомогательных технологий

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

Отключение переноса текста

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

Тэг «кнопка»

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

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

Контурные кнопки (без фона)

Нужна кнопка, но без «тяжелых» фоновых цветов? Замените дефолтные классы-модификаторы на классы .btn-outline-* для удаления всех фоновых изображений и цветов в любой кнопке.

Primary Secondary Success Danger Warning Info Light Dark В некоторых стилях кнопок используется относительно светлый цвет переднего плана. И для того, чтобы обеспечить достаточный контраст их следует использовать только на темном фоне.

Размеры

Нужно изменить размеры кнопки? Добавьте в нее классы .btn-lg или .btn-sm для получения дополнительных размеров.

«Отключенние» кнопки

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

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

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

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

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

Блочные кнопки

Создавайте гибкие стопки полноразмерных «кнопок блока», как в Bootstrap 4, с помощью наших утилит display и разрывов. Используя утилиты вместо классов, специфичных для кнопок, мы получаем гораздо больший контроль над интервалами, выравниванием и адаптивным поведением.

Здесь мы создаем адаптивный вариант, начиная с вертикально расположенных кнопок до точки останова md , где .d-md-block заменяет класс .d-grid , тем самым сводя на нет параметры gap-2 . Измените размер окна браузера, чтобы увидеть изменения.

Дополнительные утилиты можно использовать для регулировки выравнивания кнопок по горизонтали. Здесь мы взяли наш предыдущий адаптивный пример и добавили несколько утилит гибкости и утилит ширины на кнопку, чтобы выровнять кнопки по правому краю, когда они больше не сложены.

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

Контролируйте состояния кнопок или создавайте группы кнопок для компонентов, таких как «тулбары».

Визуально эти кнопки переключения идентичны кнопкам чекбоксам и радиокнопкам. Однако вспомогательные технологии передают их по-другому: переключатели чекбоксов будут объявлены программами чтения с экрана как «отмечено»/«не отмечено» (поскольку, несмотря на их внешний вид, они по сути остаются чекбоксами), тогда как эти переключатели будут объявлены как «Кнопка»/«кнопка нажата». Выбор между этими двумя подходами будет зависеть от типа создаваемого вами переключателя, а также от того, будет ли этот переключатель иметь смысл для пользователей, когда он будет объявлен как чекбокс или как фактическая кнопка.

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

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

Toggle button Active toggle button Disabled toggle button

Методы

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

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

Например, чтобы переключить все кнопки

Переменные

Миксины

Кнопки - это один из самых распространённых элементов в дизайне сайтов и приложений. В большинстве случаев кнопки применяются для того, чтобы привлечь внимание посетителя сайта к действиям, которые они выполняют. Кнопки используются в HTML формах, диалоговых окнах, меню и во многих других местах веб-страниц.

Для оформления элемента в виде кнопки обычно используется <button> , а также ссылки <a href .

Хорошей практикой является использование ссылок <a href для создания переходов между страницами, а <button> - для выполнения различных действий на странице.

Создание дефолтной Bootstrap кнопки осуществляется посредством добавления к тегу базового класса btn и класса с темой (например, btn-primary ).

В Bootstrap 3 нет темы secondary, light и dark, но есть default.

Outline кнопки (только Bootstrap ?пеж4)

Создание бутстрап кнопки с контуром (без фона) необходимо добавить к элементы классы btn и btn-outline-* :

Изменение размера кнопки

Класс btn-lg предназначен для создания большой кнопки, sm - маленькой и xs - очень маленькой.

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

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

Активное состояние кнопки

Если необходимо отображать кнопку нажатой (с более тёмным фоном и рамкой), то к ней необходимо добавить класс active .

Для поддержки вспомогательных технологий к кнопке нужно добавить атрибут aria-pressed="true" .

Неактивное состояние кнопки

Если необходимо отключить возможность нажатия на кнопку, то её необходимо перевести в неактивное состояние.

Для элемента button это действие осуществляется посредством добавления к нему атрибута disabled .

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

Класс disabled отключает возможность клика по кнопке посредством установки ей (элементу a ) CSS-свойства pointer-events со значением none .

Для обеспечения поддержки вспомогательных технологий, таких как программ чтения с экрана, к кнопке (элементу a ) необходимо добавить атрибут aria-disabled = "true" .

Плагин Buttons

Компонент "Buttons" включает в себя не только CSS, но JavaScript. Данный код (buttons.js) добавляет на страницу функционал, предназначенный для управления состоянием кнопок, как отдельных, так и находящихся в группах.

Использование кнопки в качестве переключателя

Для создания кнопки-переключателя добавьте к ней атрибут data-toggle="button" . После этого при нажатии на кнопку она будет переключаться из обычного состояния в активное и наоборот.

Если кнопка изначально должна находиться в активном состоянии, то к ней необходимо добавить класс active и aria-pressed="true" .

Checkbox и radio кнопки

CSS-стили Buttons можно применить и к другим HTML элементам, таким как к label , чтобы создать checkbox или radio кнопки.

Атрибут data-toggle="buttons" предназначен для JavaScript. Он используется в его коде в качестве селектора для выбора элементов, к которым необходимо добавить поведение «переключения».

Состояние кнопок обновляется через событие click . Если необходимо использовать какой-то другой способ для обновления состояния checkbox или radio кнопок , то его нужно написать самостоятельно.

Класс btn-group-toggle (Bootstrap 4) предназначен для стилизации элементов input внутри группы.

Методы плагина Buttons

В Bootstrap 3 и 4 версии имеется метод $().button('toggle') . Он предназначен для программного переключения состояния одной или нескольких кнопок.

Например , создадим 2 кнопки, и с помощью одной кнопки будем переключать состояние другой:

В Bootstrap 3 кроме вышеприведённого метода имеются ещё 2:

$().button('string') - изменяет текст кнопки на значение, хранящееся в атрибуте data-string-text (имя атрибута составляется путём сложения строки data- , строкового значения , переданного в функцию button, например string и строки -text );
$().button('reset') - заменяет текст на изначальный.

Пример работы с методами $().button('complete') и $().button('reset') .

Этот пример состоит из 2 кнопок.

При нажатии на первую кнопку её текст изменяется на значение атрибута data-complete-text . Это действие выполняется с помощью метода $().button('complete') .

При нажатии на вторую кнопку текст первой кнопки заменяется на изначальный. Осуществляется это посредством метода $().button('reset') .

Выравнивание кнопки по центру

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

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

Второй способ - это изменить отображение кнопки на блочное и добавить к ней стили margin-left: auto и margin-right: auto . В Boostrap 3 - это действие можно выполнить с помощью класса center-block , а в Bootstrap 4 - посредством классов d-block и mx-auto .

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

Способы выравнивания кнопки по левому или правому краю в Bootstrap 3 и 4 показаны в нижеприведенных примерах.

Как создать круглую кнопку

Для создания круглой кнопки необходимо установить с помощью CSS ей одинаковую ширину и высоту. Радиус скругления в этом случае нужно задать, равный половине ширины или высоты.

Если необходимо содержимое кнопки расположить на нескольких строчках (например, иконку на одной, а текст на другой), то значение CSS свойства white-space необходимо сбросить или другими словами восстановить ему значение по умолчанию.

Примеры

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

Primary Secondary Success Danger Warning Info Light Dark Link

Передача смысла вспомогательным технологиям

Использование цвета для добавления смысла обеспечивает только визуальную индикацию, которая не будет передана пользователям вспомогательных технологий, таких как программы чтения с экрана. Убедитесь, что Info, обозначенная цветом, либо очевидна из самого содержимого (например, видимый текст), либо включена с помощью альтернативных средств, таких как дополнительный текст, скрытый с .sr-only классом.

Отключить перенос текста

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

Теги кнопок

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

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

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

Нужна кнопка, но не богатые цвета фона, которые они приносят? Замените классы модификаторов по умолчанию на .btn-outline-* те, чтобы удалить все фоновые изображения и цвета на любой кнопке.

Primary Secondary Success Danger Warning Info Light Dark

Размеры

Хотите кнопки большего или меньшего размера? Добавьте .btn-lg или .btn-sm для изменения размеров.

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

Отключенное состояние

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

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

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

Warning о функциональности ссылок

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

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

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

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

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

Кнопка-переключатель Активная кнопка переключения Отключенная кнопка переключения

Методы

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

Метод	Описание
toggle	Переключает состояние push. Придает кнопке вид, что она была активирована.
dispose	Уничтожает кнопку элемента.

Например, чтобы переключить все кнопки

Разработан и построен с любовью к миру, командой Bootstrap и помощью наших участников.

В настоящее время v5.0.0-alpha1. Код под лицензией MIT, документы CC BY 3.0.

Читайте также: