• Bootstrap中的下拉菜单效果
  • 阿迪王 发表于 2015/4/24 12:35:00 | 分类标签: Bootstrap 下拉框 图标
  •  

    下拉菜单

    用于显示链接列表的可切换、有上下文的菜单。下拉菜单的 JavaScript 插件让它具有了交互性。

    将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里,或者另一个声明了 position: relative; 的元素。然后加入组成菜单的 HTML 代码。为下拉菜单的父元素添加 .dropup 类还可以让菜单向上弹出(默认是向下弹出)。

    复制
    <div class="dropdown">
      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
        Dropdown
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
      </ul>
    </div>
    <div class="dropup">
      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-expanded="true">
        Dropdown
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
      </ul>
    </div>

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

    可能需要额外的定位May require additional positioning

    在正常的文档流中,通过 CSS 为下拉菜单进行定位。这就意味着下拉菜单可能会由于设置了 overflow 属性的父元素而被部分遮挡或超出视口(viewport)的显示范围。如果出现这种问题,请自行解决。

    不建议使用 .pull-right

    从 v3.1.0 版本开始,我们不再建议对下拉菜单使用 .pull-right 类。如需将菜单右对齐,请使用 .dropdown-menu-right 类。导航条中如需添加右对齐的导航(nav)组件,请使用 .pull-right 的 mixin 版本,可以自动对齐菜单。如需左对齐,请使用 .dropdown-menu-left 类。

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

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

    复制
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
      ...
      <li role="presentation" class="dropdown-header">Dropdown header</li>
      ...
    </ul>

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

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

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

    复制
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu4">
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Regular link</a></li>
      <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another link</a></li>
    </ul>


  • 请您注意

    ·自觉遵守:爱国、守法、自律、真实、文明的原则

    ·尊重网上道德,遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规

    ·严禁发表危害国家安全,破坏民族团结、国家宗教政策和社会稳定,含侮辱、诽谤、教唆、淫秽等内容的作品

    ·承担一切因您的行为而直接或间接导致的民事或刑事法律责任

    ·您在编程中国社区新闻评论发表的作品,本网站有权在网站内保留、转载、引用或者删除

    ·参与本评论即表明您已经阅读并接受上述条款

  • 感谢本文作者
  • 作者头像
  • 昵称:阿迪王
  • 加入时间:2013/6/13 0:00:00
  • TA的签名
  • 这家伙很懒,虾米都没写
  • +进入TA的空间
  • 以下内容也很赞哦
分享按钮