• 清明假期还没过,五一火车票已开售,你抢票了没? 2018-07-21
  • 江城元宵细雨 观灯注意安全 2018-07-21
  • 杠杆资本弃壳退场 汇垠系让渡两公司控股权 2018-07-21
  • 12月12日活动爆料丨剁剁剁剁什么手,这次绝不让你吃土! 2018-07-20
  • 美国创新力排名跌出前十 韩国和瑞典蝉联前两名 2018-07-20
  • 讲述真人版“红海行动” 引孙杨现场动容 2018-07-20
  • 太阳城娱乐城网伟易博 2018-07-19
  • 先重组转型后变无主 帝龙文化实控人退位被"翻旧账" 2018-07-19
  • 线下数据大揭秘:南京女孩的钱都花哪儿了? 2018-07-19
  • 寒冷时节 咋防流感教你三招抵御感冒 2018-07-19
  • 100%全面屏?华为荣耀10曝光:顶配256GB空间||华为荣耀10曝光-手机行情 2018-07-19
  • 雪天寒冷 常州120一天多接到急救电话1118个 2018-07-18
  • 怀揣“警察梦” 盗贼专偷警用物品 2018-07-18
  • 创新人才教育研究会选举出第二届理事会理事 2018-07-18
  • 筽箌紈贰蟰贺礶羛甶Fantasia 2018-07-18
  • 【bootstrap教程】Bootstrap 下拉菜单(Dropdown)插件

    栏目: bootstrap 发布于: 2014-11-28 12:57:51

    Bootstrap 下拉菜单(Dropdown)插件

    Bootstrap 下拉菜单 这一章讲解了下拉菜单,但是没有涉及到交互部分,本章将具体讲解下拉菜单的交互。使用下拉菜单(Dropdown)插件,您可以向任何组件(比如导航栏、标签页、胶囊式导航菜单、按钮等)添加下拉菜单。

    如果您想要单独引用该插件的功能,那么您需要引用 dropdown.js?;蛘?,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。

    用法

    您可以切换下拉菜单(Dropdown)插件的隐藏内容:

    • 通过 data 属性:向链接或按钮添加 data-toggle="dropdown" 来切换下拉菜单,如下所示:
      <div class="dropdown">
        <a data-toggle="dropdown" rel="nofollow" href="#">下拉菜单(Dropdown)触发器</a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
          ...
        </ul>
      </div>
      

      如果您需要保持链接完整(在浏览器不启用 JavaScript 时有用),请使用 data-target 属性代替 rel="nofollow" href="#"

      <div class="dropdown">
        <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" rel="nofollow" href="http://www.rocksun.cn/page.html">
          下拉菜单(Dropdown) <span class="caret"></span>
        </a>
      
      
        <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
          ...
        </ul>
      </div>
      
    • 通过 JavaScript:通过 JavaScript 调用下拉菜单切换,请使用下面的方法:
      $('.dropdown-toggle').dropdown()
      

    实例

    在导航栏内

    下面的实例演示了在导航栏内的下拉菜单的用法:

    <!DOCTYPE html>
    <html>
    <head>
       <title>Bootstrap 实例 - 默认的导航栏</title>
       <link rel="nofollow" href="http://www.rocksun.cn/bootstrap/css/bootstrap.min.css" rel="stylesheet">
       <script src="http://www.rocksun.cn/scripts/jquery.min.js"></script>
       <script src="http://www.rocksun.cn/bootstrap/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <nav class="navbar navbar-default" role="navigation">
       <div class="navbar-header">
          <a class="navbar-brand" rel="nofollow" href="#">W3Cschool</a>
       </div>
       <div>
          <ul class="nav navbar-nav">
             <li class="active"><a rel="nofollow" href="#">iOS</a></li>
             <li><a rel="nofollow" href="#">SVN</a></li>
             <li class="dropdown">
                <a rel="nofollow" href="#" class="dropdown-toggle" data-toggle="dropdown">
                   Java 
                   <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                   <li><a rel="nofollow" href="#">jmeter</a></li>
                   <li><a rel="nofollow" href="#">EJB</a></li>
                   <li><a rel="nofollow" href="#">Jasper Report</a></li>
                   <li class="divider"></li>
                   <li><a rel="nofollow" href="#">分离的链接</a></li>
                   <li class="divider"></li>
                   <li><a rel="nofollow" href="#">另一个分离的链接</a></li>
                </ul>
             </li>
          </ul>
       </div>
    </nav>
    
    </body>
    </html>
    

    结果如下所示:

    默认的导航栏

    在标签页内

    下面的实例演示了在标签页内的下拉菜单的用法:

    <!DOCTYPE html>
    <html>
    <head>
       <title>Bootstrap 实例 - 带有下拉菜单的标签页</title>
       <link rel="nofollow" href="http://www.rocksun.cn/bootstrap/css/bootstrap.min.css" rel="stylesheet">
       <script src="http://www.rocksun.cn/scripts/jquery.min.js"></script>
       <script src="http://www.rocksun.cn/bootstrap/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <p>带有下拉菜单的标签页</p>
    <ul class="nav nav-tabs">
       <li class="active"><a rel="nofollow" href="#">Home</a></li>
       <li><a rel="nofollow" href="#">SVN</a></li>
       <li><a rel="nofollow" href="#">iOS</a></li>
       <li><a rel="nofollow" href="#">VB.Net</a></li>
       <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" rel="nofollow" href="#">
             Java <span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
             <li><a rel="nofollow" href="#">Swing</a></li>
             <li><a rel="nofollow" href="#">jMeter</a></li>
             <li><a rel="nofollow" href="#">EJB</a></li>
             <li class="divider"></li>
             <li><a rel="nofollow" href="#">分离的链接</a></li>
          </ul>
       </li>
       <li><a rel="nofollow" href="#">PHP</a></li>
    </ul>
    
    </body>
    </html>
    

    结果如下所示:

    带有下拉菜单的标签页

    选项

    没有选项。

    方法

    下拉菜单切换有一个简单的方法用来显示或隐藏下拉菜单。

    $().dropdown('toggle')
    

    实例

    下面的实例演示了下拉菜单(Dropdown)插件方法的用法:

    <!DOCTYPE html>
    <html>
    <head>
       <title>Bootstrap 实例 - 下拉菜单(Dropdown)插件方法</title>
       <link rel="nofollow" href="http://www.rocksun.cn/bootstrap/css/bootstrap.min.css" rel="stylesheet">
       <script src="http://www.rocksun.cn/scripts/jquery.min.js"></script>
       <script src="http://www.rocksun.cn/bootstrap/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <nav class="navbar navbar-default" role="navigation">
       <div class="navbar-header">
          <a class="navbar-brand" rel="nofollow" href="#">W3Cschool</a>
       </div>
    
       <div id="myexample">
          <ul class="nav navbar-nav">
             <li class="active"><a rel="nofollow" href="#">iOS</a></li>
             <li><a rel="nofollow" href="#">SVN</a></li>
             <li class="dropdown">
                <a rel="nofollow" href="#" class="dropdown-toggle">Java <b 
                   class="caret"></b></a>
                   <ul class="dropdown-menu">
                      <li><a id="action-1" rel="nofollow" href="#">
                         jmeter</a>
                      </li>
                      <li><a rel="nofollow" href="#">EJB</a></li>
                      <li><a rel="nofollow" href="#">Jasper Report</a></li>
                      <li class="divider"></li>
                      <li><a rel="nofollow" href="#">分离的链接</a></li>
                      <li class="divider"></li>
                      <li><a rel="nofollow" href="#">另一个分离的链接</a></li>
                   </ul>
                </li>
             </ul>
          </div>
       </nav>
    </div>
    <script>
       $(function(){
          $(".dropdown-toggle").dropdown('toggle');
          }); 
    </script>
    
    </body>
    </html>
    

    结果如下所示:

    下拉菜单(Dropdown)插件方法

    本文转载自:w3cschool
    本站文章除注明转载外,均为本站原创或编译?;队魏涡问降淖?,但请务必注明出处。
    转载请注明:文章转载自 七星彩票平台
    本文标题:【bootstrap教程】Bootstrap 下拉菜单(Dropdown)插件
    IT技术书籍推荐:
    细说PHP(精要版)
    细说PHP(精要版)
    高洛峰 (作者), LAMP兄弟连 (编者)
    PHP是开发Web应用系统最理想的工具,拥有易于使用、功能强大、成本低廉、安全性高、开发速度快且执行灵活等优点?!断杆礟HP(第2版)》自出版以来,销售一路在同类书籍中领先,已成为PHP学习者首选的工具书。为了可以让读者携带方便及更精准地掌握PHP的重点、要点,同时能使之作为大学计算机系PHP教材普及,特别推出《细说PHP精要版》。本书是以《细说PHP(第2版)》为基础,提取出精华内容,都是PHP开发中必须需要掌握的技术点。全书以实用为目标设计,包含PHP开发中必备的各项技术,对已列出的每一个知识点都进行了深入详细的讲解,并附有大量的经典实例代码,图文并茂,并且侧重介绍了PHP的相关技术在实际Web开发中的应用。