Как создавать кнопки в Bootstrap 5?

<

div itemprop=»articleBody»>

Кнопки — один из основных элементов любой инфраструктуры пользовательского интерфейса. В другой нашей статье мы видели много примеров кнопок Bootstrap 3. В Bootstrap 4 внесены незначительные изменения в классы кнопок для улучшения взаимодействия с пользователем. Например, класс кнопки по умолчанию «.btn-dafault» заменяется на дополнительную кнопку с классом «.btn-secondary», а дополнительный класс маленькой кнопки «.btn-xs» удаляется. В Bootstrap 5 не так много изменений в кнопках. В этом руководстве мы подробнее рассмотрим создание различных типов кнопок с помощью Bootstrap 5.

Основы кнопок Bootstrap

Перед созданием кнопок запомните следующие моменты:

Основные кнопки по умолчанию

Вы можете создавать кнопки разных цветов, используя вспомогательные классы фона для класса «.btn».

Код основной кнопки должен выглядеть так:

<!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>

Последний элемент — это кнопка ссылки, которая будет выглядеть как отображаемая текстовая ссылка, но при нажатии или наведении на нее действует как кнопка. Кнопки по умолчанию в браузере будут выглядеть следующим образом:

Bootstrap 4 кнопки с разными цветами фона

Теги кнопок — использование классов кнопок с разными тегами

Классы кнопок поддерживаются в элементах

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован.