Bootstrap学习 下拉列表

如下可能是最简单的下拉列表了：

<div class="dropdown">
    <button class="btn btn-lg" data-toggle="dropdown">
        DropDown
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a>Action</a></li>
        <li><a>Another action</a></li>
        <li><a>Something else here</a></li>
        <li class="divider"></li>
        <li><a>Separated link</a></li>
    </ul>
</div>

这个代码的实现需要bootstrap.js，当然了jquery.js和bootstrap.css是必须的。

我们就在上面的基础上进行修改，如果我们的下拉列表由多个部分组成，可以为每个部分追加一个<li class="divider"></li>

另外我们还可以给每一部分追加一个title，代码如下：

        <div class="dropdown">
            <button class="btn btn-lg" type="button" data-toggle="dropdown">
                DropDown <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li class="dropdown-header">Test header 1</li>
                <li><a>Action</a></li>
                <li><a>Another action</a></li>
                <li><a>Something else here</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Test header 2</li>
                <li><a>Separated link</a></li>
            </ul>
        </div>

looks good!!!

禁用其中的某一个选项的话，可以给这个li追加class="disabled"。 挺有用的，例如权限不同可能会不允许浏览某些页面。。。

几个注意点：

1 通过向链接或按钮添加data-toggle="dropdown"可以打开或关闭下拉菜单。

2 To keep URLs intact, use the data-target attribute instead of href="#".

3 $('.dropdown-toggle').dropdown()