Кнопки в Bootstrap 4

Bootstrap 4 предоставляет девять предопределённых стилей для кнопок, каждый из этих стилей служит разным семантическим целям. Для стилизации кнопки используйте класс .btn, а затем нужный стиль. Например, class="btn btn-primary" приводит к главной кнопке.

Вот код, используемый для всех девяти стилей кнопок.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<button type="button" class="btn btn-primary">Главная</button>
<button type="button" class="btn btn-secondary">Вторичная</button>
<button type="button" class="btn btn-info">Информация</button>
<button type="button" class="btn btn-success">Успех</button>
<button type="button" class="btn btn-warning">Предупреждение</button>
<button type="button" class="btn btn-danger">Опасность</button>
<button type="button" class="btn btn-light">Светлая</button>
<button type="button" class="btn btn-dark">Тёмная</button>
<button type="button" class="btn btn-link">Ссылка</button>

Bootstrap 4 против Bootstrap 3
Bootstrap 4 ввёл классы .btn-secondary, .btn-light и .btn-dark.

Из Bootstrap 4 исключён класс .btn-default, который входил в классы семантических кнопок Bootstrap 3.

Элементы кнопок
Стили кнопок Bootstrap 4 ориентированы на использование с элементом <button>, но их также можно применять к элементам <input> и <a>. Вы также можете применять стили кнопок к элементу <label> при работе с переключателями и флажками (подробнее об этом ниже).

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<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="Отправить">

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

Рекомендуется использовать элемент <button> при возможности, так как он лучше всего согласован во всех браузерах.

Контурные кнопки
Используйте классы .btn-outline-* для добавления семантического цвета только к контуру.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<button type="button" class="btn btn-outline-primary">Главная</button>
<button type="button" class="btn btn-outline-secondary">Вторичная</button>
<button type="button" class="btn btn-outline-info">Информация</button>
<button type="button" class="btn btn-outline-success">Успех</button>
<button type="button" class="btn btn-outline-warning">Предупреждение</button>
<button type="button" class="btn btn-outline-danger">Опасность</button>
<button type="button" class="btn btn-outline-light">Светлая</button>
<button type="button" class="btn btn-outline-dark">Тёмная</button>

Bootstrap 4 против Bootstrap 3
Контурные кнопки являются новыми в Bootstrap 4.

Для кнопок-ссылок нет контура (иными словами, класса .btn-outline-link не существует).

Размер кнопки
Вы можете указать размер кнопки через классы .btn-lg и .btn-sm. Добавьте их к другим классам кнопок, вроде этого.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<button type="button" class="btn btn-success btn-sm">Маленькая</button>
<button type="button" class="btn btn-success">По умолчанию</button>
<button type="button" class="btn btn-success btn-lg">Большая</button>

Bootstrap 4 против Bootstrap 3
Из Bootstrap 4 исключён класс .btn-xs для сверхмаленьких кнопок.

Блочные кнопки
Блочная кнопка занимает всю ширину своего родителя. Вы можете создать блочную кнопку, добавив класс .btn-block.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<button type="button" class="btn btn-danger btn-lg btn-block">Блочная кнопка</button>

Отключенные кнопки
Bootstrap предлагает определённые стили для состояния disabled (а также для других состояний, например, active). Если нужно отключить кнопку, которая использует элемент <a>, вы можете добавить класс .disabled.

Не нужно делать это на кнопках, сделанных через элементы <button> и <input>. Чтобы отключить такие кнопки воспользуйтесь стандартным атрибутом disabled в HTML.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<p><a href="#" class="btn btn-primary btn-lg disabled" role="button">Элемент a</a></p>
<p><button type="button" class="btn btn-lg btn-primary" disabled="disabled">Элемент button</button></p>
<p><input type="button" class="btn btn-lg btn-primary" disabled="disabled" value="Элемент input"></p>

Bootstrap использует pointer-events: none для отключения кнопок-ссылок (таких кнопок, которые созданы с помощью элемента <a>). Это работает в большинстве случаев, но не во всех. Следовательно, вы также должны использовать JavaScript, чтобы отключить функциональность кнопок-ссылок (или при возможности просто воспользоваться элементом <button>).

Переключатели и флажки
Вы можете применить стили кнопок Bootstrap 4 к переключателям и флажкам для создания возможности переключения. Для этого вложите переключатели или флажки в элемент <label>, к которому применяется соответствующий класс кнопок. Кроме этого, вложите <label> в элемент с классом .btn-group, к которому применяется data-toggle="buttons".

Переключатели
Пощёлкайте по кнопкам, чтобы увидеть эффект переключения.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" name="options" id="option1" autocomplete="off" checked> Ботинки
</label>
<label class="btn btn-primary">
<input type="checkbox" name="options" id="option2" autocomplete="off"> Обувь
</label>
<label class="btn btn-primary">
<input type="checkbox" name="options" id="option3" autocomplete="off"> Ноги
</label>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Флажки
Пощёлкайте по кнопкам, чтобы увидеть эффект переключения.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Ботинки
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2" autocomplete="off"> Обувь
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3" autocomplete="off"> Ноги
</label>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>