前面的话

  选项卡Tabs是Web中一种非常常用的功能。用户点击对菜单项,能切换出对应的内容。本文将详细介绍Bootstrap选项卡

基本用法

  Bootstrap框架中的选项卡主要有两部分内容组成:

  1、选项卡菜单组件,对应的是 Bootstrap的 nav-tabs

  2、可以切换的选项卡面板组件,在 Bootstrap 中通常 tab-pane 来表示

  在Bootstrap框架中选项卡nav-tabs已带有样式,而对于面板内容tab-pane都是隐藏的,只有当前面板内容才是显示的

移动开发培训,Android培训,安卓培训,手机开发培训,手机维修培训,手机软件培训

.tab-content > .tab-pane {
    display: none;
}.tab-content > .active {
    display: block;
}

移动开发培训,Android培训,安卓培训,手机开发培训,手机维修培训,手机软件培训

  选项卡定义data属性来触发切换效果。当然前提要先加载bootstrap.js或者是tab.js。声明式触发选项卡需要满足以下几点要求:

  1、选项卡导航链接中要设置 data-toggle="tab"

网友评论