Кнопки

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

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

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

Кнопки-теги

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

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

<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-*, чтобы удалить все фоновые изображения и цвета на любой кнопке.

<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">Большая кнопка</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>

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

<button type="button" class="btn btn-primary btn-lg btn-block">Кнопка блочного уровня</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Кнопка блочного уровня</button>

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

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

<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Первичная ссылка</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Ссылка</a>

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

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

<button type="button" class="btn btn-lg btn-primary" disabled>Первичная кнопка</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Кнопка</button>

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

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

<a class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Первичная ссылка</a>
<a class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Ссылка</a>

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

Чтобы охватить случаи, когда вам нужно сохранить атрибут href в отключенной ссылке, класс .disabled использует pointer-events: none, чтобы попытаться отключить функциональность ссылки для <a>. Обратите внимание, что это свойство 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">Первичная ссылка</a>
<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Ссылка</a>

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

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

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

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

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
  Одиночный переключатель
</button>

Кнопки флажки и переключатели

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

Проверенное состояние для этих кнопок обновляется только через событие 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> Выбрано
  </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> Активная
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2"> Переключатель
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3"> Переключатель
  </label>
</div>

Методы