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()

  • 相关阅读:
    【HAOI2014】走出金字塔
    【HAOI2008】圆上的整点
    LOJ #116 有源汇点有上下界的最大流
    ZOJ [P2314] 无源汇点有上下界模版
    最小费用最大流模版
    最大流模版 dinic
    最大流模版 EK
    HDU [P1533]
    HDU [2255] 奔小康赚大钱
    POJ [P2289] Jamie's Contact Groups
  • 原文地址:https://www.cnblogs.com/voctrals/p/3754932.html
Copyright © 2011-2022 走看看