zoukankan      html  css  js  c++  java
  • bootstrap基础学习十一篇

    bootstrap下拉菜单(Dropdowns)

    下拉菜单是可切换的,是以列表格式显示链接的上下文菜单。如需使用下列菜单,只需要在 class .dropdown 内加上下拉菜单即可。

    a.代码示例如下:

    <!DOCTYPE html>
    <html>
    <head>
       <meta charset="utf-8"/>
       <title>Bootstrap 实例 - 下拉菜单(Dropdowns)</title>
       <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
       <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <div class="dropdown">
       <button type="button" class="btn btn-md 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>
    
    
    </body>
    </html>
                

    b.效果如图:

    c.对齐

    通过向 .dropdown-menu 添加 class .pull-right 来向右对齐下拉菜单。

    如:

     <ul class="dropdown-menu pull-right" role="menu" 
          aria-labelledby="dropdownMenu1">

    d.标题

    可以使用 class dropdown-header 向下拉菜单的标签区域添加标题

    如:

     <li role="presentation" class="dropdown-header">下拉菜单标题</li>

    效果如:

  • 相关阅读:
    Mac 配置 php-fpm 时出现'/private/etc/php-fpm.conf': No such file or directory (2)
    Lua数学库
    Nginx在Windows上启动、停止的命令
    Javascript虚拟机
    Tiled Forward Shading Links
    Xcode同一个Workspace中两个工程依赖于Undefined Symbol Error
    Clang: Undefined symbols, but it is there using nm.
    MVC+Ext.net零基础学习记录(二)
    MVC+Ext.net零基础学习记录(一)
    根据某个字符串查找整个数据库
  • 原文地址:https://www.cnblogs.com/wuheng1991/p/5226804.html
Copyright © 2011-2022 走看看