标签页

使用方法

标签页一般配合导航使用，通过 .nav 来定义切换的触发器，通过 .tab-content 来定义切换的内容。标签页内容使用 .tab-pane 作为容器元素，所有供切换显示的 .tab-pane 放置在 .tab-content 容器元素内。

提示

为确保在页面显示的时候标签页能够指示正确的标签和显示正确的内容，在初始状态需要为当前选中的导航项目 li.nav-item > a 元素添加 .active 类，并且为当前显示的标签页内容元素 .tab-pane 添加 .active 类。

为导航上每个用于切换标签内容的链接添加 href 或 data-target 属性指向当前标签页内容 .tab-pane 的 id ，并添加 data-toggle="tab" 属性。

我是标签1。

我是标签2。

我是标签3。

为每个 .tab-pane 添加 .fade 类，可以使得标签内容在显示时获得渐变动画效果。在初始状态要显示的标签页内容 .tab-pane 不仅需要添加 .active 类，还需要添加 .in 类。

我是标签1。

我是标签2。

我是标签3。

使用 .nav-tabs.nav-stacked 获得垂直排列的标签导航，使用 flex 布局来使得导航和标签页内容水平排列。

我是标签1。

我是标签2。

我是标签3。

当显示一个新的标签页时，这些事件会被触发：

通过为 [data-toggle="tab"] 链接添加 data-name 属性，这样事件触发时会传递该属性值作为参数，如果不指定则使用 [data-target] 的值作为参数。

我是标签1。

我是标签2。

我是标签3。