一、Tooltips

默认的 HTML Title 显示太慢了,而且不是很好看,如果 Tooltips 成为一个重要的提示路径,那么这个组件可以更好地解决这个问题。用 data-toggle="tooltip",可能通过 data-toggle="tooltip" 来指定 Tooltips 相对于当前元素的位置。
<a title="Tooltip on top" href="#" data-toggle="tooltipdata-placement="top">
Tooltip on top
</a>

二、下拉菜单

这是一个「下拉菜单」,可以用 data-toggle="dropdown"来实例化一个下拉菜单,用 data-target="#TARGET_SELECTOR" 或者 href="#TARGET_SELECTOR" 来指定弹出层。
<span class="dropdown">
<a href="#ddmenu" data-toggle="dropdown">下拉菜单</a>
<ul id="ddmenu" class="dropdown-menu">
<li><a href="#">item-1</a></li>
<li><a href="#">item-2</a></li>
<li><a href="#">item-3</a></li>
<li><a href="#">item-4</a></li>
</ul>
</span>

三、Modal

Modal 的使用可以点击这个 Modal Demo  试试。使用的时候,只要在一个触发点(如一个链接)指定一下 data-toggle="modal" 来指定这个触发点触发的是 Modal,用href="#TARGET_ID" 或 data-target="#TARGET_ID" 来指定这个 modal 指定的显示框。
<a href="#myModaldata-toggle="modal">Modal Demo</a>
 
<div id="myModal" class="modal fade hide in">
<h4 class="modal-title">本操作需要您先注册百姓网</h4>
<a href="###" data-dismiss="modal" class="close">×</a>
<div class="modal-content">
Lorem ipsum dolor sit amet,
</div>
</div>

四、Tab

#tab-1
#tab-2
#tab-3

CSS 和 JS 分开的,通过 data-toggle="tab" 来指定元素本身是一个 tab 标签。通过 href="#TARGET_ID" 或者data-target="#TARGET_ID" 来指定 tab 显示的内容。

<div class="tab">
<ul class="tab-title clearfix">
<li class="tab-title-item"><a href="#" data-toggle="tab">全部</a></li>
<li class="tab-title-item active"><a href="#" data-toggle="tab">个人</a></li>
</ul>
</div>

五、Popover

通过 js 生成 popover:

$('#example').popover('options')

可以用元素上的 data 属性(data-animation="")或直接传递 JS 对象来配置 popover:

配置项类型默认值说明
animationbooleantrue是否应用CSS动画效果。
htmlbooleanfalse在 popover 中填入 html。如果为 false 的话,将会使用 jquery 的 text 方法填充内容。要避免XSS攻击的话最好使用纯文本填充。
placementstring | function'right'弹出的位置:top | bottom | left | right
selectorstringfalse提供此项的话,弹出层将置于指定元素上。
triggerstring'click'触发事件:click | hover | focus | manual
titlestring | function''弹出层标题。
contentstring | function''弹出层内容。
delaynumber | object0弹出层显示和隐藏的延时(不影响 manual 触发)。对象的话,格式为 { show: 500, hide: 100}
containerstring | falsefalse指定弹出层元素从属的父元素。如 container: 'body'