zoukankan      html  css  js  c++  java
  • 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>  

    这里写图片描述

  • 相关阅读:
    2015531 网络攻防 Exp1 PC平台逆向破解(5)M
    2017-2018-1 20155331 嵌入式C语言
    20155330 《网络对抗》 Exp9 web安全基础实践
    20155330 《网络对抗》 Exp8 Web基础
    20155330 《网络对抗》 Exp7 网络欺诈防范
    20155330 《网络对抗》 Exp6 信息搜集与漏洞扫描
    20155330 《网络对抗》 Exp5 MSF基础应用
    20155330 《网络攻防》 Exp4 恶意代码分析
    20155330 《网络攻防》 Exp3 免杀原理与实践
    20155330 《网络对抗》 Exp2 后门原理与实践
  • 原文地址:https://www.cnblogs.com/wood2012/p/7896559.html
Copyright © 2011-2022 走看看