Кнопки

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

Примеры

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

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

<button type="button" class="btn btn-link">Link</button>

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

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

Теги кнопки

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

При использовании классов кнопок для <a>элементов, которые используются для запуска функций на странице (например, для свертывания содержимого), а не для ссылок на новые страницы или разделы на текущей странице, этим ссылкам следует присваивать , role="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">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

Размеры

Хотите большие или маленькие пуговицы? Добавьте .btn-lgили .btn-smдля дополнительных размеров.

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

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

Создайте кнопки уровня блока — те, которые охватывают всю ширину родителя — путем добавления .btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>

Активное состояние

Кнопки будут казаться нажатыми, когда они активны, с более темным фоном, более темной рамкой и, когда тени включены, с внутренней тенью. Нет необходимости добавлять класс к <button>s, поскольку они используют псевдокласс . Однако вы по-прежнему можете принудительно использовать такой же активный внешний вид .active(и включить aria-pressed=“true”атрибут), если вам нужно программно реплицировать состояние.

<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>

Отключенное состояние

Чтобы кнопки выглядели неактивными, добавьте disabledлогический атрибут к любому <button>элементу.

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

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

• <a>s не поддерживают этот disabledатрибут, поэтому вы должны добавить .disabledкласс, чтобы он визуально казался отключенным.
• Некоторые удобные для будущего стили включены, чтобы отключить все pointer-eventsкнопки привязки. В браузерах, поддерживающих это свойство, вы вообще не увидите отключенный курсор.
• Использование отключенных кнопок <a>должно включать aria-disabled="true"атрибут для указания состояния элемента вспомогательным технологиям.
• Использование отключенных кнопок <a> не должно включать hrefатрибут.

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

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

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

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

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

Делайте больше с кнопками. Управляйте состояниями кнопок или создавайте группы кнопок для дополнительных компонентов, таких как панели инструментов.

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

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

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
  Single toggle
</button>

Флажок и радиокнопки

Стили Bootstrap .buttonможно применять к другим элементам, таким как <label>s, чтобы обеспечить переключение флажков или радиокнопок. Добавьте data-toggle="buttons"в , .btn-groupсодержащий эти измененные кнопки, чтобы включить их поведение переключения с помощью JavaScript, и добавьте .btn-group-toggle, чтобы стилизовать <input>s внутри ваших кнопок. Обратите внимание, что вы можете создавать отдельные кнопки с питанием от ввода или их группы.

Отмеченное состояние для этих кнопок обновляется только через clickсобытие на кнопке. Если вы используете другой метод для обновления ввода — например, с <input type="reset">помощью или вручную применяя checkedсвойство ввода — вам нужно будет включить .activeего <label>вручную.

Обратите внимание, что предварительно проверенные кнопки требуют, чтобы вы вручную добавили .activeкласс во входной файл <label>.

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked> Checked
  </label>
</div>

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3"> Radio
  </label>
</div>

Методы