标签页
使用方法
标签页一般配合导航使用,通过 .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。
事件
当显示一个新的标签页时,这些事件会被触发:
show
: 当前标签页在显示时触发;shown
: 当前标签页在显示后(动画执行完毕)触发。
通过为 [data-toggle="tab"] 链接添加 data-name
属性,这样事件触发时会传递该属性值作为参数,如果不指定则使用 [data-target]
的值作为参数。
我是标签1。
我是标签2。
我是标签3。