Кнопки

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

На этой странице

Примеры

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

<buttontype="button"class="btn btn-primary">Primary</button><buttontype="button"class="btn btn-secondary">Secondary</button><buttontype="button"class="btn btn-success">Success</button><buttontype="button"class="btn btn-danger">Danger</button><buttontype="button"class="btn btn-warning">Warning</button><buttontype="button"class="btn btn-info">Info</button><buttontype="button"class="btn btn-light">Light</button><buttontype="button"class="btn btn-dark">Dark</button><buttontype="button"class="btn btn-link">Link</button>

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

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

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

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

Тэг «кнопка»

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

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

Link

<aclass="btn btn-primary"href="#"role="button">Link</a><buttonclass="btn btn-primary"type="submit">Button</button><inputclass="btn btn-primary"type="button"value="Input"><inputclass="btn btn-primary"type="submit"value="Submit"><inputclass="btn btn-primary"type="reset"value="Reset">

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

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

<buttontype="button"class="btn btn-outline-primary">Primary</button><buttontype="button"class="btn btn-outline-secondary">Secondary</button><buttontype="button"class="btn btn-outline-success">Success</button><buttontype="button"class="btn btn-outline-danger">Danger</button><buttontype="button"class="btn btn-outline-warning">Warning</button><buttontype="button"class="btn btn-outline-info">Info</button><buttontype="button"class="btn btn-outline-light">Light</button><buttontype="button"class="btn btn-outline-dark">Dark</button>

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

Размеры

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

<buttontype="button"class="btn btn-primary btn-lg">Large button</button><buttontype="button"class="btn btn-secondary btn-lg">Large button</button>

<buttontype="button"class="btn btn-primary btn-sm">Small button</button><buttontype="button"class="btn btn-secondary btn-sm">Small button</button>

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

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

<buttontype="button"class="btn btn-lg btn-primary"disabled>Primary button</button><buttontype="button"class="btn btn-secondary btn-lg"disabled>Button</button>

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

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

Primary link Link

<ahref="#"class="btn btn-primary btn-lg disabled"tabindex="-1"role="button"aria-disabled="true">Primary link</a><ahref="#"class="btn btn-secondary btn-lg disabled"tabindex="-1"role="button"aria-disabled="true">Link</a>

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

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

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

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

<divclass="d-grid gap-2"><buttonclass="btn btn-primary"type="button">Button</button><buttonclass="btn btn-primary"type="button">Button</button></div>

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

<divclass="d-grid gap-2 d-md-block"><buttonclass="btn btn-primary"type="button">Button</button><buttonclass="btn btn-primary"type="button">Button</button></div>

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

<divclass="d-grid gap-2 col-6 mx-auto"><buttonclass="btn btn-primary"type="button">Button</button><buttonclass="btn btn-primary"type="button">Button</button></div>

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

<divclass="d-grid gap-2 d-md-flex justify-content-md-end"><buttonclass="btn btn-primary me-md-2"type="button">Button</button><buttonclass="btn btn-primary"type="button">Button</button></div>

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

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

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

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

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

<buttontype="button"class="btn btn-primary"data-bs-toggle="button"autocomplete="off">Toggle button</button><buttontype="button"class="btn btn-primary active"data-bs-toggle="button"autocomplete="off"aria-pressed="true">Active toggle button</button><buttontype="button"class="btn btn-primary"disableddata-bs-toggle="button"autocomplete="off">Disabled toggle button</button>

Toggle link Active toggle link Disabled toggle link

<ahref="#"class="btn btn-primary"role="button"data-bs-toggle="button">Toggle link</a><ahref="#"class="btn btn-primary active"role="button"data-bs-toggle="button"aria-pressed="true">Active toggle link</a><ahref="#"class="btn btn-primary disabled"tabindex="-1"aria-disabled="true"role="button"data-bs-toggle="button">Disabled toggle link</a>

Методы

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

varbutton=document.getElementById('myButton')varbsButton=newbootstrap.Button(button)

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

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

varbuttons=document.querySelectorAll('.btn')buttons.forEach(function(button){varbutton=newbootstrap.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:inset01px0rgba($white,.15),01px1pxrgba($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:inset03px5pxrgba($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.15sease-in-out,background-color.15sease-in-out,border-color.15sease-in-out,box-shadow.15sease-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,000$btn-focus-widthrgba(mix($color,$border,15%),.5));}@else{// Avoid using mixin so we can pass custom focus shadow properly
box-shadow:000$btn-focus-widthrgba(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,000$btn-focus-widthrgba(mix($color,$border,15%),.5));}@else{// Avoid using mixin so we can pass custom focus shadow properly
box-shadow:000$btn-focus-widthrgba(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:000$btn-focus-widthrgba($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,000$btn-focus-widthrgba($color,.5));}@else{// Avoid using mixin so we can pass custom focus shadow properly
box-shadow:000$btn-focus-widthrgba($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,$valuein$theme-colors{.btn-#{$color}{@include button-variant($value,$value);}}@each$color,$valuein$theme-colors{.btn-outline-#{$color}{@include button-outline-variant($value);}}

Пример кнопки с иконкой

Используйте Bootstrap иконки.

<buttontype="button"class="btn btn-primary"><iclass="bi bi-cloud-upload-fill"></i> Кнопка с иконкой
</button>