Bootstrap 中的插件的學習2(導航)

時間  2019-11-18
標籤 bootstrap 插件 學習 導航 欄目 Bootstarp 简体版
原文   原文鏈接

實例

在導航欄內

下面的實例演示了在導航欄內的下拉菜單的用法：javascript

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <link href="/stylesheets/bootstrap.min.css" rel="stylesheet" >
  5. <script src="/scripts/jquery.min.js"></script>
  6. <script src="/scripts/bootstrap.min.js"></script>
  7. </head>
  8. <body>
  9. <nav class="navbar navbar-default" role="navigation">
  10. <div class="navbar-header">
  11. <a class="navbar-brand" href="#">W3Cschool</a>
  12. </div>
  13. <div>
  14. <ul class="nav navbar-nav">
  15. <li class="active"><a href="#">iOS</a></li>
  16. <li><a href="#">SVN</a></li>
  17. <li class="dropdown">
  18. <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  19. Java
  20. <b class="caret"></b>
  21. </a>
  22. <ul class="dropdown-menu">
  23. <li><a href="#">jmeter</a></li>
  24. <li><a href="#">EJB</a></li>
  25. <li><a href="#">Jasper Report</a></li>
  26. <li class="divider"></li>
  27. <li><a href="#">分離的連接</a></li>
  28. <li class="divider"></li>
  29. <li><a href="#">另外一個分離的連接</a></li>
  30. </ul>
  31. </li>
  32. </ul>
  33. </div>
  34. </nav>
  35. </body>
  36. </html>

在標籤頁內

  1. <p>帶有下拉菜單的標籤頁</p>
  2. <ul class="nav nav-tabs">
  3. <li class="active"><a href="#">Home</a></li>
  4. <li><a href="#">SVN</a></li>
  5. <li><a href="#">iOS</a></li>
  6. <li><a href="#">VB.Net</a></li>
  7. <li class="dropdown">
  8. <a class="dropdown-toggle" data-toggle="dropdown" href="#">
  9. Java <span class="caret"></span>
  10. </a>
  11. <ul class="dropdown-menu">
  12. <li><a href="#">Swing</a></li>
  13. <li><a href="#">jMeter</a></li>
  14. <li><a href="#">EJB</a></li>
  15. <li class="divider"></li>
  16. <li><a href="#">分離的連接</a></li>
  17. </ul>
  18. </li>
  19. <li><a href="#">PHP</a></li>
  20. </ul>
  23. 代碼： 
    <!DOCTYPE HTML>
<html>
<head>
<link href="/stylesheets/bootstrap.min.css" rel="stylesheet" >
<script src="/scripts/jquery.min.js"></script>
<script src="/scripts/bootstrap.min.js"></script>
 </head>
<body>
<nav class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
      <a class="navbar-brand" href="javascripts:void(0);">AAA</a>
   </div>
   <div>
      <ul class="nav navbar-nav">
         <li class="active"><a href="javascripts:void(0);">iOS</a></li>
         <li><a href="javascripts:void(0);">SVN</a></li>
         <li class="dropdown">
            <a href="javascripts:void(0);" class="dropdown-toggle" data-toggle="dropdown">
               Java
               <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
               <li><a href="javascripts:void(0);">jmeter</a></li>
               <li><a href="javascripts:void(0);">EJB</a></li>
               <li><a href="javascripts:void(0);">Jasper Report</a></li>
               <li class="divider"></li>
               <li><a href="javascripts:void(0);">分離的連接</a></li>
               <li class="divider"></li>
               <li><a href="javascripts:void(0);">另外一個分離的連接</a></li>
            </ul>
         </li>
      </ul>
   </div>
</nav>
<p>帶有下拉菜單的標籤頁</p>
<ul class="nav nav-tabs">
   <li class="active"><a href="javascripts:void(0);">Home</a></li>
   <li><a href="javascripts:void(0);">SVN</a></li>
   <li><a href="javascripts:void(0);">iOS</a></li>
   <li><a href="javascripts:void(0);">VB.Net</a></li>
   <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="javascripts:void(0);">
         Java <span class="caret"></span>
      </a>
      <ul class="dropdown-menu">
         <li><a href="javascripts:void(0);">Swing</a></li>
         <li><a href="javascripts:void(0);">jMeter</a></li>
         <li><a href="javascripts:void(0);">EJB</a></li>
         <li class="divider"></li>
         <li><a href="javascripts:void(0);">分離的連接</a></li>
      </ul>
   </li>
   <li><a href="javascripts:void(0);">PHP</a></li>
</ul>
</body>
</html>

    用法

    能夠切換下拉菜單（Dropdown）插件的隱藏內容：css

    　　經過 data 屬性：向連接或按鈕添加 data-toggle="dropdown" 來切換下拉菜單，以下所示：html

    1. <div class="dropdown">
    2. <a data-toggle="dropdown" href="#">下拉菜單（Dropdown）觸發器</a>
    3. <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    4. ...
    5. </ul>
    6. </div>

    　　若是您須要保持連接完整（在瀏覽器不啓用 JavaScript 時有用），請使用data-target 屬性代替 href="#"：java

    1. <div class="dropdown">
    2. <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
    3. 下拉菜單（Dropdown） <span class="caret"></span>
    4. </a>
    5.  
    6. <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    7. ...
    8. </ul>
    9. </div>

    　　經過 JavaScript：經過 JavaScript 調用下拉菜單切換，請使用下面的方法：jquery

    1. $('.dropdown-toggle').dropdown()

       

      方法

      下拉菜單切換有一個簡單的方法用來顯示或隱藏下拉菜單。ios

      1. $().dropdown('toggle')

      導航條實例

      ScrollSpy插件根據滾動的位置自動更新導航條中相應的導航項。spring

      拖動下面區域的滾動條，使其低於導航條的位置，注意觀察active類的變化。下拉菜單中的子項也會跟着變爲高亮狀態。bootstrap

      <!DOCTYPE HTML>
<html>
<head>
<link href="/stylesheets/bootstrap.min.css" rel="stylesheet" > 
<script src="/scripts/jquery.min.js"></script>
<script src="/scripts/bootstrap.min.js"></script>
 </head>
<body>
<nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">
   <div class="navbar-header">
      <button class="navbar-toggle" type="button" data-toggle="collapse" 
         data-target=".bs-js-navbar-scrollspy">
         <span class="sr-only">切換導航</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">教程名稱</a>
   </div>
   <div class="collapse navbar-collapse bs-js-navbar-scrollspy">
      <ul class="nav navbar-nav">
         <li><a href="#ios">iOS</a></li>
         <li><a href="#svn">SVN</a></li>
         <li class="dropdown">
            <a href="#" id="navbarDrop1" class="dropdown-toggle" 
               data-toggle="dropdown">Java
               <b class="caret"></b>
            </a>
            <ul class="dropdown-menu" role="menu" 
               aria-labelledby="navbarDrop1">
               <li><a href="#jmeter" tabindex="-1">jmeter</a></li>
               <li><a href="#ejb" tabindex="-1">ejb</a></li>
               <li class="divider"></li>
               <li><a href="#spring" tabindex="-1">spring</a></li>
            </ul>
         </li>
      </ul>
   </div>
</nav>
<div data-spy="scroll" data-target="#navbar-example" data-offset="0" 
   style="height:200px;overflow:auto; position: relative;">
   <h4 id="ios">iOS</h4>
   <p>iOS 是一個由蘋果公司開發和發佈的手機操做系統。最初是於 2007 年首次發佈 iPhone、iPod Touch 和 Apple 
      TV。iOS 派生自 OS X，它們共享 Darwin 基礎。OS X 操做系統是用在蘋果電腦上，iOS 是蘋果的移動版本。
   </p>
   <h4 id="svn">SVN</h4>
   <p>Apache Subversion，一般縮寫爲 SVN，是一款開源的版本控制系統軟件。Subversion 由 CollabNet 公司在 2000 年建立。可是如今它已經發展爲 Apache Software Foundation 的一個項目，所以擁有豐富的開發人員和用戶社區。
   </p>
   <h4 id="jmeter">jMeter</h4>
   <p>jMeter 是一款開源的測試軟件。它是 100% 純 Java 應用程序，用於負載和性能測試。
   </p>
   <h4 id="ejb">EJB</h4>
   <p>Enterprise Java Beans（EJB）是一個建立高度可擴展性和強大企業級應用程序的開發架構，部署在兼容應用程序服務器（好比 JBOSS、Web Logic 等）的 J2EE 上。
   </p>
   <h4 id="spring">Spring</h4>
   <p>Spring 框架是一個開源的 Java 平臺，爲快速開發功能強大的 Java 應用程序提供了完備的基礎設施支持。
   </p>
   <p>Spring 框架最初是由 Rod Johnson 編寫的，在 2003 年 6 月首次發佈於 Apache 2.0 許可證下。
   </p>
</div>
</body>
</html>

      調用方式

      經過data屬性

      只需將data-spy="scroll"添加到被監聽的頁面元素上（大部分狀況是添加到body上），而後將data-target=".navbar"添加到導航部分，僅此而已，頂部導航條就擁有了監聽滾動的功能。你可能但願將滾動監聽應用到.nav組件上。瀏覽器

      1. <body data-spy="scroll" data-target=".navbar">...</body>

      方法

      .scrollspy('refresh')服務器

      當滾動監聽所做用的DOM有增刪頁面元素的操做時，須要調用下面的refresh方法：

      1. $('[data-spy="scroll"]').each(function () {
      2. var $spy = $(this).scrollspy('refresh')
      3. });

      4. 參數

        能夠經過 data 屬性或 JavaScript 傳遞參數。對於 data 屬性，其名稱是將參數名附着到 data- 後面組成，例如 data-offset=""。

        名稱 類型 默認值 描述
        offset number 10 計算滾動位置時相對於頂部的偏移量（像素數）。

    2. 事件

      下表列出了滾動監聽中要用到事件。

      事件 描述 實例
      activate.bs.scrollspy 每當一個新項目被滾動監聽激活時，觸發該事件。
      1. $('#myScrollspy').on('activate.bs.scrollspy', function () {
      2. // 執行一些動做...
      3. })

    4. 經過JavaScript

      經過JavaScript啓動滾動監聽：

      1. $('#navbar').scrollspy()

      注意！ 必須爲導航條中的連接指定相應的目標id。例如，<a href="#home">home</a>必須和dom中相似<div id="home"></div>的頁面元素相呼應。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程