标签：style blog http color java os 使用 io 文件
类似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之美07-插件Collapse、Accordion、Modal、Tab、Tooltip、Alert、Carousel
标签：style blog http color java os 使用 io 文件
原文地址：http://www.cnblogs.com/darrenji/p/3932688.html
