Кнопки в 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>

Автор и редакторы

Автор: Йен Диксон
Последнее изменение: 12.03.2020
Редакторы: Влад Мержевич
Как научиться разрабатывать сайты