zoukankan      html  css  js  c++  java
  • 下拉菜单

    相关链接:http://v3.bootcss.com/components/#dropdowns

    1、默认情况:dropdown向下弹出框

    <div class="dropdown">
      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        Dropdown
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>

    aria-haspopup :true表示点击的时候会出现菜单或是浮动元素; false表示没有pop-up效果。 作用:显示链接列。

    aria-expanded:表示展开状态。默认为undefined, 表示当前展开状态未知。其它可选值:true表示元素是展开的;false表示元素不是展开的。表的可切换、有上下文的菜单。​

    ​​data-toggle:设置单一标签属性,只使用这个属性。​

    aria-labelledby: 当想要的标签文本已经在其它元素存在时,将这个值设为该元素id。

    2、向上弹出​菜单

    class="dropdown"替换为 class="dropup"

    3、分割线

    <ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
      ...
      <li role="separator" class="divider"></li>
      ...
    </ul>

    4、页面位置右放置下拉菜单(默认在左边)​

    5、添加小标题

    ​用处:手机通讯录分组标签

    6、禁用的菜单项​

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

    <ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
      <li><a href="#">Regular link</a></li>
      <li class="disabled"><a href="#">Disabled link</a></li>
      <li><a href="#">Another link</a></li>
    </ul>
  • 相关阅读:
    ASP.NET MVC3 系列教程 部署你的WEB应用到IIS 6.0
    ASP.NET MVC3 系列教程 控制器 & 视图
    Windows 8 如何安装到Virtual Box虚拟机上(x86)
    工具脚本(网络编码)
    c库的rand/random随机数产生函数性能差?
    shell脚本模版
    linux的IO调度算法和回写机制
    thrift安装脚本
    通用高效的c++内存池(特定类型)
    [转] NoSQL生态系统
  • 原文地址:https://www.cnblogs.com/maotan/p/5217194.html
Copyright © 2011-2022 走看看