• 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>
  • 相关阅读:
    Java基本类型总结
    springboot(八)：RabbitMQ详解
    Java开发相关命名规范
    jstl 与 el表达式
    el表达式（一）
    策略模式
    jsp (二) 练习
    jsp (一)
    Servlet (三) 文件下载（只支持英文文件名）
    Servlet (三)HttpServletResponse
  • 原文地址：https://www.cnblogs.com/airycode/p/5150315.html
Copyright © 2020-2023  润新知