代碼：

<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"----右邊

。。。。。。

?

?

?

?

轉載于:https://www.cnblogs.com/keiling/p/3639169.html

總結

以上是生活随笔為你收集整理的BootStrap2学习日记16---选项卡内容的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。