首页 > 代码库 > Bootstrap学习 下拉列表

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"。 挺有用的,例如权限不同可能会不允许浏览某些页面。。。