Кнопки

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

Теги кнопки

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

<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" autocomplete="off">
  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 autocomplete="off"> 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" autocomplete="off" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
  </label>
</div>

Методы