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>
  • 相关阅读:
    安装HyperV后VirtualBox打开故障
    TortoiseGit或TortoiseSVN在软件或系统更新后图标丢失的一个解决办法
    WSL2 Ubuntu1604 安装 GUI图形库 和 Qt Creator
    时序约束（小梅哥）
    FPGA加速
    吴恩达机器学习笔记
    Neural Network and Deep Learning 笔记【第二章；反向传播算法如何⼯作】
    Tcl学习记录
    Neural Network and Deep Learning 笔记【第一章；手写数字识别】
    操作符重载
  • 原文地址：https://www.cnblogs.com/airycode/p/5150315.html
Copyright © 2011-2022 走看看