BootStrap--dropdown

下拉菜单

　　下拉菜单的基本结构为：

<div class="dropdown">
    <button class="btn btn-success dropdown-toggle" data-toggle="dropdown">dropdown
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">item1</a></li>
        <li><a href="#">item1</a></li>
        <li class="divider"></li>
        <li><a href="#">item1</a></li>
    </ul>
</div>

　　下拉菜单的外层容器一定要提供了一个相对定位的属性，所以具有position:relative属性的元素就可以作为下拉菜单的外层容器

　　下拉菜单的按钮元素关键的属性为data-toggle="dropdown"，该属性提供了HTML使用的触发条件，class="dropdown-toggle"提供了一些颜色的上的样式，基本上可以忽略

　　行内元素添加class="caret"是一个标识下拉菜单的一个小三角

　　下拉菜单的具体内容要ul-li-a嵌套使用，ul上添加class="dropdown-menu"该样式主要提供了层级圆角隐藏等样式，li上添加class="divider"提供分隔功能，添加class="dropdown-header"提供一个分组的功能就像名称一样起一个标题的作用

　　默认下拉菜单是向下伸展的在最外层容器上设置class="dropup"可以让菜单向上，此时小三角也会向上

　　默认下拉菜单内容元素和触发元素是左边对齐的可以在最外层容器上设置class="pull-right"来实现右边对齐

JS使用

　　下拉菜单提供了四个事件（事件要绑定在最外层元素上）：

　　　　1.show.bs.dropdown在下拉菜单出现之前触发

　　　　2.shown.bs.dropdown在下拉菜单出现之后触发

　　　　3.hide.bs.dropdown在下拉菜单隐藏之前触发

　　　　4.hidden.bs.dropdown在下拉菜单隐藏之后触发

　　使用方式为：

$(".dropdown").on("show.bs.dropdown",function(){alert("before show")})