Bootstrap下拉菜单


基本样式示例

将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里

   <div class="dropdown">
        <button class="btn btn-default "  id="dropdownMenu1" data-toggle="dropdown" >
          更多城市
          <span class="caret "></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
          <li><a href="">广州</a></li>
          <li><a href="">深圳</a></li>
          <li><a href="">东莞</a></li>
        </ul>   
   </div> 

这里写图片描述


dropup 让菜单向上弹出

通过为下拉菜单的父元素设置 .dropup 类,可以让菜单向上弹出(默认是向下弹出的)。

   <div class="dropup">
        <button class="btn btn-default "  id="dropdownMenu1" data-toggle="dropdown" >
          更多城市
          <span class="caret "></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
          <li><a href="">广州</a></li>
          <li><a href="">深圳</a></li>
          <li><a href="">东莞</a></li>
        </ul>   
   </div>

这里写图片描述


对齐dropdown-menu-right和dropdown-menu-left

默认情况下,下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。 为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐。

<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
  ...
</ul>

标题dropdown-header

在任何下拉菜单中均可通过添加标题来标明一组动作。

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="dropdown-header">Dropdown header</li>
  ...
</ul>
   <div class="dropdown">
        <button class="btn btn-default "  id="dropdownMenu1" data-toggle="dropdown" >
          更多城市
          <span class="caret "></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
          <li class="dropdown-header">广东省</li>
          <li><a href="">广州</a></li>
          <li><a href="">深圳</a></li>
          <li><a href="">东莞</a></li>
        </ul>   
   </div>  

这里写图片描述


分割线divider

为下拉菜单添加一条分割线,用于将多个链接分组。

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>
   <div class="dropdown">
        <button class="btn btn-default "  id="dropdownMenu1" data-toggle="dropdown" >
          更多城市
          <span class="caret "></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
          <li class="dropdown-header">广东省</li>
          <li><a href="">广州</a></li>
          <li><a href="">深圳</a></li>
          <li><a href="">东莞</a></li>
          <li role="separator" class="divider"></li>
          <li class="dropdown-header">湖南省</li>
          <li><a href="">长沙</a></li>
          <li><a href="">株洲</a></li>
          <li><a href="">湘潭</a></li>
        </ul>   
   </div>  

这里写图片描述


禁用的菜单项disabled

为下拉菜单中的 li 元素添加 .disabled 类,从而禁用相应的菜单项。

   <div class="dropdown">
        <button class="btn btn-default "  id="dropdownMenu1" data-toggle="dropdown" >
          更多城市
          <span class="caret "></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
          <li class="dropdown-header">广东省</li>
          <li><a href="">广州</a></li>
          <li><a href="">深圳</a></li>
          <li><a href="">东莞</a></li>
          <li class="disabled"><a href="">香港</a></li>
       </ul>   
   </div>  

这里写图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值