bootstrap -- (筆記四)
阿新 • • 發佈：2018-12-17
bootstrap外掛:
Bootstrap 自帶 12 種 jQuery 外掛，擴充套件了功能，可以給站點新增更多的互動
利用 Bootstrap 資料 API, 可以在不編寫任何程式碼的情況被觸發
引用bootstrap外掛: 引入bootstrap.js 或bootstrap.min.js
因為bootstrap外掛依賴jquery, 所以在引入bootstrap.js 或bootstrap.min.js前保證引入jquery
模態框外掛:
模態框（Modal）是覆蓋在父窗體上的子窗體
子窗體可提供資訊, 互動等
用法
在目標元素上設定屬性data-toggle="modal" 和 data-target="#id"(要切換的目標模態框元素)
使用js或jquery程式碼 $('#identifier').modal(options)
<!-- 按鈕觸發模態框 --> <button class="btn btn-primary" data-toggle="modal" data-target="#myModal"> 開始演示模態框 </button> <!-- 模態框（Modal） --> <div class="modal" id="myModal" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> × </button> <h4 class="modal-title" id="myModalLabel"> 模態框標題 </h4> </div> <div class="modal-body"> 在這裡新增一些文字 </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button> <button type="button" class="btn btn-primary"> 提交更改 </button> </div> </div> </div> </div>
.modal 用來把 <div> 的內容識別為模態框, 它的效果是遮擋住全屏, 還得在它裡面新增modal-dialog
.fade 當模態框被切換時，它會引起內容淡入淡出
.modal-dialog為一個模態對話方塊設定基本樣式
.modal-content用於包裹模態框內容設定樣式
.close 用於為模態視窗的關閉按鈕設定樣式
.modal-head用於為模態視窗的標題設定樣式
.modal-body用於為模態視窗的主體設定樣式
.modal-footer用於為模態視窗的底部設定樣式
data-toggle="modal"，HTML5 自定義的 data 屬性 用於開啟模態視窗
data-dismiss="modal"，HTML5 自定義的 data 屬性 用於關閉模態視窗
data-keyboard可以設定按esc鍵時關閉模態框(預設是true), 如果設定data-keyboard='false'則esc鍵不能關閉模態框
模態框事件
- show.bs.modal 在呼叫 show 方法後觸發
- shown.bs.modal 當模態框對使用者可見時觸發（將等待 CSS 過渡效果完成）
- hide.bs.modal 當呼叫 hide 例項方法時觸發
- hidden.bs.modal 當模態框完全對使用者隱藏時觸發
當點選關閉後, 會觸發hide.bs.model事件
<script>
$(function () {
$('#myModal').on('hide.bs.modal', function () {
alert('嘿，我聽說您喜歡關閉模態框...');
})
$('#myModal').on('shown.bs.modal', function () {
alert('嘿，我聽說你喜歡開啟模態框...');
})
});
</script>這裡需要清楚一點: 點關閉是data-dismiss='modal'的功能, 這個功能執行後, 也就觸發上述的hidden.bs.modal事件
下拉選單:
使用下拉選單（Dropdown）外掛，您可以向任何元件（比如導航欄、標籤頁、膠囊式導航選單、按鈕等）新增下拉選單
同模態框(data-toggle='modal')類似, 這裡向目標元素新增 data-toggle="dropdown" 來切換下拉選單
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">菜鳥教程</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">iOS</a></li>
<li><a href="#">SVN</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Java <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">jmeter</a></li>
<li><a href="#">EJB</a></li>
<li><a href="#">Jasper Report</a></li>
<li class="divider"></li>
<li><a href="#">分離的連結</a></li>
<li class="divider"></li>
<li><a href="#">另一個分離的連結</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>選單欄中使用
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">
Java <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Swing</a></li>
<li><a href="#">jMeter</a></li>
<li><a href="#">EJB</a></li>
<li class="divider"></li>
<li><a href="#">分離的連結</a></li>
</ul>
</li>
<li><a href="#">PHP</a></li>
</ul>滾動監聽外掛:
其基本的實現是隨著您的滾動，基於滾動條的位置嚮導航欄新增 .active
向您想要監聽的元素（可能是 body）新增 data-spy="scroll", 然後新增屬性 data-target
<nav id="navbar-example" class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<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">
<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>
</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>刪除某些滾動項
<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="#" class='del'> × 刪除該部分</a></small> </h4>
<p>iOS 是一個由蘋果公司開發和釋出的手機作業系統</p>
</div>
<div class="section">
<h4 id="svn">SVN<small></small></h4>
<p>Apache Subversion，通常縮寫為 SVN，是一款開源的版本控制系統軟體</p>
</div>
<div class="section">
<h4 id="jmeter">jMeter<small><a href="#" class='del'> × 刪除該部分</a></small</h4>
<p>jMeter 是一款開源的測試軟體。它是 100% 純 Java 應用程式，用於負載和效能測試。</p>
</div>
<div class="section">
<h4 id="ejb">EJB</h4>
<p>Enterprise Java Beans（EJB）是一個建立高度可擴充套件性和強大企業級應用程式的開發架構</p>
</div>
<div class="section">
<h4 id="spring">Spring</h4>
<p>Spring 框架是一個開源的 Java 平臺</p>
<p>Spring 框架最初是由 Rod Johnson 編寫的</p>
</div>
</div><script type="text/javascript">
$(function(){
$('.del').on('click', function(){
$(this).parents('.section').remove();
})
});
</script>定位當前瀏覽的位置
span是加上去的標籤, 指示當前瀏覽的位置資訊
<span style="color:red;" id="current-view"></span>
<script type="text/javascript">
$(function(){
$('.del').on('click', function(){
$(this).parents('.section').remove();
})
$('#myScrollspy').on('activate.bs.scrollspy', function(){
var current_item = $('nav li.active > a').text();
$('#current-view').html("您目前正在瀏覽--" + current_item);
})
});
</script>注: $("...").text()用於獲取元素內容, 如果$("...")是多個元素, 則獲取到的內容會拼接在一起
如上的下拉選單, 由啟用時(包含下拉項), 所以使用$("...").text()獲取到的內容如下:
這樣就相當於精準定位瀏覽的目標
垂直滾動
可以水平滾動, 也可以垂直滾動, 還可以對整個body滾動(很多頁面都是對整個body滾動)
<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">
<div class="container">
<div class="row">
<nav class="col-sm-3" id="myScrollspy">
<div class="container-fluid">
<div class="container-fluid">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#section41">Section 4-1</a></li>
<li><a href="#section42">Section 4-2</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="col-sm-9">
<div id="section1" style="height:200px;background-color:blue">
<h1>Section 1</h1>
</div>
<div id="section2" style="height:200px;background-color:red">
<h1>Section 2</h1>
</div>
<div id="section3" style="height:200px;background-color:black">
<h1>Section 3</h1>
</div>
<div id="section41" style="height:200px;background-color:pink">
<h1>Section 4-1</h1>
</div>
<div id="section42" style="height:200px;background-color:green">
<h1>Section 4-2</h1>
</div>
</div>
</div>
</div>
</body>標籤頁(選單欄):
為要切換的元素新增 data-toggle="tab" 屬性(切換時, 顯示相應的內容)
<ul id="myTab" class="nav nav-tabs">
<li class="active">
<a href="#home" data-toggle="tab"> 菜鳥教程</a>
</li>
<li><a href="#ios" data-toggle="tab">iOS</a></li>
<li class="dropdown">
<a href="#" id="myTabDrop1" class="dropdown-toggle"
data-toggle="dropdown">Java <b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
<li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li>
<li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></li>
</ul>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="home">
<p>
菜鳥教程是一個提供最新的web技術站點，本站免費提供了建站相關的技術文件，幫助廣大web技術愛
好者快速入門並建立自己的網站。菜鳥先飛早入行——學的不僅是技術，更是夢想。
</p>
</div>
<div class="tab-pane fade" id="ios">
<p>
iOS 是一個由蘋果公司開發和釋出的手機作業系統。最初是於 2007 年首次釋出 iPhone、iPod
Touch 和 Apple TV。iOS 派生自 OS X，它們共享 Darwin 基礎。OS X 作業系統是用在蘋果電腦
上，iOS 是蘋果的移動版本。
</p>
</div>
<div class="tab-pane fade" id="jmeter">
<p>jMeter 是一款開源的測試軟體。它是 100% 純 Java 應用程式，用於負載和效能測試。</p>
</div>
<div class="tab-pane fade" id="ejb">
<p>
Enterprise Java Beans（EJB）是一個建立高度可擴充套件性和強大企業級應用程式的開發架構，部署
在相容應用程式伺服器（比如 JBOSS、Web Logic 等）的 J2EE 上。
</p>
</div>
</div>
標籤頁中使用show顯示指定項(也可以使用class='active'指定)
<script>
$(function () {
$('#myTab li:eq(1) a').tab('show');
});
</script>標籤頁事件
某標籤頁啟用(顯示)時, 觸發 show.bs.tab 事件
如果有下拉選單, 會具體到下拉選單中的項
事件物件中的target表示當前被啟用的標籤項, relatedTarget表示當前啟用項的前一個啟用項
$(function(){
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
// 獲取當前標籤頁的內容
var activeTab = $(e.target).text();
// 獲取前一個啟用的標籤頁的內容
var previousTab = $(e.relatedTarget).text();
alert(activeTab);
alert(previousTab);
});
});
</script>提示工具外掛:
提示工具外掛就是當用滑鼠移到到元素上面時, 它顯示提示文字
data-toggle='tooltip' 表示新增提示工具
title提示的內容
data-placement提示內容的方向(包括上下左右)
<body>
<a href="#" data-toggle="tooltip" title="預設的 Tooltip">預設的 Tooltip</a>.
<a href="#" data-toggle="tooltip" data-placement="left" title="左側的 Tooltip">向左的 Tooltip</a>.
<a href="#" data-toggle="tooltip" data-placement="top" title="頂部的 Tooltip">向上的 Tooltip</a>.
<a href="#" data-toggle="tooltip" data-placement="bottom" title="底部的 Tooltip">向下的 Tooltip</a>.
<a href="#" data-toggle="tooltip" data-placement="right" title="右側的 Tooltip">向的 Tooltip</a>
<br>
<button type="button" class="btn btn-default" data-toggle="tooltip" title="預設的 Tooltip">
預設的 Tooltip
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="左側的 Tooltip">
左側的 Tooltip
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="頂部的 Tooltip">
頂部的 Tooltip
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="底部的 Tooltip">
底部的 Tooltip
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="右側的 Tooltip">
右側的 Tooltip
</button>
<script>
$(function () {
$("[data-toggle='tooltip']").tooltip();
});
</script>
</body>要使提示工具正常有效, 需要在指令碼中使用tooltip函式(如上, 如下)
<script>
$(function () {
$('.tooltip-show').tooltip('show'); // 渲染就顯示出來
});
$(function () {
$('.tooltip-hide').tooltip('hide');
});
$(function () {
$('.tooltip-destroy').tooltip('destroy');
});
$(function () {
$('.tooltip-toggle').tooltip('toggle');
});
$(function () {
$(".tooltip-options a").tooltip({html : true});
});
</script>show.bs.tooltip事件
當滑鼠移入時觸發, 前題是要先使提示工具正常有效( 即要使用tooltip函式 )
<script>
$(function () {
$('.tooltip-show').tooltip();
});
$(function () {
$('.tooltip-show').on('show.bs.tooltip', function () {
alert("Alert message on show");
})
});
</script>彈出框:
彈出框（Popover）與工具提示（Tooltip）類似，都提供一個擴充套件的檢視
彈出框有兩個上下兩個部份(工具提示只有一個部份)
title包含的是上部份的內容, data-content包含的是下部份的內容
和工具提示一樣(tooltip函式), 需要在指令碼中使用popover函式
<div class="container" style="padding: 100px 50px 10px;" >
<button type="button" class="btn btn-default" title="Popover title" data-toggle="popover"
data-placement="left" data-content="左側的 Popover 中的一些內容">
左側的 Popover
</button>
<button type="button" class="btn btn-primary" title="Popover title" data-toggle="popover"
data-placement="top" data-content="頂部的 Popover 中的一些內容">
頂部的 Popover
</button>
<button type="button" class="btn btn-success" title="Popover title" data-toggle="popover"
data-placement="bottom" data-content="底部的 Popover 中的一些內容">
底部的 Popover
</button>
<button type="button" class="btn btn-warning" title="Popover title" data-toggle="popover"
data-placement="right" data-content="右側的 Popover 中的一些內容">
右側的 Popover
</button>
</div>
<script>
$(function () {
$("[data-toggle='popover']").popover();
});
</script>
</body>相應的 隱藏 / 顯示 函式
<script>
$(function () {
$('.popover-show').popover('show');
});
$(function () {
$('.popover-hide').popover('hide');
});
$(function () {
$('.popover-destroy').popover('destroy');
});
$(function () {
$('.popover-toggle').popover('toggle');
});
$(function () {
$(".popover-options a").popover({html : true });
});
</script>彈出框事件(shown.bs.popover)
<script>
$(function () {
$('.popover-show').popover('show');
});
$(function () {
$('.popover-show').on('shown.bs.popover', function () {
alert("當顯示時警告訊息");
})
});
</script>警告框:
警告框（Alert）訊息大多是用來向終端使用者顯示諸如警告或確認訊息的資訊
可以向所有的警告框訊息新增可取消（dismiss）功能
<div class="alert alert-warning">
<a href="#" class="close" data-dismiss="alert">
×
</a>
<strong>警告！</strong>您的網路連線有問題。
</div>可以在指令碼中使用函式關閉警告框(帶上close引數)
$(function(){
$(".close").click(function(){
$("#myAlert").alert('close');
$("#myAlert2").alert('close');
});
});
</script>警告框事件
當關閉警告框時, 觸發事件closed.bs.alert
<script type="text/javascript">
$(function(){
$("#myAlert").bind('closed.bs.alert', function () {
alert("警告訊息框被關閉。");
});
});
</script> 按鈕外掛:
按鈕的載入狀態
只需要簡單地向 button 元素新增 data-loading-text="Loading..." 作為其屬性
在指令碼中對其使用button函式, 引數為loading
<button id="fat-btn" class="btn btn-primary" data-loading-text="Loading..." type="button">
載入狀態
</button>
<script>
$(function() {
$(".btn").click(function(){
$(this).button('loading');
});
});
</script>切換函式
button('toggle')按壓與鬆開的狀態
button('loading')載入狀態
button('reset')恢復狀態
button('complate')完成狀態
<script type="text/javascript">
$(function () {
$("#myButtons1 .btn").click(function(){
$(this).button('toggle');
});
});
$(function() {
$("#myButtons2 .btn").click(function(){
$(this).button('loading').delay(1000).queue(function() {
});
});
});
$(function() {
$("#myButtons3 .btn").click(function(){
$(this).button('loading').delay(1000).queue(function() {
$(this).button('reset');
});
});
});
$(function() {
$("#myButton4").click(function(){
$(this).button('loading').delay(1000).queue(function() {
$(this).button('complete');
});
});
});
</script> 摺疊外掛:
data-toggle="collapse" 新增到您想要展開或摺疊的元件的連結上。
href 或 data-target 屬性新增目標元件的 id。
data-parent 屬性可以互斥其它的摺疊效果(即要把摺疊指示到同一個元素)
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
點選我進行展開，再次點選我進行摺疊。第 1 部分
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse in">
<div class="panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson
cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
點選我進行展開，再次點選我進行摺疊。第 2 部分
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson
cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</div>
</div>
</div>
</div>簡單的摺疊元件(沒屬性data-parent="#accordion")
<body>
<button type="button" class="btn btn-primary" data-toggle="collapse"
data-target="#demo">
簡單的可摺疊元件
</button>
<div id="demo" class="collapse in">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson
cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</div>
</body>摺疊動作函式
<script type="text/javascript">
$(function () {
$('#collapseFour').collapse({toggle: false});
$('#collapseTwo').collapse('show');
$('#collapseThree').collapse('toggle');
$('#collapseOne').collapse('hide');
});
</script> 事件
show.bs.collapse, shown.bs.collapse, hide.bs.collapse, hidden.bs.collapse
<script type="text/javascript">
$(function () {
$('#collapseexample').on('show.bs.collapse', function () {
alert('嘿，當您展開時會提示本警告');
})
});
</script> 圖片輪播:
<div id="myCarousel" class="carousel slide">
<!-- 輪播（Carousel）位置指示點 -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- 輪播（Carousel）專案 -->
<div class="carousel-inner">
<div class="item active">
<img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
</div>
<div class="item">
<img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
</div>
<div class="item">
<img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
</div>
</div>
<!-- 輪播（Carousel）左右導航 -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<!-- 字型圖示(向左) -->
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<!-- 字型圖示(向右) -->
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>幻燈片標題
通過 .item 內的 .carousel-caption 元素向幻燈片新增標題
只需要在該處放置任何可選的 HTML 即可，它會自動對齊並格式化
<!-- 輪播（Carousel）專案 -->
<div class="carousel-inner">
<div class="item active">
<img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
<div class="carousel-caption">標題 1</div>
</div>
<div class="item">
<img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
<div class="carousel-caption">標題 2</div>
</div>
<div class="item">
<img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
<div class="carousel-caption">標題 3</div>
</div>
</div>屬性
data-interval 自動迴圈每個專案之間延遲的時間量, 預設值5000毫秒
data-ride="carousel"頁面載入後自動輪播
<div id="myCarousel" class="carousel slide" data-interval='100' data-ride="carousel">函式(可通過按鈕控制輪播圖)
<script>
$(function(){
// 初始化輪播
$(".start-slide").click(function(){
$("#myCarousel").carousel('cycle');
});
// 停止輪播
$(".pause-slide").click(function(){
$("#myCarousel").carousel('pause');
});
// 迴圈輪播到上一個專案
$(".prev-slide").click(function(){
$("#myCarousel").carousel('prev');
});
// 迴圈輪播到下一個專案
$(".next-slide").click(function(){
$("#myCarousel").carousel('next');
});
// 迴圈輪播到某個特定的幀
$(".slide-one").click(function(){
$("#myCarousel").carousel(0);
});
$(".slide-two").click(function(){
$("#myCarousel").carousel(1);
});
$(".slide-three").click(function(){
$("#myCarousel").carousel(2);
});
});
</script>輪播事件(切換圖片時觸發)
slid.bs.carousel 當輪播完成幻燈片過渡效果時觸發該事件
slide.bs.carousel 當呼叫 slide 例項方法時立即觸發該事件
<script>
$(function(){
$('#myCarousel').on('slide.bs.carousel', function () {
alert("當呼叫 slide 例項方法時立即觸發該事件。");
});
});
</script>附加導航:
附加導航（Affix）外掛允許指定 <div> 固定在頁面的某個位置
只需要向需要監聽的元素新增 data-spy="affix"
使用偏移來定義何時切換元素的鎖定和移動 (如下ul元素的data-offset-top)
<body data-spy="scroll" data-target="#myScrollspy">
<div class="container">
<div class="jumbotron">
<h1>Bootstrap Affix</h1>
</div>
<div class="row">
<div class="col-xs-3" id="myScrollspy">
<ul class="nav nav-tabs nav-stacked" data-spy="affix" data-offset-top="125">
<li class="active"><a href="#section-1">第一部分</a></li>
<li><a href="#section-2">第二部分</a></li>
<li><a href="#section-3">第三部分</a></li>
<li><a href="#section-4">第四部分</a></li>
<li><a href="#section-5">第五部分</a></li>
</ul>
</div>
<div class="col-xs-9">
...
</div>
</div>
</div>
</body>可以通過 JavaScript 手動為某個元素新增附加導航
$('#myAffix').affix({
offset: {
top: 100,
bottom: function () {
return (this.bottom = $('.bs-footer').outerHeight(true));
}
}
})