Кнопки
Используйте настраиваемые стили кнопок 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.