---

Bootstrap 是一个流行的前端开发框架，他带有多种组件和插件可供开发者使用。其中之一便是标签页（Tab）插件，可以方便地实现在同一个页面中切换不同的内容。以下是对Bootstrap标签页插件的详细介绍。

前置要求

在使用Bootstrap 标签页插件之前，需要先引入Bootstrap文件，具体可以通过在HTML页面的中引入以下代码来完成：

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

同时也要确保jquery文件引入正确，这是Bootstrap所依赖的JavaScript库。

使用步骤

1. 在HTML页面中添加标签页的基本结构，主要包括：

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#tab1">Tab 1</a></li>
  <li role="presentation"><a href="#tab2">Tab 2</a></li>
  <li role="presentation"><a href="#tab3">Tab 3</a></li>
</ul>

<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="tab1">Tab 1 content</div>
  <div role="tabpanel" class="tab-pane" id="tab2">Tab 2 content</div>
  <div role="tabpanel" class="tab-pane" id="tab3">Tab 3 content</div>
</div>

其中ul标签是导航栏，li标签是导航的选项，div标签是每个选项对应的内容。注意每个选项和对应的内容必须有相同的id。

2. 通过JavaScript来激活标签页插件，使用以下代码即可：

$('#myTabs a').click(function(e) {
  e.preventDefault();
  $(this).tab('show');
});

其中#myTabs为导航栏的id，通过点击每个选项来切换显示对应的内容。

3. （可选）可以通过添加不同的class来更改标签页的样式，比如添加.nav-pills来使导航栏变成不同的风格。

插件属性

Bootstrap标签页插件提供了一些属性来方便开发者自定义标签页的行为和样式。

data-toggle

这个属性用于指定标签页所使用的功能。具体有以下值：

• tab：切换标签页
• collapse：折叠内容
• dropdown：下拉选项

data-target

这个属性用于指定要激活的标签页的id。比如data-target="#tab1"，这个选项将会激活id为tab1的标签页。

data-parent

这个属性用于指定折叠面板所在的容器，只在collapse中使用。比如data-parent="#accordion"，这个选项将会将这个折叠面板放到id为accordion的容器内。

总结

在Bootstrap中使用标签页插件非常简单，只需要添加基本结构和激活代码就可以实现。同时，插件提供了一些属性可以方便开发者来自定义标签页的行为和样式。