类似Page Header, Breadcrumbs, Dropdowns等，都是Bootstrap的组件，是静态的。如果涉及到交互，Bootstrap提供了插件。这些插件包括：
○ 过渡效果： bootstrap-transition.js
○ 模态对话框：bootstrap-modal.js
○ 下拉项：bootstrap-dropdown.js
......
这些插件可以单独引入到页面。而在bootstrap.js或bootstrap.min.js文件中已经包含了所有的插件。
本篇主要包括：
■ 如何使用Bootstrap插件
■ Collapse
■ Accordion
■ Modal
■ Tab
■ Tooltip
■ Alert
■ Carousel
□ 如何使用Bootstrap插件
1、通过调用属性API
<a href="#" class="btn" data-toggle="dropdown"></a>
data-toggle是Bootstrap的专用属性，它的值对应插件的名称。
另外，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
$('body').off('.data-api');
如果想禁用某个属性API，比如禁用alert的属性API
$('body').off('.alert.data-api');
2、通过调用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
模态弹出窗口。
1、通过调用属性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>
2、通过调用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之美”系列类包括:
Bootstrap 3之美01-下载并引入页面
Bootstrap 3之美02-Grid简介和应用
Bootstrap 3之美03-独立行,文字环绕,图片自适应,隐藏元素
Bootstrap 3之美04-自定义CSS、Theme、Package
Bootstrap 3之美05-排版、Button、Icon、Nav和NavBar、List、Table、Form
Bootstrap 3之美06-Page Header、Breadcrumbs、Dropdowns、Button Dropdowns、用Button和Dropdowns模拟Select、Input Groups、Thumbnails、Panels、Wells
Bootstrap 3之美07-插件Collapse、Accordion、Modal、Tab、Tooltip、Alert、Carousel
扫一扫
302
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
