相似Page Header, Breadcrumbs, Dropdowns等,都是Bootstrap的組件,是靜態的。若是涉及到交互,Bootstrap提供了插件。這些插件包括:javascript
○ 過渡效果: bootstrap-transition.js
○ 模態對話框:bootstrap-modal.js
○ 下拉項:bootstrap-dropdown.js
......html
這些插件能夠單獨引入到頁面。而在bootstrap.js或bootstrap.min.js文件中已經包含了全部的插件。java
本篇主要包括:bootstrap
■ 如何使用Bootstrap插件
■ Collapse
■ Accordion
■ Modal
■ Tab
■ Tooltip
■ Alert
■ Carouselapi
□ 如何使用Bootstrap插件框架
一、經過調用屬性APIide
<a href="#" class="btn" data-toggle="dropdown"></a>
data-toggle是Bootstrap的專用屬性,它的值對應插件的名稱。spa
另外,data-toggle屬性須要搭配data-target一塊兒使用。data-target也是Bootstrap的專用屬性,用來指定控制對象,它的屬性值是一個jQuery選擇符。好比:
插件
<button data-toggle="modal" data-target="#id" class="btn"></button><div id="id" class="modal hide fade"></div>
若是想禁用屬性API
orm
$('body').off('.data-api');
若是想禁用某個屬性API,好比禁用alert的屬性API
$('body').off('.alert.data-api');
二、經過調用Javascript的API
顯示下拉菜單
$('.btn').dropdown();
顯示模態對話框
$('.btn').click(function(){$('#id').modal({backdrop: false,
keyboard: false
});})
Bootstrap的插件方法參數也能夠是特定意義的字符串。好比:
$('#id').modal('hide');
使用Constructor屬性來訪問插件
var temp = $.fn.modal.Constructor
使用data方法訪問插件
$('[rel = modal]').data('modal')
若是Boostrap與其它UI框架發生命名衝突,能夠調用noConflict方法來獲取插件
var bootstrapmodal = $.fn.modal.noConflict();
□ Collapse
點擊按鈕或連接等,顯示或隱藏某個區域,好比div。
<div class="row"><ul class="nav nav-pills navbar-default"><li><a href="#attri" data-toggle="collapse">Attributions</a></li><li><a href="#pics" data-toggle="collapse">Pics</a></li></ul><div id="attri" class="collapse">attri</div><div id="pics" class="collapse">pics</div></div>
□ Accordion
每次只能顯示一塊區域,區域的區域隱藏。
<div class="row"><div id="accordion" class="panel-group"><div class="panel panel-info"><div class="panel-heading"><div class="panel-title"><a href="#first" data-toggle="collapse" data-parent="#accordion">First</a></div></div><div class="panel-collapse collapse in" id="first"><div class="panel-body"><img src="images/19.jpg" alt="19"/></div></div></div><div class="panel panel-info"><div class="panel-heading"><div class="panel-title"><a href="#second" data-toggle="collapse" data-parent="#accordion">Second</a></div></div><div class="panel-collapse collapse" id="second"><div class="panel-body"><img src="images/20.jpg" alt="20"/></div></div></div><div class="panel panel-info"><div class="panel-heading"><div class="panel-title"><a href="#third" data-toggle="collapse" data-parent="#accordion">Third</a></div></div><div class="panel-collapse collapse" id="third"><div class="panel-body"><img src="images/21.jpg" alt="21"/></div></div></div></div></div>
□ Modal
模態彈出窗口。
一、經過調用屬性API
<div class="row"><a href="#setDialog" class="btn btn-info" data-toggle="modal">點我</a><div class="modal fade" id="setDialog" tabindex="-1"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h4>Thanks for coming</h4></div><div class="modal-body"><p>This is all i can provide</p></div><div class="modal-footer"><button class="btn btn-success" data-dismiss="modal">關閉</button></div></div></div></div></div>
二、經過調用Javascript的API
使用Javascript的API方式調用Modal。modal部分不變,按鈕部分改爲:
<button class="btn btn-info" id="open">點我</button>
再爲id爲open的按鈕添加jQuery事件:
<script type="text/javascript">
$(function() {//模態窗口
var $setDialog = $('#setDialog');$('#open').on("click", function () {
$setDialog.modal('show');return false;});});</script>
還能夠爲模態窗口添加事件。
<script type="text/javascript">
$(function() {//模態窗口
var $setDialog = $('#setDialog');$('#open').on("click", function () {
$setDialog.modal('show');return false;});//在模態窗口隱藏的時候發生
$setDialog.on("hidden.bs.modal", function() {
alert('我要被關閉了~~');});});</script>
□ Tab
選項卡切換內容。
<div class="row"><ul class="nav nav-tabs"><li><a href="#contactTab" data-toggle="tab">Contact</a></li><li><a href="#addressTab" data-toggle="tab">Address</a></li></ul><div class="tab-content"><div class="well tab-pane active" id="contactTab"><p>11111111</p></div><div class="well tab-pane" id="addressTab"><p>22222222</p></div></div></div>
□ Tooltip
當把鼠標移動到某個元素上面,出現提示。
Html部分爲:
<div class="row"><input type="submit" value="submit" class="btn btn-success" data-toggle="tooltip" title="Press here"/></div>
Javascript部分爲:
$('input[type=submit]').tooltip();
能夠在input上添加更多的屬性API。
<div class="row"><input type="submit" value="submit" class="btn btn-success" data-toggle="tooltip" title="Press here" data-placement="right" data-delay="500"/></div>
也能夠經過Javascript的API。
$('input[type=submit]').tooltip({delay:{show: 500,hide: 0}});
Tooltip也能夠顯示爲html。
<div class="row"><input type="submit" value="submit" class="btn btn-success" data-toggle="tooltip" title="<img src='images/20.jpg' />" data-placement="right" data-delay="500" data-html="true"/></div>
□ Alert
點擊某個元素,彈出提示框。
Html部分。
<div class="row"><button id="btn" class="btn btn-success">顯示</button><div class="alert alert-warning collapse" id="sendAlert"><a href="#" data-dismiss="alert" class="close">×</a><p>ok, i am here</p></div></div>
Javascript部分。
//提示框
var $sendAlert = $('#sendAlert');$('#btn').on('click', function() {$sendAlert.show();});$sendAlert.on('close.bs.alert', function () {//放置Alert部分從DOM中刪除
$sendAlert.hide();return false;});
□ Carousel
Html部分。
<div class="container"><div id="myCarousel" class="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 items --><div class="carousel-inner"><div class="active item"><img src="images/1.jpg"/></div><div class="item"><img src="images/2.jpg"/></div><div class="item"><img src="images/3.jpg"/></div></div><!-- Carousel nav --><a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a><a class="carousel-control right" href="#myCarousel" data-slide="next">›</a></div></div>
Javascript部分。
<script type="text/javascript">
$(function() {$('.carousel').carousel();});</script>
參考資料:WilderMinds
「Bootstrap 3之美」系列類包括: