Bootstrap 基礎(chǔ)教程
Bootstrap 環(huán)境安裝
Bootstrap 教程
Bootstrap CSS
Bootstrap CSS 概覽
Bootstrap 按鈕
Bootstrap 表單
Bootstrap 表格
Bootstrap 代碼
Bootstrap 輔助類
Bootstrap 排版
Bootstrap 圖片
Bootstrap 網(wǎng)格系統(tǒng)
Bootstrap 網(wǎng)格系統(tǒng)實例：堆疊的水平
Bootstrap 網(wǎng)格系統(tǒng)實例：手機、平板電腦、臺式電腦
Bootstrap 網(wǎng)格系統(tǒng)實例：中型和大型設(shè)備
Bootstrap 響應(yīng)式實用工具
Bootstrap 布局組件
Bootstrap Well
Bootstrap 按鈕下拉菜單
Bootstrap 按鈕組
Bootstrap 標(biāo)簽
Bootstrap 超大屏幕（Jumbotron）
Bootstrap 導(dǎo)航欄
Bootstrap 導(dǎo)航元素
Bootstrap 多媒體對象（Media Object）
Bootstrap 分頁
Bootstrap 徽章（Badges）
Bootstrap 進(jìn)度條
Bootstrap 警告（Alerts）
Bootstrap 列表組
Bootstrap 面板（Panels）
Bootstrap 面包屑導(dǎo)航（Breadcrumbs）
Bootstrap 輸入框組
Bootstrap 縮略圖
Bootstrap 下拉菜單（Dropdowns）
Bootstrap 頁面標(biāo)題（Page Header）
Bootstrap 字體圖標(biāo)(Glyphicons)
Bootstrap 插件
Bootstrap 按鈕（Button）
Bootstrap 標(biāo)簽頁（Tab）
Bootstrap 插件概覽
Bootstrap 彈出框（Popover）
Bootstrap 附加導(dǎo)航（Affix）
Bootstrap 滾動監(jiān)聽（Scrollspy）
Bootstrap 過渡效果（Transition）
Bootstrap 警告框（Alert）
Bootstrap 輪播（Carousel）
Bootstrap 模態(tài)框（Modal）插件
Bootstrap 提示工具（Tooltip）
Bootstrap 下拉菜單（Dropdown）
Bootstrap 折疊（Collapse）
Bootstrap 附錄
Bootstrap CSS編碼規(guī)范
Bootstrap HTML編碼規(guī)范
Bootstrap UI 編輯器
?
This document uses PHP Chinese website manual Release
characters
Bootstrap 滾動監(jiān)聽（Scrollspy）
滾動監(jiān)聽（Scrollspy）插件，即自動更新導(dǎo)航插件，會根據(jù)滾動條的位置自動更新對應(yīng)的導(dǎo)航目標(biāo)。其基本的實現(xiàn)是隨著您的滾動，基于滾動條的位置向?qū)Ш綑谔砑?.active class。
如果您想要單獨引用該插件的功能，那么您需要引用 scrollspy.js?；蛘?，正如 Bootstrap 插件概覽 一章中所提到，您可以引用 bootstrap.js 或壓縮版的 bootstrap.min.js。
用法
您可以向頂部導(dǎo)航添加滾動監(jiān)聽行為：
-
通過 data 屬性：向您想要監(jiān)聽的元素（通常是 body）添加 data-spy="scroll"。然后添加帶有 Bootstrap .nav 組件的父元素的 ID 或 class 的屬性 data-target。為了它能正常工作，您必須確保頁面主體中有匹配您所要監(jiān)聽鏈接的 ID 的元素存在。
<body?data-spy="scroll"?data-target=".navbar-example"> ??... ??<div?class="navbar-example"> ????<ul?class="nav?nav-tabs"> ??????... ????</ul> ??</div> ??... </body>
-
通過 JavaScript：您可以通過 JavaScript 調(diào)用滾動監(jiān)聽，選取要監(jiān)聽的元素，然后調(diào)用 .scrollspy() 函數(shù)：
$('body').scrollspy({?target:?'.navbar-example'?})
實例
下面的實例演示了通過 data 屬性使用滾動監(jiān)聽（Scrollspy）插件：
<!DOCTYPE?html> <html> <head> ???<title>Bootstrap?實例?-?滾動監(jiān)聽（Scrollspy）插件</title> ???<link?href="/bootstrap/css/bootstrap.min.css"?rel="stylesheet"> ???<script?src="/scripts/jquery.min.js"></script> ???<script?src="/bootstrap/js/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">切換導(dǎo)航</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?是一個由蘋果公司開發(fā)和發(fā)布的手機操作系統(tǒng)。最初是于?2007?年首次發(fā)布?iPhone、iPod?Touch?和?Apple? ??????TV。iOS?派生自?OS?X，它們共享?Darwin?基礎(chǔ)。OS?X?操作系統(tǒng)是用在蘋果電腦上，iOS?是蘋果的移動版本。 ???</p> ???<h4?id="svn">SVN</h4> ???<p>Apache?Subversion，通?？s寫為?SVN，是一款開源的版本控制系統(tǒng)軟件。Subversion?由?CollabNet?公司在?2000?年創(chuàng)建。但是現(xiàn)在它已經(jīng)發(fā)展為?Apache?Software?Foundation?的一個項目，因此擁有豐富的開發(fā)人員和用戶社區(qū)。 ???</p> ???<h4?id="jmeter">jMeter</h4> ???<p>jMeter?是一款開源的測試軟件。它是?100%?純?Java?應(yīng)用程序，用于負(fù)載和性能測試。 ???</p> ???<h4?id="ejb">EJB</h4> ???<p>Enterprise?Java?Beans（EJB）是一個創(chuàng)建高度可擴展性和強大企業(yè)級應(yīng)用程序的開發(fā)架構(gòu)，部署在兼容應(yīng)用程序服務(wù)器（比如?JBOSS、Web?Logic?等）的?J2EE?上。 ???</p> ???<h4?id="spring">Spring</h4> ???<p>Spring?框架是一個開源的?Java?平臺，為快速開發(fā)功能強大的?Java?應(yīng)用程序提供了完備的基礎(chǔ)設(shè)施支持。 ???</p> ???<p>Spring?框架最初是由?Rod?Johnson?編寫的，在?2003?年?6?月首次發(fā)布于?Apache?2.0?許可證下。 ???</p> </div> </body> </html>
結(jié)果如下所示：
選項
通過 data 屬性或 JavaScript 來傳遞。下表列出了這些選項：
| 選項名稱 | 類型/默認(rèn)值 | Data 屬性名稱 | 描述 |
|---|---|---|---|
| offset | number 默認(rèn)值：10 |
data-offset | 當(dāng)計算滾動位置時，距離頂部的偏移像素。 |
方法
.scrollspy('refresh')：當(dāng)通過 JavaScript 調(diào)用 scrollspy 方法時，您需要調(diào)用 .refresh 方法來更新 DOM。這在 DOM 的任意元素發(fā)生變更（即，您添加或移除了某些元素）時非常有用。下面是使用該方法的語法。
$('[data-spy="scroll"]').each(function?()?{
??var?$spy?=?$(this).scrollspy('refresh')
})
實例
下面的實例演示了 .scrollspy('refresh') 方法的用法：
<!DOCTYPE?html>
<html>
<head>
???<title>Bootstrap?實例?-?滾動監(jiān)聽（Scrollspy）插件方法</title>
???<link?href="/bootstrap/css/bootstrap.min.css"?rel="stylesheet">
???<script?src="/scripts/jquery.min.js"></script>
???<script?src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<nav?id="myScrollspy"?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">切換導(dǎo)航</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?class="active"><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="#myScrollspy"?data-offset="0"?
???style="height:200px;overflow:auto;?position:?relative;">
???<div?class="section">
??????<h4?id="ios">iOS<small><a?href="#"?onclick="removeSection(this);">
?????????×?刪除該部分</a></small>
??????</h4>
??????<p>iOS?是一個由蘋果公司開發(fā)和發(fā)布的手機操作系統(tǒng)。最初是于?2007?年首次發(fā)布?iPhone、iPod?Touch?和?Apple?
??????TV。iOS?派生自?OS?X，它們共享?Darwin?基礎(chǔ)。OS?X?操作系統(tǒng)是用在蘋果電腦上，iOS?是蘋果的移動版本。</p>
???</div>
???<div?class="section">
??????<h4?id="svn">SVN<small></small></h4>
??????<p>Apache?Subversion，通?？s寫為?SVN，是一款開源的版本控制系統(tǒng)軟件。Subversion?由?CollabNet?公司在?2000?年創(chuàng)建。但是現(xiàn)在它已經(jīng)發(fā)展為?Apache?Software?Foundation?的一個項目，因此擁有豐富的開發(fā)人員和用戶社區(qū)。</p>
???</div>
???<div?class="section">
??????<h4?id="jmeter">jMeter<small><a?href="#"?onclick="removeSection(this);">
??????×?刪除該部分</a></small>
??????</h4>
??????<p>jMeter?是一款開源的測試軟件。它是?100%?純?Java?應(yīng)用程序，用于負(fù)載和性能測試。</p>
???</div>
???<div?class="section">
??????<h4?id="ejb">EJB</h4>
??????<p>Enterprise?Java?Beans（EJB）是一個創(chuàng)建高度可擴展性和強大企業(yè)級應(yīng)用程序的開發(fā)架構(gòu)，部署在兼容應(yīng)用程序服務(wù)器（比如?JBOSS、Web?Logic?等）的?J2EE?上。</p>
???</div>
???<div?class="section">
??????<h4?id="spring">Spring</h4>
??????<p>Spring?框架是一個開源的?Java?平臺，為快速開發(fā)功能強大的?Java?應(yīng)用程序提供了完備的基礎(chǔ)設(shè)施支持。</p>
??????<p>Spring?框架最初是由?Rod?Johnson?編寫的，在?2003?年?6?月首次發(fā)布于?Apache?2.0?許可證下。</p>
???</div>
</div>
<script?type="text/javascript">
???$(function(){
???removeSection?=?function(e)?{
??????$(e).parents(".section").remove();
??????$('[data-spy="scroll"]').each(function?()?{
?????????var?$spy?=?$(this).scrollspy('refresh')
??????});
???}
???$("#myScrollspy").scrollspy();
});
</script>
</body>
</html>
結(jié)果如下所示：
事件
下表列出了滾動監(jiān)聽中要用到事件。這些事件可在函數(shù)中當(dāng)鉤子使用。
| 事件 | 描述 | 實例 |
|---|---|---|
| activate.bs.scrollspy | 每當(dāng)一個新項目被滾動監(jiān)聽激活時，觸發(fā)該事件。 | $('#myScrollspy').on('activate.bs.scrollspy',?function?()?{
??//?執(zhí)行一些動作...
}) |
實例
下面的實例演示了 activate.bs.scrollspy 事件的用法：
<!DOCTYPE?html>
<html>
<head>
???<title>Bootstrap?實例?-?滾動監(jiān)聽（Scrollspy）插件事件</title>
???<link?href="/bootstrap/css/bootstrap.min.css"?rel="stylesheet">
???<script?src="/scripts/jquery.min.js"></script>
???<script?src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<nav?id="myScrollspy"?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">切換導(dǎo)航</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?class="active"><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="#myScrollspy"?data-offset="0"?
???style="height:200px;overflow:auto;?position:?relative;">
???<div?class="section">
??????<h4?id="ios">iOS<small><a?href="#"?onclick="removeSection(this);">
?????????×?刪除該部分</a></small>
??????</h4>
??????<p>iOS?是一個由蘋果公司開發(fā)和發(fā)布的手機操作系統(tǒng)。最初是于?2007?年首次發(fā)布?iPhone、iPod?Touch?和?Apple?
??????TV。iOS?派生自?OS?X，它們共享?Darwin?基礎(chǔ)。OS?X?操作系統(tǒng)是用在蘋果電腦上，iOS?是蘋果的移動版本。</p>
???</div>
???<div?class="section">
??????<h4?id="svn">SVN<small></small></h4>
??????<p>Apache?Subversion，通?？s寫為?SVN，是一款開源的版本控制系統(tǒng)軟件。Subversion?由?CollabNet?公司在?2000?年創(chuàng)建。但是現(xiàn)在它已經(jīng)發(fā)展為?Apache?Software?Foundation?的一個項目，因此擁有豐富的開發(fā)人員和用戶社區(qū)。</p>
???</div>
???<div?class="section">
??????<h4?id="jmeter">jMeter<small><a?href="#"?onclick="removeSection(this);">
?????????×?刪除該部分</a></small>
??????</h4>
??????<p>jMeter?是一款開源的測試軟件。它是?100%?純?Java?應(yīng)用程序，用于負(fù)載和性能測試。</p>
???</div>
???<div?class="section">
??????<h4?id="ejb">EJB</h4>
??????<p>Enterprise?Java?Beans（EJB）是一個創(chuàng)建高度可擴展性和強大企業(yè)級應(yīng)用程序的開發(fā)架構(gòu)，部署在兼容應(yīng)用程序服務(wù)器（比如?JBOSS、Web?Logic?等）的?J2EE?上。</p>
???</div>
???<div?class="section">
??????<h4?id="spring">Spring</h4>
??????<p>Spring?框架是一個開源的?Java?平臺，為快速開發(fā)功能強大的?Java?應(yīng)用程序提供了完備的基礎(chǔ)設(shè)施支持。</p>
??????<p>Spring?框架最初是由?Rod?Johnson?編寫的，在?2003?年?6?月首次發(fā)布于?Apache?2.0?許可證下。</p>
???</div>
</div>
<span?id="activeitem"?style="color:red;"></span>
<script?type="text/javascript">
???$(function(){
??????removeSection?=?function(e)?{
??????$(e).parents(".section").remove();
??????$('[data-spy="scroll"]').each(function?()?{
??????????var?$spy?=?$(this).scrollspy('refresh')
??????});
???}
???$("#myScrollspy").scrollspy();
???$('#myScrollspy').on('activate.bs.scrollspy',?function?()?{
??????var?currentItem?=?$(".nav?li.active?>?a").text();
??????$("#activeitem").html("目前您正在查看?-?"?+?currentItem);
???})
});
</script>
</body>
</html>
結(jié)果如下所示：
更多實例
創(chuàng)建水平滾動監(jiān)聽
以下實例演示了如何創(chuàng)建水平滾動監(jiān)聽:
實例
效果預(yù)覽 ?<!-- The navbar: used to jump to a section in the scrollable area -->
<nav class="navbar navbar-inverse navbar-fixed-top">
...
? <ul class="nav navbar-nav">
??? <li><a href="#section1">Section 1</a></li>
??? ...
</nav>
<!-- The scrollable area -->
<div data-spy="scroll" data-target=".navbar" data-offset="12">
? <!-- Section 1 -->
? <div id="section1">
??? <h1>Section 1</h1>
??? <p>Try to scroll this page and look at the navigation bar while scrolling!</p>
? </div>
? ...
</div>
如何創(chuàng)建垂直滾動監(jiān)聽
以下實例演示了如何創(chuàng)建垂直滾動監(jiān)聽:
實例
效果預(yù)覽 ?<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">
? <div class="container">
??? <div class="row">
????? <nav class="col-sm-3" id="myScrollspy">
??????? <ul class="nav nav-pills nav-stacked">
????????? <li><a href="#section1">Section 1</a></li>
????????? ...
??????? </ul>
????? </nav>
????? <div class="col-sm-9">
??????? <div id="section1">
????????? <h1>Section 1</h1>
????????? <p>Try to scroll this page and look at the navigation list while scrolling!</p>
??????? </div>
??????? ...
????? </div>
??? </div>
? </div>
</body>