首页 > 其他 > 详细

BootStrap2学习日记16---选项卡内容

时间:2014-04-02 08:52:56      阅读:473      评论:0      收藏:0      [点我收藏+]

代码:

bubuko.com,布布扣
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">中国</a></li>
    <li><a href="#tab2" data-toggle="tab">美国</a></li>
    <li><a href="#tab3" data-toggle="tab">日本</a></li>
    <li><a href="#tab4" data-toggle="tab">英国</a></li>
    <li><a href="#tab5" data-toggle="tab">加拿大</a></li>
  </ul>
<div class="tab-content"> <div class="tab-pane active" id="tab1"> <p>中国(China),位于东亚,是一个以华夏文明为主体、中华文化为基础,以汉族为主要民族的统一多民族国家,通用汉语。中国疆域内的各个民族统称为中华民族,龙是中华民族的象征。</p> </div> <div class="tab-pane" id="tab2">美国</div> <div class="tab-pane" id="tab3">日本</div> <div class="tab-pane" id="tab4">英国</div> <div class="tab-pane" id="tab5">加拿大</div> </div>
bubuko.com,布布扣

在每个<li>里面<a>中添加两个属性 href="#tab1" data-toggle="tab" 

其中”#tab+数字" 对应下面的 id=“tab+数字”

效果:

bubuko.com,布布扣

 

控制选项卡的位置:

效果:

bubuko.com,布布扣

在上述代码最外层添加一个<div>标签

并添加类“tabbable“  ,

”tabs-left”-----左边显示

"tabs-right"----右边

。。。。。。

BootStrap2学习日记16---选项卡内容,布布扣,bubuko.com

BootStrap2学习日记16---选项卡内容

原文:http://www.cnblogs.com/keiling/p/3639169.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!