Рекомендации по курсам:

Список выпадающего меню Bootstrap 5

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

Пример

Выпадающее меню - это переключаемое меню, которое позволяет пользователю выбирать значения из предопределенного списка:
  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
  Кнопка прокрутки
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Ссылка 1</a></li>
    <li><a class="dropdown-item" href="#">Ссылка 2</a></li>
    <li><a class="dropdown-item" href="#">Ссылка 3</a></li>
  </ul>
</div>

Попробуйте сами

</button>

Пример объяснения .dropdown

Чтобы открыть выпадающее меню, используйте класс, указывающий на выпадающее меню. .dropdown-toggle 类和 класс и data-toggle="dropdown"

параметру кнопки или ссылки. .dropdown-menu класс к <div> элементы, можно физически собрать выпадающий список. Затем добавить .dropdown-item класс добавить к каждому элементу списка (ссылке или кнопке).

Разделитель списка

.dropdown-divider класс для разделения ссылок в выпадающем списке горизонтальной тонкой рамкой:

Пример

<li><hr class="dropdown-divider"></hr></li>

Попробуйте сами

Заголовок списка

.dropdown-header класс для добавления заголовков в выпадающий список:

Пример

<li><h5 class="dropdown-header">Заголовок списка 1</h5></li>

Попробуйте сами

отключенные и активные элементы

Используйте .active класс для подчеркивания определенного элемента списка (добавляет синий фоновый цвет).

Чтобы отключить определенный элемент списка, используйте .disabled класс (получает светло-серый текст и иконку "no-parking-sign" при наведении).

Пример

<li><a class="dropdown-item" href="#">Обычный</a></li>
<li><a class="dropdown-item active" href="#">Активен</a></li>
<li><a class="dropdown-item disabled" href="#">Отключен</a></li>

Попробуйте сами

положение списка

Вы также можете изменить .dropend или .dropstart класс добавить к элементам, чтобы создать меню "dropend" или "dropstart". Обратите внимание, что вставка/стрела добавляется автоматически:

Dropright

<div class="dropdown dropend">

Попробуйте сами

Dropleft

<div class="dropdown dropstart">

Попробуйте сами

Выравнивание списка вправо

Чтобы выровнять выпадающий список вправо, измените .dropdown-menu-end класс добавить к элементам .dropdown-menu элементы:

Пример

<div class="dropdown-menu dropdown-menu-end">

Попробуйте сами

Вверх

Если вы хотите, чтобы выпадающий список открывался向上, а не向下, измените элемент <div> с классом "dropdown" "dropup":

Пример

<div class="dropup">

Попробуйте сами

Текст списка выбора

.dropdown-item-text Класс используется для добавления чистого текста к элементам списка выбора или для добавления стандартного стиля ссылок к элементам.

Пример

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Ссылка 1</a></li>
  <li><a class="dropdown-item" href="#">Ссылка 2</a></li>
  <li><a class="dropdown-item" href="#">Ссылка 3</a></li>
  <li><a class="dropdown-item-text" href="#">Текстовая ссылка</a></li>
  <li><span class="dropdown-item-text">Чистый текст</span></li>
</ul>

Попробуйте сами

Комбинирование кнопок и списка выбора

Пример

<div class="btn-group">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Xiaomi</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Телефоны</a></li>
      <li><a class="dropdown-item" href="#">Таблеты</a></li>
    </ul>
  </div>
</div>

Попробуйте сами

Вертикальное组合ирование кнопок и списка выбора

Пример

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Xiaomi</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Телефоны</a></li>
      <li><a class="dropdown-item" href="#">Таблеты</a></li>
    </ul>
  </div>
</div>

Попробуйте сами