基本用法

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

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

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

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

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

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

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

　　2、并且设置 data-target="对应内容面板的选择符(一般是ID)"；如果是链接的话，还可以通过 href="对应内容面板的选择符(一般是ID)"，主要作用是用户点击的时候能找到该选择符所对应的面板内容 tab-pane。

　　3、面板内容统一放在 tab-content 容器中，而且每个内容面板 tab-pane 都需要设置一个独立的选择符（最好是ID）与选项卡中的 data-target 或 href 的值匹配


    公告
    
  • 规则
    • 
    
  • 论坛
    • 
    
  • 安全
    • 
    
  • 公益
    • 
    公告内容面板
        规则内容面板