$('选择器').modal(option|string);

$('选择器').dropdown(string);

$('选择器').scrollspy(option|string);

$('选择器').tab(string);
$('#myTab a[href="#profile"]').tab('show') // Select tab by name
$('#myTab a:first').tab('show') // Select first tab
$('#myTab a:last').tab('show') // Select last tab
$('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)

$('选择器').tooltip(option|string);

• animation：开启过度动画
  • true：开启
  • false：关闭
• html：添加html提示，false会调用jQuery的text方法添加内容（如果担心XSS攻击使用text）
  • true：开启
  • false：关闭
• placement：提示位置
• top,bottom,left,right:定位
• auto：动态设置：auto left
• selector：选择器
  • false：为当前元素
• selector：以该元素为对象显示tooltip
• title：设置title，如果默认title属性没有设置则调用该值
• trigger：触发事件,可以设置多个触发事件，用空格连接
  • click|hover|focus|manual：该事件触发tooltip显示
• delay：显示和隐藏的延迟时间，默认是0
• container：将tooltip添加到该元素内
  • false：当前元素
• string:
  • toggle：启动或者关闭提示
  • show：启动提示
  • hide：关闭提示
  • destroy：关闭并销毁提示

事件：

• show.bs.tooltip:在显示提示前
• shown.bs.tooltip：在显示提示后
• hide.bs.tooltip:在关闭提示前
• hide.bs.tooltip:在关闭提示后

弹出框：popover.js

（data-api需要单独初始化）

依赖：依赖于tooltip.js插件
注：

1. btn-group或input-group内的元素，需要添加container:'body'
2. disabled元素需要包裹<div>在中，然后对该div使用提示

js调用：

$('选择器').popover(option|string);

option:

• animation：开启过度动画
  • true：开启
  • false：关闭
• html：添加html提示，false会调用jQuery的text方法添加内容（如果担心XSS攻击使用text）
  • true：开启
  • false：关闭
• placement：提示位置
  • top,bottom,left,right:定位
• auto：动态设置：auto left
• selector：选择器
  • false：为当前元素
• selector：以该元素为对象显示tooltip
• title：设置title，如果默认title属性没有设置则调用该值
• trigger：触发事件,可以设置多个触发事件，用空格连接
  • click|hover|focus|manual：该事件触发tooltip显示
• delay：显示和隐藏的延迟时间，默认是0
• container：将tooltip添加到该元素内
  • false：当前元素
• string:
  • toggle：启动或者关闭提示
  • show：启动提示
  • hide：关闭提示
  • destroy：关闭并销毁提示

事件：

• show.bs.popover:在显示弹出前
• shown.bs. popover ：在显示弹出后
• hide.bs. popover :在关闭弹出前
• hide.bs. popover :在关闭弹出后

警告框：alert.js

HTML：

• 为警告框添加动画效果
• 添加.fade开启淡入特效
• 添加.in让初始化时具有淡入特效

通过设定：

• data-dismiss="alert"为警告框添加关闭功能

js调用：

$('选择器').alert(string);

• 为所有警告框添加关闭功能

string：

• close：关闭警告框

事件：

• close.bs.alert：关闭警告框前
• closed.bs.alert：关闭警告框后

按钮：button.js

（完善按钮的状态控制）

注：

• 添加autocomplete="off"解决火狐的按钮自动禁用的状态

通过设定：

• 加载状态：data-loading-text='加载文字'，按钮设置为禁用状态，并将文字切换为加载文字
• 状态切换：data-toggle="button"，按钮可以通过点击切换状态

对于单选和多选控件：

• 将其包裹在<div class="btn-group" data-toggle="buttons"></div>中
• 并对将input包裹在<label class="btn btn-primary"></label>

js调用：

$('选择器').button(string);

string:

• toggle：开启或者关闭按钮状态
• loading：将按钮设定为加载状态
• reset：重置按钮状态
• string：重置按钮状态，并设定按钮文本为传入值

折叠：collapse.js

（对支持则跌功能的组件，添加样式和灵活的支持：accordions和导航）

依赖：依赖于transition.js

通过设定：

• data-toggle="collapse"开启折叠页面元素的能力
• data-target="选择器"
• href="选择器"也可
• 为可折叠的页面元素添加collapse
• data-parent="选择器"，实现切换折叠效果，赋予统一的父元素

js调用：

$('选择器').collapse(option|string);

option：

• parent：实现切换折叠效果，赋予统一的父元素
• toggle：是否开启折叠效果
  • true：开启
  • false：不开启
• string：
  • toggle：切换折叠状态
  • show：展开该元素
  • hide：隐藏该元素

事件：

• show.bs.collapse:折叠显示前
• shown.bs.collapse:折叠显示后
• hide.bs.collapse:折叠隐藏前
• hidden.bs.collapse:折叠隐藏后

轮播：carousel.js

注：

• IE8/9不支持过度动画效果

HTML：

<div class="carousel slide">
<div class="carousel-inner">
<div class="item"><img alt="" /></div>
</div>
</div>
</div>
<div class="carousel-caption"></div>

通过设定：

• data-ride="carousel":启动轮播功能
• data-target="选择器"设定操作轮播的对象
• href=

左右控件：

• data-slide="prev"绑定左切换
• data-slide="next"绑定右切换

单项切换：

• dataslide-to="int"从0开始，绑定每个元素
• active：当前激活样式

js调用：

$('选择器').carousel(option|string);

option:

• interval:轮换等待事件，默认：5000(ms)
  • false:不自动开始循环
• pause：暂停的触发事件
• hover：鼠标停留则暂停，离开则启动
• wrap：是否持续循环
  • true：开启
  • false：关闭
• string：
  • cycle：从左到右循环
  • pause：暂停轮播
  • number：指定到对应帧，从0开始
    • prev：返回到上一帧
    • next：转到下一帧

事件：

• slide.bs.carousel:切换前调用
• slid.bs.carousel:播放完成后调用

页面定位：affix.js

通过设定：

• data-spy="affix"开启affix
• data-offset-top="200"定位浮动

注：

• 需要设定affix，affix-top，affix-bottom3种状态的样式，插件不设定
• affix是正常时的样式，fixed定位
• affix-top是初始状态的样式
• affix-bottom是停止时的样式，absolute定位

js调用：

$('选择器').affix(option);

option:

• offset:{top:,bottom:}