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

Як створити випадаючі меню Bootstrap 5?

4

Ми вже зачіпали випадаючий компонент у нашому попередньому посібнику з кнопок Bootstrap. Випадаючий список – це не що інше, як кнопка (або посилання) і відображається список при натисканні на неї. У цьому підручнику давайте розглянемо різні типи випадаючих меню Bootstrap 5 з прикладами. Не забудьте включити bootstrap.bundled.min.js, щоб випадне меню працювало. Ви можете переглянути шаблон початківця тут.

Підручник із випадаючих меню Bootstrap 5

  1. Основні функції випадаючих меню
  2. Створення випадаючої кнопки за замовчуванням
  3. Додавання дільника
  4. Вимкнення посилання у спадному меню
  5. Випадаючий список з вирівнюванням меню праворуч
  6. Випадаюча кнопка із заголовком
  7. Розмір випадаючої кнопки
  8. Роздільна кнопка випадаючого меню
  9. Розділити кнопку випадання
  10. Точки, які слід запам’ятати

1 Основи Bootstrap 5 Випадаючі меню

  • Випадаючі списки – це перемикання списку посилань або елементів кнопок, показаних у напрямку вгору або вниз.
  • Зазвичай це використовується для випадаючих або випадаючих пунктів меню та елементів навігації на бічній панелі.
  • Він працює на основі сценарію Popper.js.
  • Ви повинні включити popper.min.js, а потім bootstrap.min.js у тій же послідовності. Використовуйте всі приклади цього підручника разом із нашим шаблоном для початківців.
  • За замовчуванням до випадаючого елемента не буде додано атрибутів "role" або "aria-". Ви повинні вставляти вручну, де це потрібно.
  • Випадаючі елементи можна закрити, натиснувши кнопку або натиснувши назовні. Ви також можете скористатися клавішею «Esc», щоб закрити випадаючі елементи.

2 Створення випадаючої кнопки за замовчуванням

Нижче наведено код для створення випадаючого списку за замовчуванням у Bootstrap 5:

<div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownmenu" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown Button </button> <div class="dropdown-menu" aria-labelledby="dropdownmenu"> <a class="dropdown-item" href="#">Dropdown One</a> <a class="dropdown-item" href="#">Dropdown Two</a> <a class="dropdown-item" href="#">Dropdown Three</a> </div> </div>

Він видасть у браузері такий результат:

Як створити випадаючі меню Bootstrap 5?

  • В основному вам потрібно обернути вміст всередину div за допомогою класу “.dropdown". Це буде ідентифікувати кнопку як випадаючу кнопку. Ви також можете використовувати тег замість кнопки.
  • Кнопку (або посилання) потрібно включити до класу “.dropdown-toggle”. У цьому прикладі ми використовували клас “btn-primary” для створення кнопки з основним кольором. Ви можете використовувати будь -який клас утиліти кольорів, щоб мати кнопку іншого кольору.
  • Після кнопки створіть випадаюче меню з пунктами.

3 Додавання роздільників у випадаючому списку

Тепер ви знаєте, як створити основну кнопку випадаючого меню. Давайте додамо деякі декоративні речі, такі як додавання роздільника між пунктами меню та заголовком.

<div class="dropdown"> <button class="btn btn-info dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown Button </button> <div class="dropdown-menu" aria-labelledby="dropdownmenu"> <h6 class="dropdown-header">Dropdown Header</h6> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Dropdown One</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Dropdown Two</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Dropdown Three</a> </div> </div>

Випадаюче меню виглядатиме так:

Як створити випадаючі меню Bootstrap 5?

4 Відключення посилання у випадаючому елементі

Ви можете вимкнути елемент у спадному меню, щоб запобігти натисканню:

<div class="dropdown"> <button class="btn btn-info dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown Button </button> <div class="dropdown-menu" aria-labelledby="dropdownmenu"> <a class="dropdown-item" href="#">Dropdown One</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Dropdown Two</a> <div class="dropdown-divider"></div> <a class="dropdown-item disabled" href="#">Dropdown Three</a> </div> </div>

Ми використали кнопку інформації та відключили третє посилання. Наведення курсору миші на відключене посилання покаже символ курсору зупинки, і ви не зможете натиснути на нього.

Як створити випадаючі меню Bootstrap 5?

5 Випадаюче меню з вирівнюванням меню праворуч

Як ви помітили у наведених вище прикладах, меню за замовчуванням відображатиметься з вирівнюванням за лівим краєм. Ви можете змінити його на праворучне вирівнювання, додавши клас “.dropdown-menu-right” разом із класом “.dropdown-menu”. Пам’ятайте, що це змістить повне поле меню праворуч від контейнера. Вам слід використовувати додаткові стилі CSS, щоб правильно розмістити меню під елементом кнопки випадаючого меню.

<div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown Button Alignment Right </button> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownmenu"> <a class="dropdown-item" href="#">Dropdown One</a> <a class="dropdown-item" href="#">Dropdown Two</a> <a class="dropdown-item" href="#">Dropdown Three</a> </div> </div>

Пункти меню, вирівняні по правому краю, виглядатимуть так:

Як створити випадаючі меню Bootstrap 5?

6 Випадаюча кнопка з заголовком

Ви також можете додати текст заголовка всередині пунктів меню за допомогою класу “.dropdown-header” з будь-яким з тегів H1-H6. Як правило, заголовок додається у верхній частині меню і його не можна натискати.

<div class="dropdown"> <button class="btn btn-warning dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown Button </button> <div class="dropdown-menu" aria-labelledby="dropdownmenu"> <h5 class="dropdown-header" href="#">Dropdown Header</h5> <a class="dropdown-item" href="#">Dropdown One</a> <a class="dropdown-item" href="#">Dropdown Two</a> </div> </div>

Випадаючий список із заголовком дасть такий результат:

Як створити випадаючі меню Bootstrap 5?

7 Розмір випадаючої кнопки

Зробіть спальну кнопку великою або маленькою за допомогою класів “.btn-lg” та “.btn-sm”, як показано нижче:

<div class="btn-group"> <button class="btn btn-danger btn-lg dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown Button </button> <div class="dropdown-menu" aria-labelledby="dropdownmenu"> <a class="dropdown-item" href="#">Dropdown One</a> <a class="dropdown-item" href="#">Dropdown Two</a> <a class="dropdown-item" href="#">Dropdown Three</a> </div> </div> <div class="btn-group"> <button class="btn btn-danger btn-sm dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown Button </button> <div class="dropdown-menu" aria-labelledby="dropdownmenu"> <a class="dropdown-item" href="#">Dropdown One</a> <a class="dropdown-item" href="#">Dropdown Two</a> <a class="dropdown-item" href="#">Dropdown Three</a> </div> </div>

Зауважте, ми використовували дві групи кнопок, щоб показати дві кнопки вбудованими, якщо ви хочете показати лише одну кнопку (скажімо велику), то ви можете використовувати клас “.dropdown” за замовчуванням.

Нижче показані великі та малі випадаючі кнопки:

Як створити випадаючі меню Bootstrap 5?

8 Роздільна кнопка випадаючого меню

Наразі ми бачили різні типи випадаючого списку як одну кнопку. Кнопка розділення має дві частини, тому вам слід використовувати групу кнопок, щоб показати їх вбудованими без розривів. Розщеплення двох кнопок здійснюється за допомогою класів css “.dropdown-toggle-split”.

<div class="btn-group"> <button type="button" class="btn btn-secondary">Split Button</button> <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Dropdown Button Group</span> </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Dropdown One</a> <a class="dropdown-item" href="#">Dropdown Two</a> <a class="dropdown-item" href="#">Dropdown Three</a> </div> </div>

Випадаюча кнопка поділу виглядатиме так:

Як створити випадаючі меню Bootstrap 5?

9 Кнопка "Розділити"

Це просто випадаючий стиль замість випадаючого списку за замовчуванням за допомогою класу “.dropup”.

<div class="btn-group dropup"> <button type="button" class="btn btn-warning">Split Dropup Button</button> <button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Dropdown Button Group</span> </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Dropdown One</a> <a class="dropdown-item" href="#">Dropdown Two</a> <a class="dropdown-item" href="#">Dropdown Three</a> </div> </div>

Кнопка поділу розкриття виглядатиме так:

Як створити випадаючі меню Bootstrap 5?

10 важливих моментів, які слід пам’ятати

Випадаюче меню автоматично відображатиметься вниз або вгору залежно від області перегляду веб -переглядача. Наприклад, коли ви знаходитесь в кінці сторінки, пункти випадаючого меню відображатимуться вище, як випадаюче меню.

Елемент кнопки у випадаючому списку підтримує всі класи утиліти кольору фону, подібні до компонента кнопки за замовчуванням. Bootstrap 3 підтримує лише посилання для пунктів меню. Але в Bootstrap 4 і 5 кожен пункт меню може бути посиланням або елементом кнопки.


Вивчити Bootstrap 5 (індекс )


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

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