Как создавать кнопки в Bootstrap 5?
Кнопки – один из основных элементов любой инфраструктуры пользовательского интерфейса. В другой нашей статье мы видели много примеров кнопок Bootstrap 3. В Bootstrap 4 внесены незначительные изменения в классы кнопок для улучшения взаимодействия с пользователем. Например, класс кнопки по умолчанию «.btn-dafault» заменяется на дополнительную кнопку с классом «.btn-secondary», а дополнительный класс маленькой кнопки «.btn-xs» удаляется. Изменений не так много. к кнопкам в Bootstrap 5. В этом руководстве мы подробнее рассмотрим создание различных типов кнопок с помощью Bootstrap 5.
Основы кнопок Bootstrap
Перед созданием кнопок запомните следующие моменты:
- Чтобы идентифицировать любой элемент как кнопку, вам нужно включить как минимум класс «.btn».
- Дополнительные классы будут определять только дальнейший стиль кнопки в дополнение к классу «.btn».
- Класс «.btn» можно добавить к элементам HTML, например
- Файлы сценария начальной загрузки нужны только для раздела «Плагины начальной загрузки» для создания эффекта переключения, другие кнопки будут просто работать с CSS. Дополнительные сведения см. В начальном шаблоне Bootstrap 5.
Основные кнопки по умолчанию
Вы можете создавать кнопки разных цветов, используя вспомогательные классы фона для класса «.btn».
- Основная – это основная или основная кнопка синего цвета.
- Вторичная – кнопка белого цвета является дополнительной или альтернативной кнопкой.
- Успех – зеленая кнопка, используемая для позитивных действий.
- Информация – Голубая кнопка используется для отображения информации.
- Предупреждение – желтая кнопка используется для предупреждающих действий.
- Опасно – красная кнопка используется для действий при ошибке.
- Light – кнопка светло-серого цвета.
- Темный – кнопка с темным фоном.
- Ссылка – помимо цветов фона, вы также можете создать кнопку ссылки без фона.
Код основной кнопки должен выглядеть так:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>
<!-- Start of Button -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- End of Button -->
<!-- Bootstrap 5 Scripts -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>Как объяснялось, класс «.btn» идентифицирует элемент как кнопку, а класс «.btn-primary» используется для создания кнопки основного (синего) цвета. Аналогично другие коды кнопок приведены ниже:
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-light">Light Button</button>
<button type="button" class="btn btn-dark">Dark Button</button>
<button type="button" class="btn btn-link">Link</button>Последний элемент – это кнопка ссылки, которая будет выглядеть как отображаемая текстовая ссылка, но при нажатии или наведении на нее действует как кнопка. Кнопки по умолчанию в браузере будут выглядеть следующим образом:
Теги кнопок – использование классов кнопок с разными тегами
Классы кнопок поддерживаются в
Источник записи: www.webnots.com