### Bootstrap中的标签页和工具提示插件
#### 一、标签页
标签页（Tabs）是一种常见的用户界面组件，常用于展示多个相关的页面或者不同视图。在Bootstrap框架中，标签页通过简单的HTML结构和一些类来实现。下面将详细介绍其基本用法以及一些进阶特性。
##### 基本用法
标签页的基本结构由两部分组成：一个包含`.nav-tabs`类的`<ul>`元素作为标签页导航，和一个包含`.tab-content`类的`<div>`元素作为标签页的内容区域。
```html
<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>
```
每个`<li>`标签代表一个标签项，其中的`<a>`标签通过`href`属性与`.tab-pane`元素的`id`属性相对应。`data-toggle="tab"`告诉Bootstrap这是一个可切换的标签项。
##### 淡入淡出效果
可以通过添加`.fade`类到`.tab-pane`元素上来为标签页添加淡入淡出的过渡效果。同时，为了指定哪个内容是默认可见的，还需要加上`.in`类：
```html
<div class="tab-pane fade in active" id="html5"></div>
```
##### 胶囊式样式
如果希望标签页看起来更像胶囊按钮，可以使用`.nav-pills`类替换`.nav-tabs`类：
```html
<ul class="nav nav-pills">
<li class="active"><a href="#html5" data-toggle="tab">HTML5</a></li>
<!-- 其他标签项 -->
</ul>
```
##### JavaScript控制
除了通过点击切换标签页外，还可以通过JavaScript来手动控制显示或隐藏某个标签页。
```javascript
$('#nava').on('click', function(e) {
e.preventDefault();
$(this).tab('show');
});
```
上面的代码中，`$(this).tab('show');`用来显示对应的标签页。
此外，Bootstrap还提供了多个事件监听器，比如：
- `show.bs.tab`: 在切换标签页之前触发。
- `shown.bs.tab`: 在切换标签页之后触发。
```javascript
$('#nava').on('show.bs.tab', function() {
alert('调用tab时触发！');
});
$('#nava').on('shown.bs.tab', function() {
alert('显示完tab时触发！');
});
```
#### 二、工具提示
工具提示（Tooltips）是一种悬浮式提示框，当用户的鼠标悬停在某个元素上时会自动弹出提示信息。在Bootstrap中，可以通过简单地添加`data-toggle="tooltip"`属性来创建一个工具提示。
##### 基本实例
创建一个简单的工具提示：
```html
<a href="#" data-toggle="tooltip" title="超文本标识符">HTML5</a>
```
然后在JavaScript中初始化：
```javascript
$('#section').tooltip();
```
##### 配置选项
工具提示支持多种配置选项，例如：
- `data-animation`: 是否启用动画，默认为`true`。
- `data-html`: 是否允许使用HTML内容，默认为`false`。
- `data-placement`: 提示框的位置，可以是`top`、`bottom`、`left`或`right`。
- `data-trigger`: 触发方式，可以是`hover`、`focus`或`manual`。
- `data-delay`: 显示/隐藏延迟时间，可以是数字或对象，例如`{ "show": 500, "hide": 100 }`。
例如：
```html
<a href="#" data-toggle="tooltip" title="超文本标识符"
data-animation="false"
data-html="true"
data-placement="auto"
data-trigger="click"
data-delay="500"
>HTML5</a>
```
同样的配置选项也可以通过JavaScript来设置：
```javascript
$('#sectiona').tooltip({
delay: {
show: 500,
hide: 100,
},
container: 'body'
});
```
##### 方法
工具提示还提供了一些方法来控制其行为：
- `show()`: 显示工具提示。
- `hide()`: 隐藏工具提示。
- `toggle()`: 切换工具提示的状态。
- `destroy()`: 销毁工具提示。
例如：
```javascript
$('#sectiona').tooltip('show');
```
##### 事件
工具提示同样支持一些事件监听，例如：
- `show.bs.tooltip`: 在显示工具提示之前触发。
- `shown.bs.tooltip`: 在显示工具提示之后触发。
```javascript
$('#selecta').on('show.bs.tooltip', function() {
alert('调用show时触发！');
});
```
通过上述介绍，我们可以看到Bootstrap中的标签页和工具提示插件提供了丰富的功能和自定义选项，能够满足大多数Web应用的需求。
VIP享7折，此内容立减5.97元 
