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

Bootstrap学习 下拉列表

2024-07-06 05:18:11   237人阅读

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

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

 

 

 


联系
我们