Кнопки 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-success">Кнопка-ссылка</a>
<button type="button" class="btn btn-success">Кнопка</button>
<input type="button" class="btn btn-success" value="Ввести">
<input type="submit" class="btn btn-success" value="Подтвердить">
<input type="reset" class="btn btn-success" value="Очистить">

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

Почему мы пишем # в свойстве href ссылки?

Поскольку у нас нет никаких страниц, к которым можно было бы перейти, и мы не хотим получать сообщение "404", мы используем # в качестве ссылки. В реальной жизни это должен быть настоящий URL страницы "поиска".

кнопки профиля

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>

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

размеры кнопок

для больших кнопок .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>

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

блоковая кнопка

Если нужно создать блоковую кнопку, занимающую всю ширину родительского элемента, то используйте на родительском элементе .d-grid "helper" класс:

Пример

<div class="d-grid">
  <button type="button" class="btn btn-primary btn-block">Кнопка полного размера</button>
</div>

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

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

Пример

<div class="d-grid gap-3">
  <button type="button" class="btn btn-primary btn-block">Кнопка полного размера</button>
  <button type="button" class="btn btn-primary btn-block">Кнопка полного размера</button>
  <button type="button" class="btn btn-primary btn-block">Кнопка полного размера</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>

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

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

Вы также можете добавить "spinner" к кнопке, о чем вы узнаете больше в нашем курсе по BS5 Spinner:

Пример

<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>
  Загрузка...
</button>

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