zoukankan      html  css  js  c++  java
  • bootstrap 框架里的下拉菜单+按钮

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <!--按照ie版本渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--设置视窗大小-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--双内核浏览器按照极速模式(谷歌内核)渲染-->
    <meta name="renderer" content="webkit">
    <title>下拉菜单</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
    </head>
    <body>
    <!--
    1、如需使用下拉菜单,在 .dropdown 内加上下拉菜单即可。
    2、通过向 .dropdown-menu 添加 .pull-right 来向右对齐下拉菜单
    3、可以使用 dropdown-header 向下拉菜单的标签区域添加标题。
    —————— ——————
    .dropdown 指定下拉菜单,下拉菜单都包裹在 .dropdown 里
    .dropdown-menu 创建下拉菜单
    .dropdown-menu-right 下拉菜单右对齐
    .dropdown-header 下拉菜单中添加标题
    .dropup 指定向上弹出的下拉菜单
    .disabled 下拉菜单中的禁用项
    .divider 下拉菜单中的分割线


    -->
    <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="#">Java</a>
    </li>
    <li role="presentation">
    <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
    </li>
    <li role="presentation">
    <a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>
    </li>
    <li role="presentation" class="divider"></li>
    <li role="presentation">
    <a role="menuitem" tabindex="-1" href="#">分离的链接</a>
    </li>
    </ul>
    </div>


    <!--
    ———— 按钮组 ————


    -->
    <div class="btn-group">
    <button type="button" class="btn btn-default">按钮 1</button>
    <button type="button" class="btn btn-default">按钮 2</button>
    <button type="button" class="btn btn-default">按钮 3</button>
    </div>
    <!--按钮工具栏-->
    <div class="btn-toolbar" role="toolbar">
    <div class="btn-group">
    <button type="button" class="btn btn-default">按钮 1</button>
    <button type="button" class="btn btn-default">按钮 2</button>
    <button type="button" class="btn btn-default">按钮 3</button>
    </div>
    <div class="btn-group">
    <button type="button" class="btn btn-default">按钮 4</button>
    <button type="button" class="btn btn-default">按钮 5</button>
    <button type="button" class="btn btn-default">按钮 6</button>
    </div>
    </div>
    <!--
    ———— 按钮组内嵌套另一个按钮组 ————
    .btn-group-vertical :垂直排列 -->
    <div class="btn-group">
    <button type="button" class="btn btn-default">按钮 1</button>
    <button type="button" class="btn btn-default">按钮 2</button>
    <div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    下拉
    <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
    <li><a href="#">下拉链接 1</a></li>
    <li><a href="#">下拉链接 2</a></li>
    </ul>
    </div>
    </div>
    <script src="../js/jquery-1.11.3.js"></script>
    <script src="../js/bootstrap.js"></script>
    </body>
    </html>
  • 相关阅读:
    direct path write 等待事件导致数据库hang
    Sql Server数据库视图的创建、修改
    MVC视图中Html.DropDownList()辅助方法的使用
    Ubuntu16.04下安装.NET Core
    Ubuntu16.04下部署golang开发环境
    win7环境下安装运行gotour【转载整理】
    一.Windows I/O模型之选择(select)模型
    Windos下的6种IO模型简要介绍
    编码介绍(ANSI、GBK、GB2312、UTF-8、GB18030和 UNICODE)
    串口通信知识点详解
  • 原文地址:https://www.cnblogs.com/ZXH-null/p/12122624.html
Copyright © 2011-2022 走看看