zoukankan      html  css  js  c++  java

  • Bootstrap下拉单学习

    <!DOCTYPE HTML>
    <html>
    <head>
    <link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
    <script src="/scripts/jquery.min.js"></script>
    <script src="/scripts/bootstrap.min.js"></script>
    </head>
    <body>
    <div class="dropdown">
    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">
    主题
    <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation">
    <a role="menuitem" tabindex="-1" href="javascript:void(0)">Node.js</a>
    </li>
    <li role="presentation">
    <a role="menuitem" tabindex="-1" href="javascript:void(0)">数据挖掘</a>
    </li>
    <li role="presentation">
    <a role="menuitem" tabindex="-1" href="javascript:void(0)">
    数据通信/网络
    </a>
    </li>
    <li role="presentation" class="divider"></li>
    <li role="presentation">
    <a role="menuitem" tabindex="-1" href="javascript:void(0)">分离的链接</a>
    </li>
    </ul>
    </div>
    </body>
    </html>

    标题

    在任何下拉菜单中均可通过添加标题来标明一组动作。

    1. <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
    2. ...
    3. <li role="presentation" class="dropdown-header">Dropdown header</li>
    4. ...
    5. </ul>

    完整代码：

    <!DOCTYPE HTML>
    <html>
    <head>
    <link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
    <script src="/scripts/jquery.min.js"></script>
    <script src="/scripts/bootstrap.min.js"></script>
    </head>
    <body>
    <div class="dropdown clearfix">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu3" data-toggle="dropdown" aria-expanded="true">
    Dropdown<span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
    <li role="presentation" class="dropdown-header">Dropdown header</li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0)">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0)">Another action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0)">Something else here</a></li>
    <li role="presentation" class="dropdown-header">Dropdown header</li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0)">Separated link</a></li>
    </ul>
    </div>
    </body>
    </html>

    分割线

    为下拉菜单添加一条分割线，用于将多个链接分组。

    1. <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuDivider">
    2. ...
    3. <li role="presentation" class="divider"></li>
    4. ...
    5. </ul>

    完整代码:

    <!DOCTYPE HTML>
    <html>
    <head>
    <link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
    <script src="/scripts/jquery.min.js"></script>
    <script src="/scripts/bootstrap.min.js"></script>
    </head>
    <body>
    <div class="dropdown clearfix">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenuDivider" data-toggle="dropdown" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuDivider">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0)">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0)">Another action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0)">Something else here</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0)">Separated link</a></li>
    </ul>
    </div>
    </body>
    </html>

    禁用的菜单项

    为下拉菜单中的 <li> 元素添加 .disabled 类，从而禁用相应的菜单项。

    1. <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu4">
    2. <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Regular link</a></li>
    3. <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li>
    4. <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another link</a></li>
    5. </ul>

    完整代码：

    <!DOCTYPE HTML>
    <html>
    <head>
    <link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
    <script src="/scripts/jquery.min.js"></script>
    <script src="/scripts/bootstrap.min.js"></script>
    </head>
    <body>
    <div class="dropdown clearfix"><button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu4" data-toggle="dropdown" aria-expanded="true">Dropdown<span class="caret"></span></button><ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu4"><li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0)">Regular link</a></li><li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="javascript:void(0)">Disabled link</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0)">Another link</a></li></ul></div>
    </body>
    </html>
  • 相关阅读:
    探索需求17
    周总结10
    当后端返回的数据格式出问题时
    关于路由的摘记
    element-ui之table——expand，filter和sortable相关方法事件属性等整理
    CSS3 [attribute*=value] 选择器
    判断变量是否为对象（摘自JavaScript入门教程）
    获得去重的数组（摘）
    css的calc() 函数如width: calc(100%
    JavaScript 中 call()、apply()、bind() 的用法（搬运）
  • 原文地址：https://www.cnblogs.com/airycode/p/5150315.html
Copyright © 2011-2022 走看看