BootStrap选项卡

BootStrap选项卡的创建是根据导航条来的，其创建需要几个专用的属性。

data-toggle=" tab  " 或者 data-toggle=" pill" ,data-target="#id" ,类 tab-content,tab-pane.

实现选项卡的效果有两种方法，一种是直接配置，一种是JavaScript绑定。

选项卡的基本要求：

　　　　　　　　1：选项卡导航和卡面板要同时有。但位置可以随便放。

　　　　　　　　2：导航链接里面设置 data-toggle="tab",还要设置data-target="#.." (或者href="#..")

　　　　　　　　3:tab-pane 放在tab-content里，要有id，且与data-target=" #.."一致。

源码如下：

 1　　　　 <ul class="nav nav-tabs">
 2             <li > <a  data-toggle="tab" data-target="#a">Home</a></li>
 3             <li><a  data-toggle="tab" data-target="#b">Profile</a></li>
 4             <li><a  data-toggle="tab" data-target="#c">Message</a></li>
 5             <li><a  data-toggle="tab"data-target="#d">Setting</a></li>
 6  　　 </ul>
 7         <div class="tab-content">
 8             <div class="tab-pane  fade in active" id="a">
 9                 <h3> home</h3>
10             </div>
11             <div class="tab-pane fade " id="b">
12                 <h3>proifle</h3>
13             </div>
14             <div class="tab-pane fade" id="c">
15                 <h3>Messsage</h3>
16             </div>
17             <div class="tab-pane fade " id="d">
18                 <h3>Setting</h3>
19             </div>
20         </div>

默认情况下：tab-pane 是隐藏的，只有给他active样式才会显示。fade为渐入效果。

效果如下：

posted @ 2017-01-19 19:20  颜小雀  阅读(5110)  评论(0)  编辑  收藏  举报