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>
  • 相关阅读:
    (转)Java线程：线程的同步与锁
    (转)线程栈模型与线程的变量、线程状态转换
    (转)概念与原理
    Oracle 技术支持之现场优化的思维路径
    oracle复合索引的选择和使用
    oracle中sql执行性能关注点
    oracle中位图索引和B-tree索引的区别
    oracle锁表
    oracle索引的理解
    oracle海量数据中提升创建索引的速度
  • 原文地址：https://www.cnblogs.com/airycode/p/5150315.html
Copyright © 2011-2022 走看看