Bootstrap 按钮组 下拉菜单 学习笔记

下拉菜单要要放在按钮组里面才有效果的。也就是说下拉菜单代码在写在 <div class="btn-group"> 这个div里面才有效。

Bootstrap 下拉菜单需要容器 ：http://www.cnblogs.com/qingyuan/p/4601094.html //换句话讲就是外层要有div.

案例：http://www.runoob.com/bootstrap/bootstrap-button-groups.html //自己动手

附：

Bootstrap 组件 - 下拉菜单（Dropdowns）

标记（Markup）

需要使用.dropdown或者其它声明了 position: relative; 的元素来包容下拉触发器和下拉菜单。

<div class="dropdown">
  <!-- Link or button to toggle dropdown -->
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    <li><a tabindex="-1" href="#">Action</a></li>
    <li><a tabindex="-1" href="#">Another action</a></li>
    <li><a tabindex="-1" href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>

　　

选择项（Options）

调整菜单位置

可以向.dropdown-menu添加.pull-right或.pull-left控制菜单位置。

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

　　

子菜单

<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
  ...
  <li class="dropdown-submenu">
    <a tabindex="-1" href="#">More options</a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
</ul>

　　

上拉菜单（Dropup）

用.dropup替换.dropdown即可。

<div class="dropup">
  <!-- Link or button to toggle dropdown -->
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    <li><a tabindex="-1" href="#">Action</a></li>
    <li><a tabindex="-1" href="#">Another action</a></li>
    <li><a tabindex="-1" href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>

　　

JavaScript

通过data属性

向触发下拉的链接或按钮添加data-toggle="dropdown"。

<div class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

　　

为保持URL的完整性，用data-target替代href="#"。

<div class="dropdown">
  <a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
    Dropdown
    <b class="caret"></b>
  </a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

 

通过JavaScript

通过JavaScript代码激活菜单。

$('#menu').dropdown('toggle')

　　

完整例子

<div class="dropdown">
  <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
    <li><a tabindex="-1" href="#">Action</a></li>
    <li><a tabindex="-1" href="#">Another action</a></li>
    <li><a tabindex="-1" href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>

　　

全文：http://blog.csdn.net/zjn0430/article/details/8547687