Bootstrap 下拉菜单

最新推荐文章于 2023-03-16 15:05:36 发布

fiona_0427

最新推荐文章于 2023-03-16 15:05:36 发布

阅读量434

点赞数

文章标签： html5 bootstrap 前端

本文链接：https://blog.csdn.net/fiona_0427/article/details/106265210

版权

1.使用：下拉菜单触发器和下拉菜单都包裹在 .dropdown 里（默认菜单向下弹出），如果想让菜单向上弹出 可以使用.dropup进行包裹。

2.可以使用caret字体图标为下拉菜单加上三角形标志，可以跟着dropdowm/up变三角形的方向

      <div class="dropdown">
          <button class="dropdown-toggle"  data-toggle="dropdown" id="m1">
             按钮1
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" aria-labelledby="m1">
            .....
          </ul>
      </div>
      <div class="dropup">
        <button class="dropdown-toggle"  data-toggle="dropdown" id="m1">
          按钮2
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="m1">
          ...
        </ul>
    </div>

效果：

3.使用aria-labelledby关联菜单和按钮，在有多个下拉菜单时，按钮与菜单可能会发生混乱，点击a按钮却打开b的菜单

可以对按钮设置id，将菜单的aria-labelledby属性值设置为id值，这样按钮与菜单就可以联系起来

      
          <button class="dropdown-toggle"  data-toggle="dropdown" id="m1">
           .......
          </button>
          <ul class="dropdown-menu" aria-labelledby="m1">
          .....
          </ul>
     

      
          <button class="dropdown-toggle"  data-toggle="dropdown" id="m2">
           .......
          </button>
          <ul class="dropdown-menu" aria-labelledby="m2">
          .....
          </ul>

4.可以使用 divider分割线为菜单项进行分割：

<ul class="dropdown-menu" aria-labelledby="m1">
            <li ><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li  class="divider"></li>
            <li><a href="#">3</a></li>
            <li ><a href="#">4</a></li>
 </ul>

效果：

5.设置dropdown-menu-right类会使菜单项靠右对齐（默认靠左），但有可能跑到下拉菜单父元素的外面

      <div class="dropdown">
        <button class="dropdown-toggle"  data-toggle="dropdown" id="m1">
          按钮2
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu   dropdown-menu-right" aria-labelledby="m1">
          <li ><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li  class="divider"></li>
          <li ><a href="#">4</a></li>
        </ul>
    </div>

效果：

6.li中均可通过添加标题来标明一组动作--dropdown-header --相当于菜单项的小标题

div class="dropdown">
          <button class="dropdown-toggle"  data-toggle="dropdown" id="m1">
            按钮1
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" aria-labelledby="m1">
            <li ><a href="#">1</a></li>
            <li class="dropdown-header"><a href="#">2</a></li>
            <li  class="divider"></li>
            <li><a href="#">3</a></li>
            <li ><a href="#">4</a></li>
          </ul>
      </div>

效果：

7.可以为下拉菜单中的 <li> 元素添加 .disabled 类，从而禁用相应的菜单项。

      <div class="dropdown">
          <button class="dropdown-toggle"  data-toggle="dropdown" id="m1">
            按钮1
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" aria-labelledby="m1">
            <li ><a href="#">1</a></li>
            <li class="disabled"><a href="#">2</a></li>
            <li  class="divider"></li>
            <li><a href="#">3</a></li>
            <li ><a href="#">4</a></li>
          </ul>
      </div>

效果：