Раздел «Bootstrap5 от нуля до мастера» 23 Использование компонента раскрывающегося меню Bootstrap5

Bootstrap

Это 23-й день моего участия в Gengwen Challenge.Подробности о мероприятии:Обновить вызов

"Bootstrap5 Zero Basic to Proficient" Я Лао Лю оригинал, и стремиться обновлять раздел каждый день.

23.1 Компонент раскрывающегося меню Bootstrap5

Выпадающее меню (Dropdowns) и выпадающий список (Select) в форме имеют много общего во внешнем виде, но принципиально различаются: выпадающий список использует форму Select, а выпадающее меню (Dropdowns ) использует div и css.

Выпадающие списки являются переключаемыми контекстными накладками для отображения связанных списков и многое другое. Они взаимодействуют с включенным плагином JavaScript JavaScript JavaScript. Они переключаются, щелкнув, не зависавшись; это намеренное решение для дизайна, и если вам нужно переключаться, он может быть сделан через JS.

23.2 Примеры

23.2.1 Одна кнопка

Оберните переключатели раскрывающегося меню (кнопки или ссылки) и раскрывающиеся меню в раскрывающийся список, и он станет раскрывающимся меню.

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

Любой отдельный .btn можно превратить в раскрывающийся список с некоторыми изменениями разметки. Вот как использовать их с элементом кнопки:

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>下拉菜单</title>
  </head>
  <body>
    <div class="container">
      <br><br><br>
      <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
        button下拉菜单
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
        <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><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">子菜单4</a></li>
        </ul>
        </div>

        <br><br><br>
        <div class="dropdown">
            <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
            a 链接下拉菜单
            </a>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                <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><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#">子菜单4</a></li>
            </ul>
            </div>
      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

2.1.png

Нет никакой разницы между двумя меню с точки зрения внешнего вида и опыта.

23.2.2 Группа кнопок

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

Использование группы кнопок очень простое, непосредственно<div class="dropdown">заменить<div class="btn-group">, ни одной кнопки в контейнере группы кнопок, это нужно отметить.

 <div class="btn-group">
              <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
              button下拉菜单
              </button>
              <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
              <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><hr class="dropdown-divider"></li>
              <li><a class="dropdown-item" href="#">子菜单4</a></li>
              </ul>
    </div>
   <div class="btn-group">
                  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                  a 链接下拉菜单
                  </a>
                  <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                      <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><hr class="dropdown-divider"></li>
                      <li><a class="dropdown-item" href="#">子菜单4</a></li>
                  </ul>
 </div>

2.2.png

23.2.3 Кнопка разделения

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

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

      <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
        普通下拉菜单
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
        <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>

        <br>
        <div class="btn-group">
            <button type="button" class="btn btn-secondary">分割下拉菜单</button>
            <button class="btn btn-secondary dropdown-toggle dropdown-toggle-split" type="button" data-bs-toggle="dropdown" aria-expanded="false">
            <span class="visually-hidden">Toggle Dropdown</span>
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
            <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>

2.3.png

23.3 Размер выпадающих меню

Добавив или к классу кнопки кнопки, вы можете установить размер кнопки.Хотя в примере используется группа кнопок, он также применим к одиночной кнопке и разделенной кнопке. Вот сравнение трех размеров кнопок:

        <div class="btn-group">
            <button class="btn btn-sm btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
            sm下拉菜单
            </button>
        </div>
        <div class="btn-group">
            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
            下拉菜单
            </button>
        </div>
        <div class="btn-group">
            <button class="btn btn-lg btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
            lg下拉菜单
            </button>
        </div>
        <div class="btn-group">
            <button class="btn btn-secondary btn-sm" type="button">
            sm分割按钮
            </button>
            <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
            <span class="visually-hidden">Toggle Dropdown</span>
            </button>
            </div>

13.3.1.png

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

23.4 Цвета выпадающих меню

Цвет раскрывающегося меню точно такой же, как и цвет кнопки, а следующие раскрывающиеся меню окрашены в разные цвета:

       <div class="btn-group">
            <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
              primary
            </button>
        </div>
        <div class="btn-group">
          <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
            secondary
          </button>
      </div>
      <div class="btn-group">
        <button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
          success
        </button>
    </div>
    <div class="btn-group">
      <button class="btn btn-danger dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
        danger
      </button>
    </div>
    <div class="btn-group">
      <button class="btn btn-warning dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
        warning
      </button>
    </div>
    <div class="btn-group">
      <button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
        info
      </button>
    </div>
    <div class="btn-group">
      <button class="btn btn-light dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
        light
      </button>
    </div>
    <div class="btn-group">
      <button class="btn btn-dark dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
        dark
      </button>
    </div>
    <div class="btn-group">
      <button class="btn btn-link dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
        link
      </button>
    </div>

13.4.1.png

23.5 Темный выпадающий список

23.5.1 Темный выпадающий список

Выберите более темное раскрывающееся меню, чтобы оно соответствовало темной панели навигации или пользовательскому стилю, добавивdropdown-menu-darkДобавить к существующемуdropdown-menu. Нет необходимости менять раскрывающиеся предметы.

<div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
        深色下拉菜单
        </button>
        <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
        <li><a class="dropdown-item active" href="#">Action选项1</a></li>
        <li><a class="dropdown-item" href="#">选项2</a></li>
        <li><a class="dropdown-item" href="#">选项3</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">选项4</a></li>
        </ul>
        </div>

13.5.1.png

23.5.2 Навигация с темными выпадающими списками

      <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container-fluid">
        <a class="navbar-brand" href="#">品牌</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
        <ul class="navbar-nav">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                深色下拉菜单
            </a>
            <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
                <li><a class="dropdown-item active" href="#">Action选项1</a></li>
                <li><a class="dropdown-item" href="#">选项2</a></li>
                <li><a class="dropdown-item" href="#">选项3</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#">选项4</a></li>
                </ul>
          </li>
        </ul>
        </div>
        </div>
        </nav>

13.5.2.png

23.6 Направление всплывающего окна пункта меню

Опция раскрывающегося меню по умолчанию — всплывающее по умолчанию, путем добавления в контейнер раскрывающегося менюdropup、dropstart、dropend, вы можете настроить всплывающие окна влево и вправо соответственно.

Использовать эти классы очень просто, просто добавьте их прямо в контейнер. Следует отметить, что эти настройки направления произносятся только при наличии достаточного места.Если всплывающее окно открыто, но места над ним недостаточно, оно автоматически изменится на всплывающее. Слева и справа тоже

<div class="text-center">
      <br><br><br><br><br><br>
      <div class="dropdown dropup">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
            向上
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
        <li><a class="dropdown-item active" href="#">子菜单1</a></li>
        <li><a class="dropdown-item" href="#">子菜单2</a></li>
        <li><a class="dropdown-item" href="#">子菜单3</a></li>
        </ul>
     </div> <br><br><br>

     <div class="dropdown dropstart">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
            向左
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
        <li><a class="dropdown-item active" href="#">子菜单1</a></li>
        <li><a class="dropdown-item" href="#">子菜单2</a></li>
        <li><a class="dropdown-item" href="#">子菜单3</a></li>
        </ul>
     </div>
     <br><br><br>
     <div class="dropdown dropend">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton3" data-bs-toggle="dropdown" aria-expanded="false">
            向右
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton3">
        <li><a class="dropdown-item active" href="#">子菜单1</a></li>
        <li><a class="dropdown-item" href="#">子菜单2</a></li>
        <li><a class="dropdown-item" href="#">子菜单3</a></li>
        </ul>
     </div>
    </div>

13.6.1.png

23.7 Пункты меню

23.7.1 Использование другого контента

В прошлом содержимое выпадающего меню должно было быть ссылкой, но Bootstrap5 уже не тот случай. Теперь вы можете использовать элемент кнопки в раскрывающемся меню, а не просто a.

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

<div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
        其他选项下拉菜单
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
        <li><button class="dropdown-item" type="button">按钮选项1</button></li>
        <li><button class="dropdown-item" type="button">按钮选项2</button></li>
        <li><span class="dropdown-item-text">文本选项</span></li>

        </ul>
        </div>

13.7.1.png

23.7.2 Активация деактивация

Добавьте активный элемент в раскрывающемся списке, чтобы сделать его активным. Добавьте отключено к элементу в раскрывающемся списке, чтобы сделать его отключенным.

      <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
        下拉菜单
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
        <li><a class="dropdown-item active" href="#">激活选项</a></li>
        <li><a class="dropdown-item" href="#">普通选项</a></li>
        <li><a class="dropdown-item disabled" href="#">禁用选项</a></li>
        </ul>
        </div>

13.7.2.png

23.7.3 Элементы меню, выровненные по правому краю

По умолчанию выпадающие меню автоматически располагаются на 100 % сверху родительского меню и вдоль левой стороны родительского меню. ты можешь поставитьdropdown-menu-endдобавить вdropdown-menuВыровняйте раскрывающееся меню по правому краю.

      <div class="btn-group">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
            菜单项右对齐 太短了看不出
        </button>
        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton1">
        <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><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">子菜单4</a></li>
        </ul>
        </div>

13.7.3.png

23.7.4 Выравнивание элементов меню по правому краю

Если вы хотите использовать адаптивное выравнивание, отключите динамическое позиционирование, добавив к кнопке атрибут data-bs-display="static" и используйте класс адаптивной переменной. Добавьте выпадающее меню{-sm|-md|-lg|-xl|-xxl}-end в выпадающее меню.

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>下拉菜单</title>
  </head>
  <body>
    <div class="container">
      <br><br><br>
      <div class="btn-group">
        <button class="btn btn-secondary dropdown-toggle" type="button"  data-bs-toggle="dropdown"  data-bs-display="static" aria-expanded="false">
            菜单项响应式右对齐，改变浏览器大小观看
        </button>
        <ul class="dropdown-menu dropdown-menu-lg-end" aria-labelledby="dropdownMenuButton1">
        <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><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">子菜单4</a></li>
        </ul>
        </div>
        
      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Это выравнивание по левому краю перед точкой останова lg и выравнивание по правому краю после точки останова.Это относительно просто и не будет продемонстрировано.Полный код предоставляется, если вам интересно, вы можете попробовать.

23.7.5 Размещение пунктов меню в формах

Поместите форму в раскрывающийся список или поместите ее в раскрывающийся список и используйте утилиту полей или отступов, чтобы дать ей необходимое отрицательное пространство.

      <div class="btn-group">
        <button class="btn btn-secondary dropdown-toggle" type="button"  data-bs-toggle="dropdown" aria-expanded="false">
            菜单项包含登录表单
        </button>
        <div class="dropdown-menu">
            <form class="px-4 py-3">
            <div class="mb-3">
            <label for="exampleDropdownFormEmail1" class="form-label">电子邮箱</label>
            <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
            </div>
            <div class="mb-3">
            <label for="exampleDropdownFormPassword1" class="form-label">密码</label>
            <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
            </div>
            <div class="mb-3">
            <div class="form-check">
              <input type="checkbox" class="form-check-input" id="dropdownCheck">
              <label class="form-check-label" for="dropdownCheck">
                记住状态
              </label>
            </div>
            </div>
            <button type="submit" class="btn btn-primary">登录</button>
            </form>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">还没账户，点此注册</a>
            <a class="dropdown-item" href="#">忘记密码</a>
        </div>
        </div>

13.7.5.png

Из-за нехватки места в этой статье кратко представлено раскрывающееся меню, которого обычно достаточно для общего использования.Если вам нужно более подробно понять использование раскрывающегося меню, см.Bootstrap китайская документация> Компоненты > Главы, связанные с выпадающим меню.

Сегодняшний курс здесь, пожалуйста, обратите на меня внимание и изучите использование компонента навигации по страницам Bootstrap5 в разделе 24 «Bootstrap5 Zero Basic to Mastery», первоначально написанном Лао Лю, Это также можно увидеть буквально, группа кнопок — это комбинация нескольких кнопок.

Если эта статья оказалась для вас полезной, не забудьте поставить лайк!

Категории