首页 > 代码库 > BootStrap选项卡

BootStrap选项卡

2024-09-01 16:58:35   216人阅读

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

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

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

选项卡的基本要求：

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

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

　　　　　　　　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为渐入效果。

效果如下：技术分享

技术分享技术分享

 

技术分享

BootStrap选项卡


联系
我们