Bootstrap-v3-js外掛-滾動監聽
阿新 • • 發佈：2021-09-29
滾動監聽
滾動監聽外掛是用來根據滾動條所處的位置來自動更新導航項的。如下所示，滾動導航條下面的區域並關注導航項的變化。下拉選單中的條目也會自動高亮顯示。
1、滾動偵聽的例項
- 實現點選導航條中的列表項自動更新導航項。
- 實現高亮顯示當前啟用的連結。
2、滾動偵聽的用法
<!DOCTYPE html> <html> <head> <!-- HTML5文件型別 --> <meta charset="utf-8"> <!-- 移動端適配 --> <meta name="viewport"content="width=device-width,initial-scale=1.0"> <!-- 讓IE瀏覽器使用最新的引擎渲染頁面 --> <mata http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Bootstrap3核心css庫 --> <link rel="stylesheet" href="css/bootstrap-v3.css"> <!-- jquery核心js庫 --> <script src="js/jquery.js"></script> <!-- Bootstrap3核心js庫 --> <script src="js/bootstrap-v3.js"></script> <title>bootstrap外掛</title> </head> <body> <!-- 滾動偵聽 --> <!-- 導航條 --> <nav class="navbar navbar-default" id="myNav"> <div class="navbar-header"> <a href="#HTML5" class="navbar-brand">Web開發</a> </div> <!-- 新增連結到對應元素上 --> <ul class="nav navbar-nav"> <li><a href="#HTML5">HTML5</a></li> <li><a href="#CSS3">CSS3</a></li> <li><a href="#Javascript">Javascript</a></li> <li><a href="#Bootstrap">Bootstrap</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Vue框架<span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#vue1">Vue1.0</a></li> <li><a href="#vue2">Vue2.0</a></li> <li><a href="#vue3">Vue3.0</a></li> </ul> </li> </ul> </nav> <!-- 頁面內容 --> <div data-target="#myNav" data-spy="scroll" data-offset="0" style="height: 300px; overflow: auto; position: relative; padding: 0 40px;"> <h4 id="HTML5">HTML5</h4> <P> HTML5是構建Web內容的一種語言描述方式。HTML5是網際網路的下一代標準，是構建以及呈現網際網路內容的一種語言方式．被認為是網際網路的核心技術之一。HTML產生於1990年，1997年HTML4成為網際網路標準，並廣泛應用於網際網路應用的開發。 </P> <h4 id="CSS3">CSS3</h4> <P> 1、減少開發成本與維護成本 在CSS3出現之前，開發人員為了實現一個圓角效果，往往需要新增額外的HTML標籤，使用一個或多個圖片來完成，而使用CSS3只需要一個標籤，利用CSS3中的border-radius屬性就能完成。這樣，CSS3技術能把人員從繪圖、切圖和優化圖片的工作中解放出來。如果後續需要調整這個圓角的弧度或者圓角的顏色，使用CSS2.1，需要從頭繪圖、切圖才能實現，使用CSS3只需修改border-radius屬性值就可快速完成修改。 CSS3提供的動畫特性，可讓開發者在先實現一些動態按鈕或者動態導航時遠離JavaScript，讓開發人員不需要花費大量的時間去寫指令碼或者尋找合適的指令碼外掛來適配一些動態網站效果。 </P> <h4 id="Javascript">Javascript</h4> <P> JavaScript指令碼語言具有以下特點: (1)指令碼語言。JavaScript是一種解釋型的指令碼語言，C、C++等語言先編譯後執行，而JavaScript是在程式的執行過程中逐行進行解釋。 (2)基於物件。JavaScript是一種基於物件的指令碼語言，它不僅可以建立物件，也能使用現有的物件。 (3)簡單。JavaScript語言中採用的是弱型別的變數型別，對使用的資料型別未做出嚴格的要求，是基於Java基本語句和控制的指令碼語言，其設計簡單緊湊。 (4)動態性。JavaScript是一種採用事件驅動的指令碼語言，它不需要經過Web伺服器就可以對使用者的輸入做出響應。在訪問一個網頁時，滑鼠在網頁中進行滑鼠點選或上下移、視窗移動等操作JavaScript都可直接對這些事件給出相應的響應。 (5)跨平臺性。JavaScript指令碼語言不依賴於作業系統，僅需要瀏覽器的支援。因此一個JavaScript指令碼在編寫後可以帶到任意機器上使用，前提是機器上的瀏覽器支 <h4 id="Bootstrap">Bootstrap</h4> <p> 1. 簡介Bootstrap，來自 Twitter，是目前最受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT。主要是為了支援移動端，所以pc端就很難做得跟以前pc那樣複雜漂亮。 在之前的 Bootstrap 版本中（直到 2.x），您需要手動引用另一個 CSS，才能讓整個專案友好的支援移動裝置。現在不一樣了，Bootstrap 3 預設的 CSS 本身就對移動裝置友好支援。 2. 開發環境及外掛支援由於bootstrap是基於jquery的，所以引入jquery外掛是必須的。這裡都是使用cdn資源，以便減少網站伺服器壓力 HTML5是構建Web內容的一種語言描述方式。HTML5是網際網路的下一代標準，是構建以及呈現網際網路內容的一種語言方式．被認為是網際網路的核心技術之一。 <h4 id="vue1">Vue1.0</h4> <p> 說起響應式前端框架，比較而言，bootstrap還是不錯的，雖然可能很多文件都是英文的。今天就整理下自己在學習及使用bootstrap3時的重要知識點和使用案例 參考資料： runoob的bootstrap中文教程：http://www.runoob.com/bootstrap/bootstrap-forms.html bootstrap中文網：http://www.bootcss.com/ bootstrap 各種實用案例(指令碼之家)： http://www.jb51.net/Special/769.htm jquery api : http://www.jquery123.com/ </p> <h4 id="vue2">vue2.0</h4> <p> 1. 簡介 Bootstrap，來自 Twitter，是目前最受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT。主要是為了支援移動端，所以pc端就很難做得跟以前pc那樣複雜漂亮。 在之前的 Bootstrap 版本中（直到 2.x），您需要手動引用另一個 CSS，才能讓整個專案友好的支援移動裝置。 現在不一樣了，Bootstrap 3 預設的 CSS 本身就對移動裝置友好支援。 2. 開發環境及外掛支援 由於bootstrap是基於jquery的，所以引入jquery外掛是必須的。 這裡都是使用cdn資源，以便減少網站伺服器壓力 HTML5是構建Web內容的一種語言描述方式。HTML5是網際網路的下一代標準，是構建以及呈現網際網路內容的一種語言方式．被認為是網際網路的核 </p> <h4 id="vue3">vue3.0</h4> <p> 說起響應式前端框架，比較而言，bootstrap還是不錯的，雖然可能很多文件都是英文的。今天就整理下自己在學習及使用bootstrap3時的重要知識點和使用案例 參考資料： runoob的bootstrap中文教程：http://www.runoob.com/bootstrap/bootstrap-forms.html bootstrap中文網：http://www.bootcss.com/ bootstrap 各種實用案例(指令碼之家)： http://www.jb51.net/Special/769.htm jquery api : http://www.jquery123.com/ 1. 簡介 Bootstrap，來自 Twitter，是目前最受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT。主要是為了支援移動端，所以pc端就很難做得跟以前pc那樣複雜漂亮。 在之前的 Bootstrap 版本中（直到 2.x），您需要手動引用另一個 CSS，才能讓整個專案友好的支援移動裝置。 現在不一樣了，Bootstrap 3 預設的 CSS 本身就對移動裝置友好支援。 </p> </div> </body> </html>