• Floating production, storage and offloading vessel delivered in Qingdao 2018-05-20
  • 汽車定位跟蹤官員意圖敲詐 追蹤器該怎麼管 2018-05-20
  • 工作队精准发力助力贫困村“摘帽” 2018-05-20
  • 中消协发布榨汁机比较试验结果 2018-05-20
  • 游花海林芝,赏野生桃花 2018林芝桃花节29日开幕 2018-05-20
  • 19米99轻松卫冕 巩立姣:没突破20米有点可惜 2018-05-18
  • 海南省工商局出实招提高干部素质 强化工作作风 2018-05-18
  • 栾蕾英亮相TOP100时尚盛典 盛装亮相仙气十足 2018-05-18
  • 以合法形式掩盖非法目的的合同效力 2018-05-18
  • 4月解放领跑重卡行业 红岩保持增幅第一 2018-05-17
  • 不查“后来”,中国电影难有未来 2018-05-16
  • 欧盟公司与伊朗合作将遭美国制裁?德媒:欧美或渐行渐远 2018-05-16
  • 《青草的清香》:探索感官和情感的发展史 2018-05-16
  • 徒步穿越纪念汶川地震十周年 2018-05-16
  • 警方提示:提防打火机、香水让车辆“上火” 2018-05-15
  • 【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开发中的应用。