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>

    效果如:

  • 相关阅读:
    Hibernate多对一ManytoOne
    eclipse中配置MAVEN并使用阿里云代理
    火车采集器 帝国CMS7.2免登录发布模块
    JavaScript数据类型
    JavaScript 命名规则
    帝国cms 无法生成静态页
    帝国cms 页面统计
    PHP类型转换
    Excel小写金额转大写金额公式
    新时期大站协议脚本邮件群发软件 怎么样
  • 原文地址:https://www.cnblogs.com/wuheng1991/p/5226804.html
Copyright © 2011-2022 走看看