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

代码：

  <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>

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

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

效果：

控制选项卡的位置：

效果：

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

并添加类“tabbable“  ，

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

"tabs-right"----右边

。。。。。。