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

BootStrap--dropdown

标签：

原文地址：http://www.cnblogs.com/shinhwazt/p/5958427.html