码迷,mamicode.com
首页 > 其他好文 > 详细

Bootstrap插件——(Tab)标签页

时间:2016-09-01 12:53:14      阅读:149      评论:0      收藏:0      [点我收藏+]

标签:

项目中用到了Bootstrap的(Tab)标签页插件,记录如下:

代码如下:

 1      <div class="tabbable">  
 2              <ul class="nav nav-tabs">  
 3                    <li class="active"><a href="#第一个id" data-toggle="tab">选项一</a></li>   //第一个选项,  
                                                         //href 对应第7行的id 4    <li><a href="#第二个id" data-toggle="tab">选项二</a></li>          //第二个选项
                                                         //href 对应第10行的id 5 </ul> 6 <div class="tab-content"> 7 <div class="tab-pane active" id="第一个id">                    //第一页 8    文字一 9 </div> 10 <div class="tab-pane" id="第二个id">                         //第二页 11 文字二 12 </div> 13 </div> 14 </div>

效果如下:

初始化时为下图:

技术分享

 点击选项二如下图:技术分享

Bootstrap文字教程地址:http://www.uedsc.com/bootstrap-page-header.html

 

重要的事情说三遍:

欢迎指出错误和不对的地方,以及提出建议,我会及时更新在博客里!

欢迎指出错误和不对的地方,以及提出建议,我会及时更新在博客里!

欢迎指出错误和不对的地方,以及提出建议,我会及时更新在博客里!

Bootstrap插件——(Tab)标签页

标签:

原文地址:http://www.cnblogs.com/dedebug/p/5828879.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!