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. |
Кнопки
Используйте стили кнопок 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’) | Уничтожает кнопку элемента (в элементе). |
Colors (цвета)
Передайте смысл через цвет с помощью нескольких полезных классов цвета. Также включает поддержку стилизации ссылок с помощью состояний наведения.
Содержание
Цвета
Раскрашивайте текст с помощью цветных утилит. Если вы хотите раскрасить ссылки, вы можете использовать .link-* вспомогательные классы, у которых есть :hover и :focus состояния.
p class="text-primary">.text-primaryp> p class="text-secondary">.text-secondaryp> p class="text-success">.text-successp> p class="text-danger">.text-dangerp> p class="text-warning bg-dark">.text-warningp> p class="text-info bg-dark">.text-infop> p class="text-light bg-dark">.text-lightp> p class="text-dark">.text-darkp> p class="text-body">.text-bodyp> p class="text-muted">.text-mutedp> p class="text-white bg-dark">.text-whitep> p class="text-black-50">.text-black-50p> p class="text-white-50 bg-dark">.text-white-50p>Фоновый цвет
Подобно классам цвета контекстного текста, легко установить фон элемента для любого контекстного класса. Фоновые утилиты не установлены color , поэтому в некоторых случаях вы захотите использовать .text-* утилиты.
.bg-вторичный
.bg-опасность
.bg-предупреждение
.bg-прозрачный
div class="p-3 mb-2 bg-primary text-white">.bg-primarydiv> div class="p-3 mb-2 bg-secondary text-white">.bg-secondarydiv> div class="p-3 mb-2 bg-success text-white">.bg-successdiv> div class="p-3 mb-2 bg-danger text-white">.bg-dangerdiv> div class="p-3 mb-2 bg-warning text-dark">.bg-warningdiv> div class="p-3 mb-2 bg-info text-body">.bg-infodiv> div class="p-3 mb-2 bg-light text-dark">.bg-lightdiv> div class="p-3 mb-2 bg-dark text-white">.bg-darkdiv> div class="p-3 mb-2 bg-white text-dark">.bg-whitediv> div class="p-3 mb-2 bg-transparent text-dark">.bg-transparentdiv>Фоновый градиент
При добавлении .bg-gradient класса к фону добавляется линейный градиент в качестве фонового изображения. Этот градиент начинается с полупрозрачного белого цвета, который постепенно исчезает к низу.
Вам нужен градиент в вашем собственном CSS? Просто добавь background-image: var(—bs-gradient); .
.bg-primary.bg-gradient
.bg-secondary.bg-gradient
.bg-success.bg-gradient
.bg-dangerous.bg-gradient
.bg-warning.bg-gradient
.bg-info.bg-gradient
.bg-light.bg-gradient
.bg-dark.bg-gradient
Работа со спецификой
Иногда контекстные классы не могут быть применены из-за специфики другого селектора. В некоторых случаях достаточно обойтись без содержимого вашего элемента в классе с классом.
Передача смысла вспомогательным технологиям
Использование цвета для добавления смысла обеспечивает только визуальную индикацию, которая не будет передана пользователям вспомогательных технологий, таких как программы чтения с экрана. Убедитесь, что информация, обозначенная цветом, либо очевидна из самого контента (например, видимый текст), либо включена с помощью альтернативных средств, таких как дополнительный текст, скрытый с .sr-only классом.
Разработан и построен с любовью к миру, командой Bootstrap и помощью наших участников.
В настоящее время v5.0.0-alpha1. Код под лицензией MIT, документы CC BY 3.0.
Недорогие домены, регистрация + продление: nadomen.ru
Перевод документации: Голягин Алексей
Компоненты
Более десятка повторно используемых компонентов построены так, чтобы обеспечить кнопки, выпадающие меню, группы ввода, навигации, оповещения, и многое другое.
Кнопки
Используйте 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.