Кнопки. Компоненты · Bootstrap. Версия v4.0.0
2024.09.24 19:36Перейти к основному содержанию Есть более новая версия Bootstrap 4! Главная Документация Иконки Примеры Статьи Блог v4.0.0 Последняя (5.3.x) v4.6.1 v3.4.1 v2.3.2 Все версии Скачать Разметка Обзор Система сеток Медиа объект Утилиты для макета Компоненты Уведомления Значки Крошки Кнопки Группа кнопок Карты Карусель Collapse Выпадающие элементы Формы Группа ввода Jumbotron Группа списков Модальное окно Навигация Навигационная панель Нумерация страниц Информеры Прогрессбар Скроллспай Подсказки Расширения Подход Иконки О нас Обзор Рекомендации по бренду Часто задаваемые вопросы по лицензии Переводы Примеры Conveying meaning to assistive technologies Тэг «кнопка» Контурные кнопки (без фона) Размеры Активное состояние «Отключенние» кнопки Предотвращение связей Плагины кнопок Переключение состояний Переключатели («галочки») и «кнопки радио» Методы
Кнопки
Используйте стили кнопок Bootstrap для взаимодействия с формами, диалогами, т.п. Имеется поддержка некоторых контекстуальных вариаций, размеров, состояний и т.п.
Примеры
Bootstrap имеет некоторые предопределенные стили кнопок, каждый из которых имеет свою семантическую цель, и имеет дополнительные параметры для большего контроля и гибкости.
Главный Вторичный Успех Опасность Предупреждение Инфо Светлый Темный Линк button type= "button" class= "btn btn-primary" Главный /button button type= "button" class= "btn btn-secondary" Вторичный /button button type= "button" class= "btn btn-success" Успех /button button type= "button" class= "btn btn-danger" Опасность /button button type= "button" class= "btn btn-warning" Предупреждение /button button type= "button" class= "btn btn-info" Инфо /button button type= "button" class= "btn btn-light" Светлый /button button type= "button" class= "btn btn-dark" Темный /button button type= "button" class= "btn btn-link" Линк /buttonИспользование вспомогательных технологий
Использование цвета как дополнительного инструмента информативности доступно только в визуальной сфере, что ограничивает пользователей вспомогательных технологий, например, программ для чтения текста с экрана. Удостоверьтесь, что информация, обозначенная цветом, также доступна из самого контента (т.е. в тексте) или содержится в альтернативных средствах – таких как дополнительный скрытый в классе .sr-only текст.
Тэг «кнопка»
Классы .btn созданы для использования с элементом button . Однако их также можно использовать внутри a или input (хотя из-за этого некоторые браузеры могут рендерить это немного иначе).
При использовании классов .btn в элементах a , которые в данном случае используются не как линк, ведущий на новые страницы или как якорь, а как триггер внутристраничной функциональности (такой как сворачивание содержимого), необходимо задать этим a атрибут role="button" для правильного поведения в случае применения вспомогательных технологий таких как «экранная читалка».
Link 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"Контурные кнопки (без фона)
Нужна кнопка, но без «тяжелых» фоновых цветов? Замените дефолтные классы-модификаторы на классы .btn-outline-* для удаления всех фоновых изображений и цветов в любой кнопке.
Главный Вторичный Успех Опасность Предупреждение Инфо Светлый Темный button type= "button" class= "btn btn-outline-primary" Главный /button button type= "button" class= "btn btn-outline-secondary" Вторичный /button button type= "button" class= "btn btn-outline-success" Успех /button button type= "button" class= "btn btn-outline-danger" Опасность /button button type= "button" class= "btn btn-outline-warning" Предупреждение /button button type= "button" class= "btn btn-outline-info" Инфо /button button type= "button" class= "btn btn-outline-light" Светлый /button button type= "button" class= "btn btn-outline-dark" Темный /buttonРазмеры
Нужно изменить размеры кнопки? Добавьте в нее классы .btn-lg или .btn-sm для получения дополнительных размеров.
Большая кнопка Большая кнопка button type= "button" class= "btn btn-primary btn-lg" Большая кнопка /button button type= "button" class= "btn btn-secondary btn-lg" Большая кнопка /button Маленькая кнопка Маленькая кнопка button type= "button" class= "btn btn-primary btn-sm" Маленькая кнопка /button button type= "button" class= "btn btn-secondary btn-sm" Маленькая кнопка /buttonСоздайте кнопки блочного уровня – которые занимают полную ширину родительского элемента – добавлением класса .btn-block .
Кнопка блочного уровня Кнопка блочного уровня button type= "button" class= "btn btn-primary btn-lg btn-block" Кнопка блочного уровня /button button type= "button" class= "btn btn-secondary btn-lg btn-block" Кнопка блочного уровня /buttonАктивное состояние
Когда кнопки нажимают, появляется более темный фон, границы и внутренняя тень. В BS4 нет необходимости добавлять класс в button , т.к. тут используется псевдо-класс. Однако вы можете вызвать «активное» поведение и соответствующий внешний вид, добавив класс .active (и включив атрибут aria-pressed="true" ) , когда необходимо прямо объявить такое поведение.
Главная ссылка Ссылка a href= "#" class= "btn btn-primary btn-lg active" role= "button" aria-pressed= "true" Главная ссылка /a a href= "#" class= "btn btn-secondary btn-lg active" role= "button" aria-pressed= "true" Ссылка /a«Отключенние» кнопки
Заставьте кнопки выглядеть «неактивными» добавлением булеанова атрибута disabled к любому элементу button .
Главная кнопка Кнопка button type= "button" class= "btn btn-lg btn-primary" disabled Главная кнопка /button button type= "button" class= "btn btn-secondary btn-lg" disabled Кнопка /button«Отключенные» кнопки, созданные из элемента a , ведут себя немного иначе:
Элемент a не поддерживает атрибут disabled , так что для соответствующих свойств вместо него надо добавлять класс .disabled ; Некоторые future-friendly стили, которые поддерживаются не всеми юзер-агентами, (т.е. «возможно будут поддерживаться в будущем») включены в a для отключения всех событий pointer-events на кнопках-якорях. В браузерах, которые поддерживают это свойство, вы вовсе не увидите деактивированный курсор. Отключенные кнопки должны содержать атрибут aria-disabled="true" для указания вспомогательным технологиям состояния элемента. Главный линк Линк a href= "#" class= "btn btn-primary btn-lg disabled" role= "button" aria-disabled= "true" Главный линк /a a href= "#" class= "btn btn-secondary btn-lg disabled" role= "button" aria-disabled= "true" Линк /aОговорка о некоторых аспектах функциональности ссылок
Класс .disabled использует pointer-events: none для попытки деактивации ссылочной функциональности a , но это свойство CSS еще не полностью стандартизовано. В дополнение, даже в браузерах, поддерживающих свойство pointer-events: none , при навигации с клавиатуры пользователи клавиатур для слабовидящих и иных вспомогательных технологий могут нечаянно пройти по данной ссылке. Так что для полной «безопасности» добавляйте в эти ссылки атрибут tabindex="-1" (для предотвращения возможности «нахождения» их с клавиатуры) и используйте обычные скрипты JavaScript для деактивации их функциональности.
Плагины кнопок
Контролируйте состояния кнопок или создавайте группы кнопок для компонентов, таких как «тулбары».
Переключение состояний
Добавьте data-toggle="button" для переключения на активное состояние кнопки. Если вы делаете это, вы должны вручную добавить в button класс .active и aria-pressed="true" .
Одиночный переключатель button type= "button" class= "btn btn-primary" data-toggle= "button" aria-pressed= "false" autocomplete= "off" Одиночный переключатель /buttonПереключатели («галочки») и «кнопки радио»
Стили классов .button могут применяться к прочим элементам, таким как label , для создания переключателей («галочек») или «кнопок радио». Добавьте data-toggle="buttons" к классу .btn-group , содержащему эти измененные кнопки, для включения «переключателей» в их соответствующих стилях.
Состояние выбора (т.е. когда ставится «галочка») обновляется лишь событием клика click по кнопке . Если вы используете другой метод для обновления ввода – например input type="reset" или вручную применяя свойство ввода checked – вам потребуется вручную применить класс .active к label .
Заметьте, что кнопки с предустановленным выбором требуют вручную добавить класс .active к элементу ввода label .
Checked div class= "btn-group-toggle" data-toggle= "buttons" label class= "btn btn-secondary active" input type= "checkbox" checked autocomplete= "off" Checked /label /div Active Radio Radio div class= "btn-group btn-group-toggle" data-toggle= "buttons" label class= "btn btn-secondary active" input type= "radio" name= "options" id= "option1" autocomplete= "off" checked Active /label label class= "btn btn-secondary" input type= "radio" name= "options" id= "option2" autocomplete= "off" Radio /label label class= "btn btn-secondary" input type= "radio" name= "options" id= "option3" autocomplete= "off" Radio /label /div