Кнопки Bootstrap 4

Используйте настраиваемые стили кнопок 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> (хотя из-за этого некоторые браузеры могут рендерить это немного иначе).

При использовании классов .btn в элементах <a>, которые в данном случае используются не как линк, ведущий на новые страницы или как якорь, а как триггер внутристраничной функциональности (такой как сворачивание содержимого), необходимо задать этим <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">Большая кнопка</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>

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

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

<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>

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

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

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

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

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

Переключатели («галочки») и «кнопки радио»

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

Состояние выбора (т.е. когда ставится «галочка») обновляется лишь событием клика 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>

Методы