Компоненты
Более десятка повторно используемых компонентов построены так, чтобы обеспечить кнопки, выпадающие меню, группы ввода, навигации, оповещения, и многое другое.
Кнопки
Используйте Bootstrap пользовательские стили кнопок для действий в формы, диалоговые окна и многое другое. Включает поддержку для нескольких контекстуальных вариаций, размеров, состояния и более.
Примеры
Bootstrap включает в себя шесть предустановленных стилей кнопок, каждая из которых обслуживает свое собственное смысловое назначение.
Primary Secondary Success Info Warning Danger Link
type="button" class="btn btn-primary">Primary type="button" class="btn btn-secondary">Secondary type="button" class="btn btn-success">Success type="button" class="btn btn-info">Info type="button" class="btn btn-warning">Warning type="button" class="btn btn-danger">Danger type="button" class="btn btn-link">Link Передать смысл для ассистивных технологий
Используя цвет, чтобы добавить смысл только обеспечивает визуальную индикацию, которая не будет доведена до пользователей ассистивных технологий, таких как экранные дикторы. Убедитесь, что информация обозначается цвет либо очевидно из самого содержимого (например, текст), или включен с помощью альтернативных средств, таких как дополнительный текст, скрытый с .sr-only класс.
Кнопка теги
В .btn классы предназначены для использования с элемент. Однако, вы также можете использовать эти классы на или элементов (хотя некоторые браузеры могут применять несколько разных перевода).
class="btn btn-primary" href="#" role="button">Link class="btn btn-primary" type="submit">Button class="btn btn-primary" type="button" value="Input"> class="btn btn-primary" type="submit" value="Submit"> class="btn btn-primary" type="reset" value="Reset">Контурные кнопки
Нужна кнопка, но не дюже цвета фона они приносят? Заменить по умолчанию модификатор классов с .btn-outline-* , чтобы удалить все фоновые изображения и цвета на любую кнопку.
Primary Secondary Success Info Warning Danger
type="button" class="btn btn-outline-primary">Primary type="button" class="btn btn-outline-secondary">Secondary type="button" class="btn btn-outline-success">Success type="button" class="btn btn-outline-info">Info type="button" class="btn btn-outline-warning">Warning type="button" class="btn btn-outline-danger">Danger Размеры
Необычные большие или меньшие кнопки? Добавить .btn-lg или .btn-sm дополнительные размеры.
Large button Large button
type="button" class="btn btn-primary btn-lg">Large button type="button" class="btn btn-secondary btn-lg">Large button Small button Small button
type="button" class="btn btn-primary btn-sm">Small button type="button" class="btn btn-secondary btn-sm">Small button Создать кнопки—те на уровне блоков, которые охватывают всю ширину родителя—путем добавления .btn-block .
Block level button Block level button
type="button" class="btn btn-primary btn-lg btn-block">Block level button type="button" class="btn btn-secondary btn-lg btn-block">Block level button Активное состояние
Кнопок будет нажата (на темном фоне, темные границы, и вставка тень) когда активный. Там нет необходимости, чтобы добавить класс в , так как они используют псевдо-класса. Тем не менее, вы все равно можете заставить же активное появление с .active (и включают в себя aria-pressed=»true» атрибут) если Вам необходимо скопировать состояние программно.
href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link Неактивное состояние
Сделайте кнопки которые выглядят не активно, добавив disabled логический атрибут к любому элементу.
Внимание! IE9 и ниже отрисовка кнопок отключен с серым, тени текста, который мы не можем обойти.
Primary button Button
type="button" class="btn btn-lg btn-primary" disabled>Primary button type="button" class="btn btn-secondary btn-lg" disabled>Button href="#" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link href="#" class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link Ссылка функционального пояснения
Плагин кнопки
Делать больше с кнопками. Кнопки управления состояния или создавайте группы кнопок дополнительные компоненты, такие как панели инструментов.
Тумблер состояния
Добавить data-toggle=»button» для включения кнопки active состояние. Если вы заранее переключить кнопку, Вы должны вручную добавить .active класс и aria-pressed=»true» на .
Single toggle
type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off"> Single toggle Флажки и радиокнопки
Bootstrap .button стили могут быть применены и другие элементы, такие как , чтобы обеспечить флажок или радио стиль кнопки переключения. Добавить data-toggle=»buttons» на .btn-group , содержащая измененные кнопки для включения переключения в соответствующих стилях.
Проверенные состояние этих кнопок обновлять только через click событие на кнопку. Если вы используете другой метод обновления входного сигнала, например, с или вручную, применяя входа checked собственность—вы нужно переключить .active на вручную.
Обратите внимание, что предварительно проверил кнопки необходимо вручную добавить .active класс к входа .
Checkbox 1 (pre-checked) Checkbox 2 Checkbox 3
class="btn-group" data-toggle="buttons"> class="btn btn-primary active"> type="checkbox" checked autocomplete="off"> Checkbox 1 (pre-checked) class="btn btn-primary"> type="checkbox" autocomplete="off"> Checkbox 2 class="btn btn-primary"> type="checkbox" autocomplete="off"> Checkbox 3 Radio 1 (preselected) Radio 2 Radio 3
class="btn-group" data-toggle="buttons"> class="btn btn-primary active"> type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected) class="btn btn-primary"> type="radio" name="options" id="option2" autocomplete="off"> Radio 2 class="btn btn-primary"> type="radio" name="options" id="option3" autocomplete="off"> Radio 3 Методы
| Способ | Описание |
|---|---|
| $().button(‘toggle’) | Переключение нажимаем состояние. Дает кнопка видимость того, что он был активирован. |
Спроектированы и построены со всей любовью в мире @mdo и @fat. Поддерживается основной командой с помощью наших спонсоров.
Сейчас v4.0.0-alpha.4. Код лицензии MIT, документы CC BY 3.0.
Кнопки
Используйте стили кнопок Bootstrap для взаимодействия с формами, диалогами, т.п. Имеется поддержка некоторых контекстуальных вариаций, размеров, состояний и т.п.
Примеры
Bootstrap имеет некоторые предопределенные стили кнопок, каждый из которых имеет свою семантическую цель, и имеет дополнительные параметры для большего контроля и гибкости.
Главный Вторичный Успех Опасность Предупреждение Инфо Светлый Темный Линк
type="button" class="btn btn-primary">Главный type="button" class="btn btn-secondary">Вторичный type="button" class="btn btn-success">Успех type="button" class="btn btn-danger">Опасность type="button" class="btn btn-warning">Предупреждение type="button" class="btn btn-info">Инфо type="button" class="btn btn-light">Светлый type="button" class="btn btn-dark">Темный type="button" class="btn btn-link">Линк Использование вспомогательных технологий
Использование цвета как дополнительного инструмента информативности доступно только в визуальной сфере, что ограничивает пользователей вспомогательных технологий, например, программ для чтения текста с экрана. Удостоверьтесь, что информация, обозначенная цветом, также доступна из самого контента (т.е. в тексте) или содержится в альтернативных средствах – таких как дополнительный скрытый в классе .sr-only текст.
Тэг «кнопка»
Классы .btn созданы для использования с элементом . Однако их также можно использовать внутри или (хотя из-за этого некоторые браузеры могут рендерить это немного иначе).
class="btn btn-primary" href="#" role="button">Link class="btn btn-primary" type="submit">Button class="btn btn-primary" type="button" value="Input"> class="btn btn-primary" type="submit" value="Submit"> class="btn btn-primary" type="reset" value="Reset">Контурные кнопки (без фона)
Нужна кнопка, но без «тяжелых» фоновых цветов? Замените дефолтные классы-модификаторы на классы .btn-outline-* для удаления всех фоновых изображений и цветов в любой кнопке.
Главный Вторичный Успех Опасность Предупреждение Инфо Светлый Темный
type="button" class="btn btn-outline-primary">Главный type="button" class="btn btn-outline-secondary">Вторичный type="button" class="btn btn-outline-success">Успех type="button" class="btn btn-outline-danger">Опасность type="button" class="btn btn-outline-warning">Предупреждение type="button" class="btn btn-outline-info">Инфо type="button" class="btn btn-outline-light">Светлый type="button" class="btn btn-outline-dark">Темный Размеры
Нужно изменить размеры кнопки? Добавьте в нее классы .btn-lg или .btn-sm для получения дополнительных размеров.
Большая кнопка Большая кнопка
type="button" class="btn btn-primary btn-lg">Большая кнопка type="button" class="btn btn-secondary btn-lg">Большая кнопка Маленькая кнопка Маленькая кнопка
type="button" class="btn btn-primary btn-sm">Маленькая кнопка type="button" class="btn btn-secondary btn-sm">Маленькая кнопка Создайте кнопки блочного уровня – которые занимают полную ширину родительского элемента – добавлением класса .btn-block .
Кнопка блочного уровня Кнопка блочного уровня
type="button" class="btn btn-primary btn-lg btn-block">Кнопка блочного уровня type="button" class="btn btn-secondary btn-lg btn-block">Кнопка блочного уровня Активное состояние
Когда кнопки нажимают, появляется более темный фон, границы и внутренняя тень. В BS4 нет необходимости добавлять класс в , т.к. тут используется псевдо-класс. Однако вы можете вызвать «активное» поведение и соответствующий внешний вид, добавив класс .active (и включив атрибут aria-pressed=»true» ) , когда необходимо прямо объявить такое поведение.
href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Главная ссылка href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Ссылка «Отключенние» кнопки
Заставьте кнопки выглядеть «неактивными» добавлением булеанова атрибута disabled к любому элементу .
Главная кнопка Кнопка
type="button" class="btn btn-lg btn-primary" disabled>Главная кнопка type="button" class="btn btn-secondary btn-lg" disabled>Кнопка «Отключенные» кнопки, созданные из элемента , ведут себя немного иначе:
- Элемент не поддерживает атрибут disabled , так что для соответствующих свойств вместо него надо добавлять класс .disabled ;
- Некоторые future-friendly стили, которые поддерживаются не всеми юзер-агентами, (т.е. «возможно будут поддерживаться в будущем») включены в для отключения всех событий pointer-events на кнопках-якорях. В браузерах, которые поддерживают это свойство, вы вовсе не увидите деактивированный курсор.
- Отключенные кнопки должны содержать атрибут aria-disabled=»true» для указания вспомогательным технологиям состояния элемента.
href="#" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Главный линк href="#" class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Линк Оговорка о некоторых аспектах функциональности ссылок
Плагины кнопок
Контролируйте состояния кнопок или создавайте группы кнопок для компонентов, таких как «тулбары».
Переключение состояний
Добавьте data-toggle=»button» для переключения на активное состояние кнопки. Если вы делаете это, вы должны вручную добавить в класс .active и aria-pressed=»true» .
Одиночный переключатель
type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off"> Одиночный переключатель Переключатели («галочки») и «кнопки радио»
Стили классов .button могут применяться к прочим элементам, таким как , для создания переключателей («галочек») или «кнопок радио». Добавьте data-toggle=»buttons» к классу .btn-group , содержащему эти измененные кнопки, для включения «переключателей» в их соответствующих стилях.
Состояние выбора (т.е. когда ставится «галочка») обновляется лишь событием клика click по кнопке. Если вы используете другой метод для обновления ввода – например или вручную применяя свойство ввода checked – вам потребуется вручную применить класс .active к .
Заметьте, что кнопки с предустановленным выбором требуют вручную добавить класс .active к элементу ввода .
class="btn-group-toggle" data-toggle="buttons"> class="btn btn-secondary active"> type="checkbox" checked autocomplete="off"> Checked Active Radio Radio
class="btn-group btn-group-toggle" data-toggle="buttons"> class="btn btn-secondary active"> type="radio" name="options" id="option1" autocomplete="off" checked> Active class="btn btn-secondary"> type="radio" name="options" id="option2" autocomplete="off"> Radio class="btn btn-secondary"> type="radio" name="options" id="option3" autocomplete="off"> Radio Методы
| Метод | Описание |
|---|---|
| $().button(‘toggle’) | Задействует состояние «нажатия». Дает кнопке вид активированной (нажатой) кнопки. |
| $().button(‘dispose’) | Уничтожает кнопку элемента (в элементе). |
Кнопки
Используйте настраиваемые стили кнопок Bootstrap для действий в формах, диалоговых окнах и т.д. С поддержкой нескольких размеров, состояний и т.д.
На этой странице
Примеры
Bootstrap включает несколько предопределенных стилей кнопок, каждый из которых служит своей семантической цели, с добавлением нескольких дополнительных элементов для большего контроля.
Primary Secondary Success Danger Warning Info Light Dark Link
button type="button" class="btn btn-primary">Primarybutton> button type="button" class="btn btn-secondary">Secondarybutton> button type="button" class="btn btn-success">Successbutton> button type="button" class="btn btn-danger">Dangerbutton> button type="button" class="btn btn-warning">Warningbutton> button type="button" class="btn btn-info">Infobutton> button type="button" class="btn btn-light">Lightbutton> button type="button" class="btn btn-dark">Darkbutton> button type="button" class="btn btn-link">Linkbutton>Передача смысла вспомогательным технологиям
Использование цвета для добавления смысла обеспечивает только визуальную индикацию, которая не будет передана пользователям вспомогательных технологий, таких как программы чтения с экрана. Убедитесь, что информация, обозначенная цветом, либо очевидна из самого содержимого (например, видимый текст), либо включена с помощью альтернативных средств, таких как дополнительный текст, скрытый с помощью класса .visually-hidden .
Отключение переноса текста
Если Вы не хотите, чтобы текст кнопки переносился, Вы можете добавить к кнопке класс .text-nowrap . В Sass Вы можете установить $btn-white-space: nowrap , чтобы отключить перенос текста для каждой кнопки.
Теги кнопок
Классы .btn предназначены для использования с элементом . Однако Вы также можете использовать эти классы для элементов или (хотя некоторые браузеры могут применять несколько иной рендеринг).
a class="btn btn-primary" href="#" role="button">Ссылкаa> button class="btn btn-primary" type="submit">Кнопкаbutton> input class="btn btn-primary" type="button" value="Поле ввода"> input class="btn btn-primary" type="submit" value="Поле Отправить"> input class="btn btn-primary" type="reset" value="Поле Сбросить">Контурные кнопки
Нужна кнопка, но не богаты цвета фона, которые они приносят? Замените классы модификаторов по умолчанию на классы .btn-outline-* , чтобы удалить все фоновые изображения и цвета на любой кнопке.
Primary Secondary Success Danger Warning Info Light Dark
button type="button" class="btn btn-outline-primary">Primarybutton> button type="button" class="btn btn-outline-secondary">Secondarybutton> button type="button" class="btn btn-outline-success">Successbutton> button type="button" class="btn btn-outline-danger">Dangerbutton> button type="button" class="btn btn-outline-warning">Warningbutton> button type="button" class="btn btn-outline-info">Infobutton> button type="button" class="btn btn-outline-light">Lightbutton> button type="button" class="btn btn-outline-dark">Darkbutton>В некоторых стилях кнопок используется относительно светлый цвет переднего плана, и их следует использовать только на темном фоне, чтобы обеспечить достаточный контраст.
Размеры
Хотите кнопки большего или меньшего размера? Добавьте .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>Отключенное состояние
a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Основная ссылкаa> a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Ссылкаa>Предупреждение о функциональности ссылок
Блочные кнопки
Создавайте гибкие стопки полноразмерных «блочных кнопок», как в Bootstrap 4, с помощью наших утилит display и gap. Используя утилиты вместо классов, специфичных для кнопок, мы получаем гораздо больший контроль над интервалом, выравниванием и адаптивным поведением.
Кнопка Кнопка
div class="d-grid gap-2"> button class="btn btn-primary" type="button">Кнопкаbutton> button class="btn btn-primary" type="button">Кнопкаbutton> div>Здесь мы создаем адаптивный вариант, начиная с вертикально расположенных кнопок до контрольной точки md , где .d-md-block заменяет класс .d-grid , тем самым сводя на нет утилиту gap-2 . Измените размер браузера, чтобы увидеть, как они меняются.
Кнопка Кнопка
div class="d-grid gap-2 d-md-block"> button class="btn btn-primary" type="button">Кнопкаbutton> button class="btn btn-primary" type="button">Кнопкаbutton> div>Вы можете настроить ширину кнопок блока с помощью классов ширины столбцов сетки. Например, для «кнопки блока» половинной ширины используйте .col-6 . Отцентрируйте его также по горизонтали с помощью .mx-auto .
Кнопка Кнопка
div class="d-grid gap-2 col-6 mx-auto"> button class="btn btn-primary" type="button">Кнопкаbutton> button class="btn btn-primary" type="button">Кнопкаbutton> div>Дополнительные утилиты можно использовать для регулировки выравнивания кнопок по горизонтали. Здесь мы взяли наш предыдущий отзывчивый пример и добавили несколько утилит гибкости и утилиту поля для кнопки, чтобы выровнять кнопки по правому краю, когда они больше не сложены.
Кнопка Кнопка
div class="d-grid gap-2 d-md-flex justify-content-md-end"> button class="btn btn-primary mr-md-2" type="button">Кнопкаbutton> button class="btn btn-primary" type="button">Кнопкаbutton> div>Блочные кнопки
Создавайте гибкие стопки полноразмерных «блочных кнопок», как в Bootstrap 4, с помощью наших утилит display и gap. Используя утилиты вместо классов, специфичных для кнопок, мы получаем гораздо больший контроль над интервалом, выравниванием и поведением.
Кнопка Кнопка
div class="d-grid gap-2"> button class="btn btn-primary" type="button">Кнопкаbutton> button class="btn btn-primary" type="button">Кнопкаbutton> div>Здесь мы создаем адаптивный вариант, начиная с вертикально расположенных кнопок до контрольной точки md , где .d-md-block заменяет класс .d-grid , тем самым сводя на нет утилиту gap-2 . Измените размер браузера, чтобы увидеть, как они меняются.
Кнопка Кнопка
div class="d-grid gap-2 d-md-block"> button class="btn btn-primary" type="button">Кнопкаbutton> button class="btn btn-primary" type="button">Кнопкаbutton> div>Вы можете настроить ширину кнопок блока с помощью классов ширины столбцов сетки. Например, для «блочной кнопки» половинной ширины используйте .col-6 . Отцентрируйте его также по горизонтали с помощью .mx-auto .
Кнопка Кнопка
div class="d-grid gap-2 col-6 mx-auto"> button class="btn btn-primary" type="button">Кнопкаbutton> button class="btn btn-primary" type="button">Кнопкаbutton> div>Дополнительные утилиты можно использовать для регулировки выравнивания кнопок по горизонтали. Здесь мы взяли наш предыдущий отзывчивый пример и добавили несколько утилит гибкости и утилиту поля для кнопки, чтобы выровнять кнопки по правому краю, когда они больше не сложены.
Кнопка Кнопка
div class="d-grid gap-2 d-md-flex justify-content-md-end"> button class="btn btn-primary me-md-2" type="button">Кнопкаbutton> button class="btn btn-primary" type="button">Кнопкаbutton> div>Плагин кнопки
Плагин кнопок позволяет создавать простые кнопки включения/выключения.
Визуально эти кнопки переключения идентичны кнопкам переключения флажков. Однако вспомогательные технологии передают их по-другому: переключатели флажков будут объявлены программами чтения с экрана как «отмечено»/«не отмечено» (поскольку, несмотря на их внешний вид, они по сути остаются флажками), тогда как эти переключатели будут объявлены как “кнопка”/“кнопка нажата”. Выбор между этими двумя подходами будет зависеть от типа создаваемого Вами переключателя и от того, будет ли этот переключатель иметь смысл для пользователей, когда он объявлен как флажок или как фактическая кнопка.
Переключение состояния
Добавьте data-bs-toggle=»button» для переключения состояния active . Если Вы предварительно переключаете кнопку, Вы должны вручную добавить класс .active и aria-pressed=»true» чтобы гарантировать, что это будет правильно передано вспомогательным технологиям.
Кнопка-переключатель Активная кнопка-переключатель Отключенная кнопка-переключатель
button type="button" class="btn btn-primary" data-bs-toggle="button" autocomplete="off">Кнопка-переключательbutton> button type="button" class="btn btn-primary active" data-bs-toggle="button" autocomplete="off" aria-pressed="true">Активная кнопка-переключательbutton> button type="button" class="btn btn-primary" disabled data-bs-toggle="button" autocomplete="off">Отключенная кнопка-переключательbutton>a href="#" class="btn btn-primary" role="button" data-bs-toggle="button">Ссылка-переключательa> a href="#" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Активная ссылка-переключательa> a href="#" class="btn btn-primary disabled" tabindex="-1" aria-disabled="true" role="button" data-bs-toggle="button">Отключенная ссылка-переключательa>Методы
Вы можете создать экземпляр кнопки с помощью конструктора кнопки, например:
var button = document.getElementById('myButton') var bsButton = new bootstrap.Button(button) | Метод | Описание |
|---|---|
| toggle | Переключает состояние нажатия. Придает кнопке вид, что она была активирована. |
| dispose | Уничтожает элемент кнопку. (Удаляет сохраненные данные в элементе DOM) |
| getInstance | Статический метод, который позволяет вам получить экземпляр кнопки, связанный с элементом DOM, вы можете использовать это так: bootstrap.Button.getInstance(element) |
| getOrCreateInstance | Статический метод, который возвращает экземпляр кнопки, связанный с элементом DOM, или создает новый, если он не был инициализирован. Вы можете использовать это так: bootstrap.Button.getOrCreateInstance(element) |
Например, чтобы переключить все кнопки
var buttons = document.querySelectorAll('.btn') buttons.forEach(function (button) var button = new bootstrap.Button(button) button.toggle() >) Sass
Переменные
$btn-padding-y: $input-btn-padding-y; $btn-padding-x: $input-btn-padding-x; $btn-font-family: $input-btn-font-family; $btn-font-size: $input-btn-font-size; $btn-line-height: $input-btn-line-height; $btn-white-space: null; // Set to `nowrap` to prevent text wrapping $btn-padding-y-sm: $input-btn-padding-y-sm; $btn-padding-x-sm: $input-btn-padding-x-sm; $btn-font-size-sm: $input-btn-font-size-sm; $btn-padding-y-lg: $input-btn-padding-y-lg; $btn-padding-x-lg: $input-btn-padding-x-lg; $btn-font-size-lg: $input-btn-font-size-lg; $btn-border-width: $input-btn-border-width; $btn-font-weight: $font-weight-normal; $btn-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075); $btn-focus-width: $input-btn-focus-width; $btn-focus-box-shadow: $input-btn-focus-box-shadow; $btn-disabled-opacity: .65; $btn-active-box-shadow: inset 0 3px 5px rgba($black, .125); $btn-link-color: $link-color; $btn-link-hover-color: $link-hover-color; $btn-link-disabled-color: $gray-600; // Allows for customizing button radius independently from global border radius $btn-border-radius: $border-radius; $btn-border-radius-sm: $border-radius-sm; $btn-border-radius-lg: $border-radius-lg; $btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; $btn-hover-bg-shade-amount: 15%; $btn-hover-bg-tint-amount: 15%; $btn-hover-border-shade-amount: 20%; $btn-hover-border-tint-amount: 10%; $btn-active-bg-shade-amount: 20%; $btn-active-bg-tint-amount: 20%; $btn-active-border-shade-amount: 25%; $btn-active-border-tint-amount: 10%; Миксины
Есть три миксина для кнопок: миксины для кнопок и вариантов контура кнопки (оба основаны на $theme-colors ), плюс миксин размера кнопки.
@mixin button-variant( $background, $border, $color: color-contrast($background), $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)), $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)), $hover-color: color-contrast($hover-background), $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)), $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)), $active-color: color-contrast($active-background), $disabled-background: $background, $disabled-border: $border, $disabled-color: color-contrast($disabled-background) ) color: $color; @include gradient-bg($background); border-color: $border; @include box-shadow($btn-box-shadow); &:hover color: $hover-color; @include gradient-bg($hover-background); border-color: $hover-border; > .btn-check:focus + &, &:focus color: $hover-color; @include gradient-bg($hover-background); border-color: $hover-border; @if $enable-shadows @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5)); > @else // Avoid using mixin so we can pass custom focus shadow properly box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5); > > .btn-check:checked + &, .btn-check:active + &, &:active, &.active, .show > &.dropdown-toggle color: $active-color; background-color: $active-background; // Remove CSS gradients if they're enabled background-image: if($enable-gradients, none, null); border-color: $active-border; &:focus @if $enable-shadows @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5)); > @else // Avoid using mixin so we can pass custom focus shadow properly box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5); > > > &:disabled, &.disabled color: $disabled-color; background-color: $disabled-background; // Remove CSS gradients if they're enabled background-image: if($enable-gradients, none, null); border-color: $disabled-border; > > @mixin button-outline-variant( $color, $color-hover: color-contrast($color), $active-background: $color, $active-border: $color, $active-color: color-contrast($active-background) ) color: $color; border-color: $color; &:hover color: $color-hover; background-color: $active-background; border-color: $active-border; > .btn-check:focus + &, &:focus box-shadow: 0 0 0 $btn-focus-width rgba($color, .5); > .btn-check:checked + &, .btn-check:active + &, &:active, &.active, &.dropdown-toggle.show color: $active-color; background-color: $active-background; border-color: $active-border; &:focus @if $enable-shadows @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5)); > @else // Avoid using mixin so we can pass custom focus shadow properly box-shadow: 0 0 0 $btn-focus-width rgba($color, .5); > > > &:disabled, &.disabled color: $color; background-color: transparent; > > @mixin button-size($padding-y, $padding-x, $font-size, $border-radius) padding: $padding-y $padding-x; @include font-size($font-size); // Manually declare to provide an override to the browser default @include border-radius($border-radius, 0); > Циклы
Варианты кнопок (для обычных и контурных кнопок) используют соответствующие миксины с нашей картой $theme-colors для генерации классов модификаторов в scss/_buttons.scss .
@each $color, $value in $theme-colors .btn-#$color> @include button-variant($value, $value); > > @each $color, $value in $theme-colors .btn-outline-#$color> @include button-outline-variant($value); > > - Разработан и построен с любовью в мире командой Bootstrap с помощью наших участников.
- Код под лицензией MIT, документация CC BY 3.0.
- Текущая версия v5.0.2.
Buttons
Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Examples
Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.
Primary Secondary Success Danger Warning Info Light Dark Link
type="button" class="btn btn-primary">Primary type="button" class="btn btn-secondary">Secondary type="button" class="btn btn-success">Success type="button" class="btn btn-danger">Danger type="button" class="btn btn-warning">Warning type="button" class="btn btn-info">Info type="button" class="btn btn-light">Light type="button" class="btn btn-dark">Dark type="button" class="btn btn-link">Link Conveying meaning to assistive technologies
Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .sr-only class.
Button tags
The .btn classes are designed to be used with the element. However, you can also use these classes on or elements (though some browsers may apply a slightly different rendering).
class="btn btn-primary" href="#" role="button">Link class="btn btn-primary" type="submit">Button class="btn btn-primary" type="button" value="Input"> class="btn btn-primary" type="submit" value="Submit"> class="btn btn-primary" type="reset" value="Reset">Outline buttons
In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the .btn-outline-* ones to remove all background images and colors on any button.
Primary Secondary Success Danger Warning Info Light Dark
type="button" class="btn btn-outline-primary">Primary type="button" class="btn btn-outline-secondary">Secondary type="button" class="btn btn-outline-success">Success type="button" class="btn btn-outline-danger">Danger type="button" class="btn btn-outline-warning">Warning type="button" class="btn btn-outline-info">Info type="button" class="btn btn-outline-light">Light type="button" class="btn btn-outline-dark">Dark Sizes
Fancy larger or smaller buttons? Add .btn-lg or .btn-sm for additional sizes.
Large button Large button
type="button" class="btn btn-primary btn-lg">Large button type="button" class="btn btn-secondary btn-lg">Large button Small button Small button
type="button" class="btn btn-primary btn-sm">Small button type="button" class="btn btn-secondary btn-sm">Small button Create block level buttons—those that span the full width of a parent—by adding .btn-block .
Block level button Block level button
type="button" class="btn btn-primary btn-lg btn-block">Block level button type="button" class="btn btn-secondary btn-lg btn-block">Block level button Active state
Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. There’s no need to add a class to s as they use a pseudo-class. However, you can still force the same active appearance with .active (and include the aria-pressed=»true» attribute) should you need to replicate the state programmatically.
href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link Disabled state
Make buttons look inactive by adding the disabled boolean attribute to any element.
Primary button Button
type="button" class="btn btn-lg btn-primary" disabled>Primary button type="button" class="btn btn-secondary btn-lg" disabled>Button href="#" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link href="#" class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link Link functionality caveat
Button plugin
Do more with buttons. Control button states or create groups of buttons for more components like toolbars.
Toggle states
Add data-toggle=»button» to toggle a button’s active state. If you’re pre-toggling a button, you must manually add the .active class and aria-pressed=»true» to the .
Single toggle
type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off"> Single toggle Checkbox and radio buttons
Bootstrap’s .button styles can be applied to other elements, such as s, to provide checkbox or radio style button toggling. Add data-toggle=»buttons» to a .btn-group containing those modified buttons to enable their toggling behavior via JavaScript and add .btn-group-toggle to style the s within your buttons. Note that you can create single input-powered buttons or groups of them.
The checked state for these buttons is only updated via click event on the button. If you use another method to update the input—e.g., with or by manually applying the input’s checked property—you’ll need to toggle .active on the manually.
Note that pre-checked buttons require you to manually add the .active class to the input’s .
class="btn-group-toggle" data-toggle="buttons"> class="btn btn-secondary active"> type="checkbox" checked autocomplete="off"> Checked Active Radio Radio
class="btn-group btn-group-toggle" data-toggle="buttons"> class="btn btn-secondary active"> type="radio" name="options" id="option1" autocomplete="off" checked> Active class="btn btn-secondary"> type="radio" name="options" id="option2" autocomplete="off"> Radio class="btn btn-secondary"> type="radio" name="options" id="option3" autocomplete="off"> Radio Methods
| Method | Description |
|---|---|
| $().button(‘toggle’) | Toggles push state. Gives the button the appearance that it has been activated. |
| $().button(‘dispose’) | Destroys an element’s button. |