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")})