TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

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

134

Кнопки – один из основных элементов любой инфраструктуры пользовательского интерфейса. В другой нашей статье мы видели много примеров кнопок 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>

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

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

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

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

Источник записи: www.webnots.com

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. Принимаю Подробнее