Bootstrap 5 Кнопки

Bootstrap 5 предоставляет кнопки с разными стилями.

Пример

<button type="button" class="btn">Базовая кнопка</button> <button type="button" class="btn btn-primary">Основная кнопка</button> <button type="button" class="btn btn-secondary">Вторичная кнопка</button> <button type="button" class="btn btn-success">Успех</button> <button type="button" class="btn btn-info">Информация</button> <button type="button" class="btn btn-warning">Предупреждение</button> <button type="button" class="btn btn-danger">Опасность</button> <button type="button" class="btn btn-dark">Тёмная</button> <button type="button" class="btn btn-light">Светлая</button> <button type="button" class="btn btn-link">Ссылка</button>

Попробуйте сами »

Классы кнопок можно использовать на элементах<a>, <button>, или<input>:

Пример

<a href="#" class="btn btn-info" role="button">Кнопка-ссылка</a> <button type="button" class="btn btn-info">Кнопка</button> <input type="button" class="btn btn-info" value="Кнопка ввода"> <input type="submit" class="btn btn-info" value="Кнопка отправки"> <input type="reset" class="btn btn-info" value="Кнопка сброса">

Попробуйте сами »

Контурная кнопка

Bootstrap 5 также позволяет задавать контуры кнопок, добавляя эффект подсветки при наведении мыши на кнопку.

Пример

<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-success">Успех</button> <button type="button" class="btn btn-outline-info">Информация</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-dark">Тёмная</button> <button type="button" class="btn btn-outline-light text-dark">Светлая</button>

Попробуйте сами »

Различные размеры кнопок

Bootstrap 5 позволяет задавать размер кнопок; используйте.btn-lgкласс, чтобы задать большие кнопки, используйте.btn-smкласс, чтобы задать маленькие кнопки:

Пример

<button type="button" class="btn btn-primary btn-lg">Большая кнопка</button> <button type="button" class="btn btn-primary">Кнопка по умолчанию</button> <button type="button" class="btn btn-primary btn-sm">Маленькая кнопка</button>

Попробуйте сами »

Кнопки уровня блока

Добавив.btn-blockкласс, можно задать кнопки блочного уровня,.d-gridкласс размещается на родительском элементе:

Пример

<div class="d-grid"> <button type="button" class="btn btn-primary btn-block">Кнопка 1</button> </div>

Попробуйте сами »

Если у вас несколько кнопок блочного уровня, можно использовать.gap-*класс, чтобы задать их:

Пример

<div class="d-grid gap-3"> <button type="button" class="btn btn-primary btn-block">Кнопка шириной 100%</button> <button type="button" class="btn btn-primary btn-block">Кнопка шириной 100%</button> <button type="button" class="btn btn-primary btn-block">Кнопка шириной 100%</button> </div>

Попробуйте сами »

Активные и отключенные кнопки

Кнопкам можно задать активное состояние или отключённое (некликабельное) состояние.

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

Пример

<button type="button" class="btn btn-primary active">Активная кнопка</button> <button type="button" class="btn btn-primary" disabled>Неактивная кнопка</button> <a href="#" class="btn btn-primary disabled">Неактивная ссылка</a>

Попробуйте сами »

Кнопки загрузки

Мы также можем сделать кнопку в состоянии загрузки.

Пример

<button class="btn btn-primary"> <span class="spinner-border spinner-border-sm"></span> </button> <button class="btn btn-primary"> <span class="spinner-border spinner-border-sm"></span> Загрузка.. </button> <button class="btn btn-primary" disabled> <span class="spinner-border spinner-border-sm"></span> Загрузка.. </button> <button class="btn btn-primary" disabled> <span class="spinner-grow spinner-grow-sm"></span> Загрузка.. </кнопка>

Попробуйте сами »
Другие расширения