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

Як створити кнопки в Bootstrap 5?

30

Кнопки є одним з базових елементів будь -якого фреймворка інтерфейсу користувача. В іншій нашій статті ми бачили багато прикладів кнопок Bootstrap 3. У Bootstrap 4 відбуваються незначні зміни в класах кнопок для покращення користувацького досвіду. Наприклад, клас кнопок за замовчуванням “.btn-dafault" змінюється на вторинну кнопку з класом “.btn-secondary”, а клас надзвичайно маленької кнопки “.btn-xs” випадає. до кнопок у Bootstrap 5. У цьому підручнику давайте детальніше вивчимо створення різних типів кнопок за допомогою Bootstrap 5.

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

Перш ніж створювати кнопки, пам’ятайте про такі моменти:

  • Для того, щоб ідентифікувати будь -який елемент як кнопку, вам потрібно включити клас ".btn" як мінімум.
  • Додаткові класи лише визначатимуть подальший стиль кнопки на додаток до класу “.btn”.
  • Клас “.btn” можна додати до таких елементів HTML, як
  • Вам потрібні файли сценарію Bootstrap лише для розділу “Bootstrap Plugins”, щоб створити ефект перемикання, інші кнопки просто працюватимуть із CSS. Для отримання детальнішої інформації зверніться до початкового шаблону Bootstrap 5.

Основні кнопки за замовчуванням

Ви можете створити різні кольори кнопок за допомогою фонових класів утиліти до класу “.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 5?

Теги кнопок – Використання класів кнопок з різними тегами

Класи кнопок підтримуються в

Джерело запису: www.webnots.com
Залиште відповідь

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі