知识点：
1、弹出框
2、警告框
3、标签页
4、工具提示
1、弹出框
弹出框点击一个元素，弹出一个包含标题和内容的容器
//基本用法
<button class="btn btn-lg btn-danger" type="button" data-toggle="popover" title="弹出框" data-content="这是一个弹出框插件">
点击弹出/隐藏弹出框
</button>
//JavaScript 初始化
$('button').popover();
Popover 插件中的属性：
data-animation 默认 true，在 popover 上应用一个 CSS fade 动画。 如果设置 false，则不应用。
data-html 默认 false，不允许提示内容格式为 html。如果设置 为 true，则可以设置 html 格式的提示内容。
data-placement 默认值 top，还有 bottom、left、right 和 auto。 如果auto会自行调整合适的位置，如果是auto left 则会尽量在左边显示，但左边不行就靠右边。
data-selector 默认 false，可以选择绑定指定的选择器。
data-original-title 默认空字符串，弹出框的标题。优先级比 title 低
title 默认字空符串，弹出框的标题。
data-trigger 默认值 click，表示怎么触发 popover，其他值为： hover、focus、manual。多个值用空格隔开，manual 手动不能和其他同时设置。
data-delay 默认值 0，延迟触发 popover(毫秒)，如果传数字则， 表示 show/hide 的毫秒数，如果传对象，结构为： {show:500,hide:100}
data-container 默认值 false，将 popover 附加到特定的元素上。比 如组合按钮组提示，容器不够，可以附加 body 上。 container : 'body'
data-template 更改提示框的 HTML 提示语的模版，默认值为：
<div class="popover">
<div class="arrow"></div>
<h3 class="popover-title"></h3>
<div class="popover-content"></div>
</div>
data-content 默认值为空，弹出框的内容。
data-viewport 设置外围容器的边际，具体代码看示例。
$('button').popover({
trigger:"click",
placement:"right",
viewport : {
selector : '#view'
}
});
Popover 插件中的方法：
//显示 $('button').popover('show');
//隐藏 $('button').popover('hide');
//反转显示和隐藏 $('button').popover('toggle');
//隐藏并销毁 $('button').popover('destroy');
Popover 插件中的事件：
show.bs.popover 在调用 show 方法时触发
shown.bs.popover 在显示整个弹窗时时触发
hide.bs.popover 在调用 hide 方法时触发
hidden.bs.popover 在完全关闭整个弹出时触发
$('button').on('show.bs.tab', function () {
alert('调用 show 方法时触发！');
});
2、警告框
警告框即为点击小时的信息框。
//基本实例
<div class="alert alert-warning">
<button class="close" type="button" data-dismiss="alert">
<span>×</span>
</button>
<p>警告：您的浏览器不支持！</p>
</div>
//添加淡入淡出效果 <div class="alert alert-warning fade in">
如果用 JavaScript，可以代替 data-dismiss="alert"
Alert 插件中的方法：
$('.close').on('click', function () {
$('#alert').alert('close');
})
Alert 插件中的事件：
close.bs.alert 当 close 方法被调用后立即触发
closed.bs.alert 当警告框被完全关闭后立即触发
$('#alert').on('close.bs.alert', function () {
alert('当 close 方法被触发时调用！');
});
3、标签页
标签页也就是通常所说的选项卡功能
//基本用法
<ul class="nav nav-tabs">
<li class="active"><a href="#html5" data-toggle="tab">HTML5</a></li>
<li><a href="#bootstrap" data-toggle="tab">Bootstrap</a></li>
<li><a href="#jquery" data-toggle="tab">jQuery</a></li>
<li><a href="#extjs" data-toggle="tab">ExtJS</a></li>
</ul>
<div class="tab-content" style="padding: 10px;">
<div class="tab-pane active" id="html5">...</div>
<div class="tab-pane" id="bootstrap">...</div>
<div class="tab-pane" id="jquery">...</div>
<div class="tab-pane" id="extjs">...</div>
</div>
//可以设置淡入淡出效果 fade，而 in 表示首选的内容默认显示
<div class="tab-pane fade in active" id="html5">
//也可以换成胶囊式
<ul class="nav nav-pills">
//data-target 使用 data-target 绑定或不绑定效果都是一样的
Tab 插件中的方法：
$('#nav a').on('click', function (e) {
e.preventDefault();
$(this).tab('show');
});
Tab 插件中的事件：
show.bs.tab 在调用 tab 方法时触发
shown.bs.tab 在显示整个标签时触发
$('#nav a').on('show.bs.tab', function () {
alert('调用 tab 时触发！');
});
4、工具提示
工具提示就是通过鼠标移动选定在特定的元素上时，显示相关的提示语。
//基本实例
<a href="#" data-toggle="tooltip" title="超文本标识符">HTML5</a>
//JavaScript 初始化
$('#section').tooltip();
data-animation 默认 true，在 tooltip 上应用一个 CSS fade 动画。 如果设置 false，则不应用。
data-html 默认 false，不允许提示内容格式为 html。如果设置 为 true，则可以设置 html 格式的提示内容。
data-placement 默认值 top，还有 bottom、left、right 和 auto。 如果auto会自行调整合适的位置，如果是auto left 则会尽量在左边显示，但左边不行就靠右边。
data-selector 默认 false，可以选择绑定指定的选择器。 rel="tooltip"
data-original-title 默认空字符串，提示语的内容。优先级比 title 低
title 默认字空符串，提示语的内容。
data-trigger 默认值 hover foucs，表示怎么触发 tooltip，其 他值为：click、manual。多个值用空格隔开，manual 手动不能和其他同时设置。
data-delay 默认值 0，延迟触发 tooltip(毫秒)，如果传数字则， 表示 show/hide 的毫秒数，如果传对象，结构为：
{ show:500,hide:100 }
data-container 默认值 false，将 tooltip 附加到特定的元素上。比 如组合按钮组提示，容器不够，可以附加 body 上。 container : 'body'
data-template 更改提示框的 HTML 提示语的模版，默认值为：
<div class='tooltip'>
<div class='tooltip-arrow'></div>
<div class='tooltip-inner'></div>
</div>
<a href="#" rel="tooltip"
data-toggle="tooltip"
title="超文本标识符"
data-animation="false"
data-html="true"
data-placement="auto"
data-selector="a[rel=tooltip]"
data-trigger="click"
data-delay="500"
data-template="<b>123</b>" >HTML5
</a>
$('#selector a').tooltip({
delay : {
show : 500,
hide : 100,
},
});
Tooltip插件中的方法：
//显示 $('#section a').tooltip('show');
//隐藏 $('#section a').tooltip('hide');
//反转显示和隐藏 $('#section a').tooltip('toggle');
//隐藏并销毁 $('#section a').tooltip('destroy');
Tooltip插件中的事件：
show.bs.tooltip 在 show 方法调用时立即触发
shown.bs.tooltip 在提示框完全显示给用户之后触发
hide.bs.tooltip 在 hide 方法调用时立即触发
hidden.bs.tooltip 在提示框完全隐藏之后触发
$('#select a').on('show.bs.tooltip', function () {
alert('调用 show 时触发！');
});
//data-selector
$("#selector").tooltip({
selector:"a[rel='tooltip']"
});
//data-container
<div class="btn-group">
<button class="btn btn-default" title="超文本标记符">left</button>
<button class="btn btn-default" title="超文本标记符">middle</button>
<button class="btn btn-default" title="超文本标记符">right</button>
</div>
$("button").tooltip({
delay:{
show:500,
hide:100
},
container:"body"
});
