Bootstrap插件
一、模態框（Modal） data-toggle="modal"
模態框（Modal）是覆蓋在父窗體上的子窗體。通常，目的是顯示來自一個單獨的源的內容，可以在不離開父窗體的情況下有一些互動。子窗體可提供信息、交互等
<!-- 按鈕觸發模態框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> //當用超鏈接代替button觸發時，改data-target爲href="#myModal"，以識別要加載的模態框目標;data-toggle用以打開modal
開始演示模態框
</button>
<!-- 模態框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> //.modal識別爲模態框，.fade當切換時會淡入淡出，id與上面的data-target對應，aria-labelledby引用模態框的標題，aria-hidden爲true時窗口不可見，直到被觸發
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"> //.modal-header爲頭部定義樣式
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"> //data-dismiss用以關閉模態框
×
</button>
<h4 class="modal-title" id="myModalLabel"> //.modal-title指定其爲標題
模態框（Modal）標題
</h4>
</div>
<div class="modal-body"> //.modal-body爲主體定義樣式
在這裏添加一些文本
</div>
<div class="modal-footer"> //.modal-footer爲底部定義樣式
<button type="button" class="btn btn-default" data-dismiss="modal">關閉
</button>
<button type="button" class="btn btn-primary">
提交更改
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
選項
data-backdrop
指定一個靜態的背景，當用戶點擊模態框外部時不會關閉模態框。
boolean 或 string 'static' 默認值：true
data-keyboard
當按下 escape 鍵時關閉模態框，設置爲 false 時則按鍵無效。
boolean 默認值：true
data-show
當初始化時顯示模態框。
boolean 默認值：true
data-remote
使用 jQuery .load 方法，爲模態框的主體注入內容。如果添加了一個帶有有效 URL 的 href，則會加載其中的內容。
path 默認值：false
<a data-toggle="modal" href="remote.html" data-target="#modal">請點擊我</a>
方法
<script>
$(function() {
$('#myModal').modal({
keyboard: true
})
});
</script>
$('#identifier').modal({keyboard: false})
$('#identifier').modal('toggle')
$('#identifier').modal('show')
$('#identifier').modal('hide')
事件
show.bs.modal
在調用 show 方法後觸發。
$('#identifier').on('show.bs.modal', function () {
// 執行一些動作...
})
shown.bs.modal
當模態框對用戶可見時觸發（將等待 CSS 過渡效果完成）。
$('#identifier').on('shown.bs.modal', function () {
// 執行一些動作...
})
hide.bs.modal
當調用 hide 實例方法時觸發。
$('#identifier').on('hide.bs.modal', function () {
// 執行一些動作...
})
hidden.bs.modal
當模態框完全對用戶隱藏時觸發。
$('#identifier').on('hidden.bs.modal', function () {
// 執行一些動作...
})
二、滾動監聽（Scrollspy）
通常用於多個（超出展示區域）相似結構的模塊內容在同一頁面上展示，通過滾動條滾動，相應的導航欄項隨之變化
//data-spy指定要監聽的元素， data-target指定導航組件nav元素的id或class， data-offset當計算滾動位置時，距離頂部的偏移像素，默認爲number：10
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><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>
</div>
</nav>
<div id="section1">
...
</div>
<div id="section2">
...
</div>
<div id="section3">
...
</div>
<div id="section41">
...
</div>
<div id="section42">
...
</div>
</body>
方法
.scrollspy('refresh') 用於添加或移除DOM元素時使用
<div class="section">
<h4 id="jmeter">jMeter<small><a href="#" οnclick="removeSection(this);">× 刪除該部分</a></small></h4>
<p>jMeter 是一款開源的測試軟件。它是 100% 純 Java 應用程序，用於負載和性能測試。</p>
</div>
<div class="section">
<h4 id="ejb">EJB</h4>
<p>Enterprise Java Beans（EJB）是一個創建高度可擴展性和強大企業（比如 JBOSS、Web Logic 等）的 J2EE 上。</p>
</div>
<script>
$(function(){
removeSection = function(e) {
$(e).parents(".section").remove();
$('[data-spy="scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh')
});
}
$("#myScrollspy").scrollspy();
});
</script>
事件
activate.bs.scrollspy
每當一個新項目被滾動監聽激活時，觸發該事件。
$("#myScrollspy").on('activate.bs.scrollspy',function(){
// var currentItem = $(".nav li.active > a").text();
//$("#activeitem").html("目前您正在查看 - " + currentItem);
})
垂直滾動監聽 （可參考最下面的附加導航Affix）
注意：需要將左邊的膠囊標籤位置固定 position: fixed; top: 20px;
<body data-spy="scroll" data-target="#myScrollspy">
<div class="container">
<div class="row">
<nav id="myScrollspy" class="col-md-3">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#sec1">Section 1</a></li>
<li><a href="#sec2">Section 2</a></li>
<li><a href="#sec3">Section 3</a></li>
<li><a href="#sec4">Section 4</a></li>
<li><a href="#sec5">Section 5</a></li>
</ul>
</nav>
<div class="col-md-9">
<div id="sec1">
...
</div>
<div id="sec2">
...
</div>
...
</div>
</div>
</div>
</body>
三、標籤頁（Tab） 切換時有動畫效果 data-toggle="tab"或"pill"
需要添加 data-toggle="tab" 或 data-toggle="pill" 到錨文本鏈接中。
.nav .nav-tabs（水平式） .nav .nav-pills（膠囊式）
添加 .fade 到每個 .tab-pane 後面以爲標籤頁設置淡入淡出效果，第一個標籤頁必須添加 .in 類，否則初始化時沒有內容
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
...
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="home">...</div>
...
</div>
方法
$().tab('show') 用以激活標籤頁元素和內容容器
$(function () {
$('#myTab li:eq(1) a').tab('show');
});
事件
show.bs.tab
在標籤頁顯示時觸發，但是必須在新標籤頁被顯示之前。分別使用 event.target 和 event.relatedTarget 來定位到激活的標籤頁和前一個激活的標籤頁。
shown.bs.tab
在標籤頁顯示時觸發，但是必須在某個標籤頁已經顯示之後。分別使用 event.target 和 event.relatedTarget 來定位到激活的標籤頁和前一個激活的標籤頁。
<script>
$(function(){
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
// 獲取已激活的標籤頁的名稱
var activeTab = $(e.target).text();
// 獲取前一個激活的標籤頁的名稱
var previousTab = $(e.relatedTarget).text();
//$(".active-tab span").html(activeTab);
//$(".previous-tab span").html(previousTab);
});
});
</script>
四、提示工具（Tooltip） data-toggle="tooltip"
注意：該插件不是純 CSS 插件。如需使用須用 jquery 激活它
<script>
$(function () { $("[data-toggle='tooltip']").tooltip(); });
</script>
<a href="#" data-toggle="tooltip" title="默認的">默認的Tooltip</a>
<a href="#" data-toggle="tooltip" title="左側的" data-placement="left">左側的Tooltip</a>
<a href="#" data-toggle="tooltip" title="右側的" data-placement="right">右側的Tooltip</a>
<a href="#" data-toggle="tooltip" title="上側的" data-placement="top">上側的Tooltip</a>
<a href="#" data-toggle="tooltip" title="下側的" data-placement="bottom">下側的Tooltip</a>
<button class="btn btn-success" data-toggle="tooltip" data-placement="bottom" title="向下的tooltip">底部的</button>
選項
data-animation
提示工具使用 CSS 漸變濾鏡效果。
boolean 默認值：true
data-html
向提示工具插入 HTML。如果爲 false，jQuery 的 text 方法將被用於向 dom 插入內容。如果您擔心 XSS 攻擊，請使用 text。
boolean 默認值：false
data-placement
定位提示工具（即 top|bottom|left|right|auto）例如，如果 placement 是 "auto left"，提示工具將會儘可能顯示在左邊，在情況不允許的情況下它纔會顯示在右邊。
string|function 默認值：top
data-selector
如果提供了一個選擇器，提示工具對象將被委派到指定的目標。
string 默認值：false
data-title
如果未指定 title 屬性，則 title 選項是默認的 title 值。
string | function 默認值：''
data-trigger
定義如何觸發提示工具： click| hover | focus | manual。您可以傳遞多個觸發器，每個觸發器之間用空格分隔。
string 默認值：'hover focus'
data-content
如果未指定 data-content 屬性，則使用默認的 content 值。
string | function 默認值：''
data-delay
延遲顯示和隱藏提示工具的毫秒數 - 對 manual 手動觸發類型不適用。如果提供的是一個數字，那麼延遲將會應用於顯示和隱藏。如果提供的是對象，結構如下所示：
delay:{ show: 500, hide: 100 }
number | object 默認值：0
data-container
向指定元素追加提示工具。實例： container: 'body'
string | false 默認值：false
方法
<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
當調用 show 實例方法時立即觸發該事件。
shown.bs.tooltip
當提示工具對用戶可見時觸發該事件（將等待 CSS 過渡效果完成）。
hide.bs.tooltip
當調用 hide 實例方法時立即觸發該事件。
hidden.bs.tooltip
當提示工具對用戶隱藏時觸發該事件（將等待 CSS 過渡效果完成）。
例子：
$(function () { $('.tooltip-show').on('show.bs.tooltip', function () {
//alert("Alert message on show");
})
五、彈出框（Popover） data-toggle="popover"
類似上面的tooltip
需要js激活
<script>
$(function () { $("[data-toggle='popover']").popover(); });
</script>
<a href="#" data-toggle="popover" title="下側的" data-content="底部的一些內容" data-placement="bottom">下側的Popover</a>
<button class="btn btn-success" data-toggle="popover" title="向下的" data-content="底部的一些內容" data-placement="bottom">底部的</button>
選項
data-animation
data-html
data-placement
data-selector
data-title
data-trigger
data-delay
data-container
方法
$().popover(options);
$().popover('toggle');
$().popover('show');
$().popover('hide');
$().popover('destroy');
事件
show.bs.popover
shown.bs.popover
hide.bs.popover
hidden.bs.popover
六、警告框（Alert）
<div class="alert alert-warning fade in"> //注意此處並沒有添加.alert-dismissible 添加兩個類.fade & .in可在關閉時啓用動畫
<a href="#" class="close" data-dismiss="alert">×</a> //這個關閉（按鈕）較之前button生成的顏色更深一些
<strong>警告！</strong>您的網絡連接有問題。
</div>
方法
$('').alert();
讓所有的警告框都帶有關閉功能。
$('').alert('close');
關閉所有的警告框。
事件
close.bs.alert
當調用 close 實例方法時立即觸發該事件。
closed.bs.alert
當警告框被關閉時觸發該事件（將等待 CSS 過渡效果完成）。
七、按鈕（Button）
顯示加載狀態信息
data-loading-text屬性值爲加載時顯示的內容
<button id="fat-btn" class="btn btn-primary" data-loading-text="Loading..." type="button"> 加載狀態 </button>
<script>
$(function() {
$(".btn").click(function(){
$(this).button('loading').delay(1000).queue(function() {
$(this).button('reset');
$(this).dequeue();
});
});
});
</script>
切換顯示按壓狀態 data-toggle="button"
<button type="button" class="btn btn-primary" data-toggle="button"> 單個切換 </button>
單選按鈕/複選按鈕
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="options"> 選項 1 //換爲<input type="checkbox">
</label>
<label class="btn btn-primary">
<input type="radio" name="options"> 選項 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options"> 選項 3
</label>
</div>
方法 （點擊事件觸發）
$(this).button('toggle');
切換按壓狀態。賦予按鈕被激活的外觀。可以使用 data-toggle 屬性啓用按鈕的自動切換。
$(this).button('loading').delay(1000).queue(function() {});
當加載時，按鈕是禁用的，且文本變爲 button 元素的 data-loading-text 屬性的值。
$(this).button('loading').delay(1000).queue(function() {
$(this).button('reset');
$(this).dequeue();
});
重置按鈕狀態，加載loading文本內容恢復爲最初的內容。
$(this).button('loading').delay(1000).queue(function() {
$(this).button('complete'); //button需要設置自定義屬性data-complete-text的值
$(this).dequeue();
});
該方法中的字符串是指由用戶聲明的任何字符串。使用該方法，重置按鈕狀態，並添加新的內容。
八、摺疊（Collapse） （參考組件十九：面板）
<div class="panel-group" id="accordion"> //.panel-group多組摺疊對象容器
<div class="panel panel-default"> //.panel需要摺疊的對象
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> //data-toggle data-parent href|data-target
標題
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in"> //id對應上面的href 三個類名不可少
<div class="panel-body">
內容
</div>
</div>
</div>
...
</div>
選項
data-parent
如果提供了一個選擇器，當可摺疊項目顯示時，指定父元素下的所有可摺疊的元素將被關閉。
selector 默認值：false
data-toggle
切換調用可摺疊元素。
boolean 默認值：true
方法
$('#identifier').collapse({toggle: false})
激活內容爲可摺疊元素。接受一個可選的 options 對象。
$('#identifier').collapse('toggle')
切換顯示/隱藏可摺疊元素。
$('#identifier').collapse('show')
顯示可摺疊元素。
$('#identifier').collapse('hide')
隱藏可摺疊元素。
事件
show.bs.collapse
shown.bs.collapse
hide.bs.collapse
hidden.bs.collapse
九、輪播（Carousel）
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-slide="next" data-interval="2000">
//屬性 data-slide 接受關鍵字 prev 或 next，用來改變幻燈片相對於當前位置的位置。
//使用 data-slide-to 來向輪播傳遞一個原始滑動索引，data-slide-to="2" 將把滑塊移動到一個特定的索引，索引從 0 開始計數。
//data-ride="carousel" 屬性用於標記輪播在頁面加載時就開始動畫播放。
<!-- 輪播（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 class="carousel-caption">標題 1</div> //在下方的圓點上面顯示標題信息（任何html都可）
</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>
<!-- 輪播（Carousel）導航 --> //左右的導航（圖標）
<a class="carousel-control left" href="#myCarousel"
data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel"
data-slide="next">›</a>
</div>
選項
data-interval
自動循環每個項目之間延遲的時間量。如果爲 false，輪播將不會自動循環。
number 默認值：5000
data-pause
鼠標進入時暫停輪播循環，鼠標離開時恢復輪播循環。
string 默認值："hover"
data-wrap
輪播是否連續循環。
boolean 默認值：true
方法
$('#identifier').carousel({interval: 2000})
初始化輪播爲可選的 options 對象，並開始循環項目。
$('#identifier').carousel('cycle')
從左到右循環輪播項目。
$('#identifier').carousel('pause')
停止輪播循環項目。
$('#identifier').carousel(number)
循環輪播到某個特定的幀（從 0 開始計數，與數組類似）。
$('#identifier').carousel('prev')
循環輪播到上一個項目。
$('#identifier').carousel('next')
循環輪播到下一個項目。
事件
slide.bs.carousel
當調用 slide 實例方法時立即觸發該事件。
slid.bs.carousel
當輪播完成幻燈片過渡效果時觸發該事件。
十、附加導航（Affix）
某個 <div> 固定在頁面的某個位置，它們將在某個位置開始，但當頁面點擊某個標記，該 <div> 會鎖定在某個位置，不會隨着頁面其他部分一起滾動。
<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"> //只需在此處添加 data-spy="affix" data-offset-top設置偏移
<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">
<h2 id="section-1">第一部分</h2>
...
<hr>
<h2 id="section-2">第二部分</h2>
...
<hr>
<h2 id="section-3">第三部分</h2>
...
<hr>
<h2 id="section-4">第四部分</h2>
...
<hr>
<h2 id="section-5">第五部分</h2>
...
</div>
</div>
</div>
</body>
$('#myAffix').affix({ //可不用設置data-spy及data-offset-top，可改由js實現
offset: {
top: 100, bottom: function () {
return (this.bottom =
$('.bs-footer').outerHeight(true))
}
}
})
Bootstrap學習筆記之插件（三）
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
Docker 安裝最新的 JFrog Artifactory 製品倉庫
Docker 安裝最新的 JFrog Artifactory 製品倉庫 1、前言 JFrog Artifactory 是目前全球唯一的支持所有開發語言，