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

    几个注意点:

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

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

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

  • 相关阅读:
    移动端适配问题
    面试题
    c++学习之路
    es6特性
    ndoe安装依赖注意的问题
    如何阻止button默认的刷新页面操作
    npm 全局安装模块,出现XXX不是内部或外部命令解决方法
    .Net MVC系统源码与教学视频《资源分享系列6》
    Javascript书店课程设计《资源分享系列4》
    Python教程与源码《资源分享系列4》
  • 原文地址:https://www.cnblogs.com/voctrals/p/3754932.html
Copyright © 2011-2022 走看看