亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

annuaire recherche
Bootstrap 基礎(chǔ)教程 Bootstrap 環(huán)境安裝 Bootstrap 教程 Bootstrap CSS Bootstrap CSS 概覽 Bootstrap 按鈕 Bootstrap 表單 Bootstrap 表格 Bootstrap 代碼 Bootstrap 輔助類(lèi) Bootstrap 排版 Bootstrap 圖片 Bootstrap 網(wǎng)格系統(tǒng) Bootstrap 網(wǎng)格系統(tǒng)實(shí)例：堆疊的水平 Bootstrap 網(wǎng)格系統(tǒng)實(shí)例：手機(jī)、平板電腦、臺(tái)式電腦 Bootstrap 網(wǎng)格系統(tǒng)實(shí)例：中型和大型設(shè)備 Bootstrap 響應(yīng)式實(shí)用工具 Bootstrap 布局組件 Bootstrap Well Bootstrap 按鈕下拉菜單 Bootstrap 按鈕組 Bootstrap 標(biāo)簽 Bootstrap 超大屏幕（Jumbotron） Bootstrap 導(dǎo)航欄 Bootstrap 導(dǎo)航元素 Bootstrap 多媒體對(duì)象（Media Object） Bootstrap 分頁(yè) Bootstrap 徽章（Badges） Bootstrap 進(jìn)度條 Bootstrap 警告（Alerts） Bootstrap 列表組 Bootstrap 面板（Panels） Bootstrap 面包屑導(dǎo)航（Breadcrumbs） Bootstrap 輸入框組 Bootstrap 縮略圖 Bootstrap 下拉菜單（Dropdowns） Bootstrap 頁(yè)面標(biāo)題（Page Header） Bootstrap 字體圖標(biāo)(Glyphicons) Bootstrap 插件 Bootstrap 按鈕（Button） Bootstrap 標(biāo)簽頁(yè)（Tab） Bootstrap 插件概覽 Bootstrap 彈出框（Popover） Bootstrap 附加導(dǎo)航（Affix） Bootstrap 滾動(dòng)監(jiān)聽(tīng)（Scrollspy） Bootstrap 過(guò)渡效果（Transition） Bootstrap 警告框（Alert） Bootstrap 輪播（Carousel） Bootstrap 模態(tài)框（Modal）插件 Bootstrap 提示工具（Tooltip） Bootstrap 下拉菜單（Dropdown） Bootstrap 折疊（Collapse） Bootstrap 附錄 Bootstrap CSS編碼規(guī)范 Bootstrap HTML編碼規(guī)范 Bootstrap UI 編輯器
personnages

Bootstrap 滾動(dòng)監(jiān)聽(tīng)（Scrollspy）

滾動(dòng)監(jiān)聽(tīng)（Scrollspy）插件，即自動(dòng)更新導(dǎo)航插件，會(huì)根據(jù)滾動(dòng)條的位置自動(dòng)更新對(duì)應(yīng)的導(dǎo)航目標(biāo)。其基本的實(shí)現(xiàn)是隨著您的滾動(dòng)，基于滾動(dòng)條的位置向?qū)Ш綑谔砑?.active class。

如果您想要單獨(dú)引用該插件的功能，那么您需要引用 scrollspy.js?；蛘?，正如 Bootstrap 插件概覽 一章中所提到，您可以引用 bootstrap.js 或壓縮版的 bootstrap.min.js。

用法

您可以向頂部導(dǎo)航添加滾動(dòng)監(jiān)聽(tīng)行為：

  • 通過(guò) data 屬性：向您想要監(jiān)聽(tīng)的元素（通常是 body）添加 data-spy="scroll"。然后添加帶有 Bootstrap .nav 組件的父元素的 ID 或 class 的屬性 data-target。為了它能正常工作，您必須確保頁(yè)面主體中有匹配您所要監(jiān)聽(tīng)鏈接的 ID 的元素存在。 
    <body?data-spy="scroll"?data-target=".navbar-example">
??...
??<div?class="navbar-example">
????<ul?class="nav?nav-tabs">
??????...
????</ul>
??</div>
??...
</body>
  • 通過(guò) JavaScript：您可以通過(guò) JavaScript 調(diào)用滾動(dòng)監(jiān)聽(tīng)，選取要監(jiān)聽(tīng)的元素，然后調(diào)用 .scrollspy() 函數(shù)： 
    $('body').scrollspy({?target:?'.navbar-example'?})

實(shí)例

下面的實(shí)例演示了通過(guò) data 屬性使用滾動(dòng)監(jiān)聽(tīng)（Scrollspy）插件：

<!DOCTYPE?html>
<html>
<head>
???<title>Bootstrap?實(shí)例?-?滾動(dòng)監(jiān)聽(tīng)（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="#">教程名稱(chēng)</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?是一個(gè)由蘋(píng)果公司開(kāi)發(fā)和發(fā)布的手機(jī)操作系統(tǒng)。最初是于?2007?年首次發(fā)布?iPhone、iPod?Touch?和?Apple?
??????TV。iOS?派生自?OS?X，它們共享?Darwin?基礎(chǔ)。OS?X?操作系統(tǒng)是用在蘋(píng)果電腦上，iOS?是蘋(píng)果的移動(dòng)版本。
???</p>
???<h4?id="svn">SVN</h4>
???<p>Apache?Subversion，通?？s寫(xiě)為?SVN，是一款開(kāi)源的版本控制系統(tǒng)軟件。Subversion?由?CollabNet?公司在?2000?年創(chuàng)建。但是現(xiàn)在它已經(jīng)發(fā)展為?Apache?Software?Foundation?的一個(gè)項(xiàng)目，因此擁有豐富的開(kāi)發(fā)人員和用戶(hù)社區(qū)。
???</p>
???<h4?id="jmeter">jMeter</h4>
???<p>jMeter?是一款開(kāi)源的測(cè)試軟件。它是?100%?純?Java?應(yīng)用程序，用于負(fù)載和性能測(cè)試。
???</p>
???<h4?id="ejb">EJB</h4>
???<p>Enterprise?Java?Beans（EJB）是一個(gè)創(chuàng)建高度可擴(kuò)展性和強(qiáng)大企業(yè)級(jí)應(yīng)用程序的開(kāi)發(fā)架構(gòu)，部署在兼容應(yīng)用程序服務(wù)器（比如?JBOSS、Web?Logic?等）的?J2EE?上。
???</p>
???<h4?id="spring">Spring</h4>
???<p>Spring?框架是一個(gè)開(kāi)源的?Java?平臺(tái)，為快速開(kāi)發(fā)功能強(qiáng)大的?Java?應(yīng)用程序提供了完備的基礎(chǔ)設(shè)施支持。
???</p>
???<p>Spring?框架最初是由?Rod?Johnson?編寫(xiě)的，在?2003?年?6?月首次發(fā)布于?Apache?2.0?許可證下。
???</p>
</div>

</body>
</html>

結(jié)果如下所示：

滾動(dòng)監(jiān)聽(tīng)（Scrollspy）插件

選項(xiàng)

通過(guò) data 屬性或 JavaScript 來(lái)傳遞。下表列出了這些選項(xiàng)：

選項(xiàng)名稱(chēng) 類(lèi)型/默認(rèn)值 Data 屬性名稱(chēng) 描述
offset number
默認(rèn)值：10 		data-offset 當(dāng)計(jì)算滾動(dòng)位置時(shí)，距離頂部的偏移像素。

方法

.scrollspy('refresh')：當(dāng)通過(guò) JavaScript 調(diào)用 scrollspy 方法時(shí)，您需要調(diào)用 .refresh 方法來(lái)更新 DOM。這在 DOM 的任意元素發(fā)生變更（即，您添加或移除了某些元素）時(shí)非常有用。下面是使用該方法的語(yǔ)法。

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

實(shí)例

下面的實(shí)例演示了 .scrollspy('refresh') 方法的用法：

<!DOCTYPE?html>
<html>
<head>
???<title>Bootstrap?實(shí)例?-?滾動(dòng)監(jiān)聽(tīng)（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="#">教程名稱(chēng)</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);">
?????????&times;?刪除該部分</a></small>
??????</h4>
??????<p>iOS?是一個(gè)由蘋(píng)果公司開(kāi)發(fā)和發(fā)布的手機(jī)操作系統(tǒng)。最初是于?2007?年首次發(fā)布?iPhone、iPod?Touch?和?Apple?
??????TV。iOS?派生自?OS?X，它們共享?Darwin?基礎(chǔ)。OS?X?操作系統(tǒng)是用在蘋(píng)果電腦上，iOS?是蘋(píng)果的移動(dòng)版本。</p>
???</div>
???<div?class="section">
??????<h4?id="svn">SVN<small></small></h4>
??????<p>Apache?Subversion，通?？s寫(xiě)為?SVN，是一款開(kāi)源的版本控制系統(tǒng)軟件。Subversion?由?CollabNet?公司在?2000?年創(chuàng)建。但是現(xiàn)在它已經(jīng)發(fā)展為?Apache?Software?Foundation?的一個(gè)項(xiàng)目，因此擁有豐富的開(kāi)發(fā)人員和用戶(hù)社區(qū)。</p>
???</div>
???<div?class="section">
??????<h4?id="jmeter">jMeter<small><a?href="#"?onclick="removeSection(this);">
??????&times;?刪除該部分</a></small>
??????</h4>
??????<p>jMeter?是一款開(kāi)源的測(cè)試軟件。它是?100%?純?Java?應(yīng)用程序，用于負(fù)載和性能測(cè)試。</p>
???</div>
???<div?class="section">
??????<h4?id="ejb">EJB</h4>
??????<p>Enterprise?Java?Beans（EJB）是一個(gè)創(chuàng)建高度可擴(kuò)展性和強(qiáng)大企業(yè)級(jí)應(yīng)用程序的開(kāi)發(fā)架構(gòu)，部署在兼容應(yīng)用程序服務(wù)器（比如?JBOSS、Web?Logic?等）的?J2EE?上。</p>
???</div>
???<div?class="section">
??????<h4?id="spring">Spring</h4>
??????<p>Spring?框架是一個(gè)開(kāi)源的?Java?平臺(tái)，為快速開(kāi)發(fā)功能強(qiáng)大的?Java?應(yīng)用程序提供了完備的基礎(chǔ)設(shè)施支持。</p>
??????<p>Spring?框架最初是由?Rod?Johnson?編寫(xiě)的，在?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é)果如下所示：

滾動(dòng)監(jiān)聽(tīng)（Scrollspy）插件方法

事件

下表列出了滾動(dòng)監(jiān)聽(tīng)中要用到事件。這些事件可在函數(shù)中當(dāng)鉤子使用。

事件 描述 實(shí)例
activate.bs.scrollspy 每當(dāng)一個(gè)新項(xiàng)目被滾動(dòng)監(jiān)聽(tīng)激活時(shí)，觸發(fā)該事件。 
$('#myScrollspy').on('activate.bs.scrollspy',?function?()?{
??//?執(zhí)行一些動(dòng)作...
})

實(shí)例

下面的實(shí)例演示了 activate.bs.scrollspy 事件的用法：

<!DOCTYPE?html>
<html>
<head>
???<title>Bootstrap?實(shí)例?-?滾動(dòng)監(jiān)聽(tīng)（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="#">教程名稱(chēng)</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);">
?????????&times;?刪除該部分</a></small>
??????</h4>
??????<p>iOS?是一個(gè)由蘋(píng)果公司開(kāi)發(fā)和發(fā)布的手機(jī)操作系統(tǒng)。最初是于?2007?年首次發(fā)布?iPhone、iPod?Touch?和?Apple?
??????TV。iOS?派生自?OS?X，它們共享?Darwin?基礎(chǔ)。OS?X?操作系統(tǒng)是用在蘋(píng)果電腦上，iOS?是蘋(píng)果的移動(dòng)版本。</p>
???</div>
???<div?class="section">
??????<h4?id="svn">SVN<small></small></h4>
??????<p>Apache?Subversion，通常縮寫(xiě)為?SVN，是一款開(kāi)源的版本控制系統(tǒng)軟件。Subversion?由?CollabNet?公司在?2000?年創(chuàng)建。但是現(xiàn)在它已經(jīng)發(fā)展為?Apache?Software?Foundation?的一個(gè)項(xiàng)目，因此擁有豐富的開(kāi)發(fā)人員和用戶(hù)社區(qū)。</p>
???</div>
???<div?class="section">
??????<h4?id="jmeter">jMeter<small><a?href="#"?onclick="removeSection(this);">
?????????&times;?刪除該部分</a></small>
??????</h4>
??????<p>jMeter?是一款開(kāi)源的測(cè)試軟件。它是?100%?純?Java?應(yīng)用程序，用于負(fù)載和性能測(cè)試。</p>
???</div>
???<div?class="section">
??????<h4?id="ejb">EJB</h4>
??????<p>Enterprise?Java?Beans（EJB）是一個(gè)創(chuàng)建高度可擴(kuò)展性和強(qiáng)大企業(yè)級(jí)應(yīng)用程序的開(kāi)發(fā)架構(gòu)，部署在兼容應(yīng)用程序服務(wù)器（比如?JBOSS、Web?Logic?等）的?J2EE?上。</p>
???</div>
???<div?class="section">
??????<h4?id="spring">Spring</h4>
??????<p>Spring?框架是一個(gè)開(kāi)源的?Java?平臺(tái)，為快速開(kāi)發(fā)功能強(qiáng)大的?Java?應(yīng)用程序提供了完備的基礎(chǔ)設(shè)施支持。</p>
??????<p>Spring?框架最初是由?Rod?Johnson?編寫(xiě)的，在?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é)果如下所示：

滾動(dòng)監(jiān)聽(tīng)（Scrollspy）插件事件

更多實(shí)例

創(chuàng)建水平滾動(dòng)監(jiān)聽(tīng)

以下實(shí)例演示了如何創(chuàng)建水平滾動(dòng)監(jiān)聽(tīng):

實(shí)例


<!-- 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>
效果預(yù)覽 ?

如何創(chuàng)建垂直滾動(dòng)監(jiān)聽(tīng)

以下實(shí)例演示了如何創(chuàng)建垂直滾動(dòng)監(jiān)聽(tīng):

實(shí)例


<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>
效果預(yù)覽 ?
Article précédent： Article suivant：