bootstrap中的Navigational tabs, pills,和lists标签

1、Navigational tabs（nav-tabs）标签用法，简单的实验：

[html] view plaincopy

1. <div class="container">  
2.     <div class="container-fluid">  
3.             <div class="tabbable">  
4.                 <ul class="nav nav-tabs">  
5.                     <li class="active"><a href="#1" data-toggle="tab">1</a></li>  
6.                     <li><a href="#2" data-toggle="tab">2</a></li>  
7.                 </ul>  
8.                 <div class="tab-content">  
9.                     <div class="tab-pane active" id="1">  
10.                         <table class="table">  
11.                             1111  
12.                         </table>  
13.                     </div>  
14.                     <div class="tab-pane" id="2">  
15.                         <table class="table">  
16.                             2222  
17.                         </table>  
18.                     </div>  
19.                 </div>  
20.             </div>  
21.     </div>  
22. </div>  

2、pills的用法，用nav-pills替换掉上个的nav-tabs，（我自己觉得nav-pills其实美化了选项卡）

[html] view plaincopy

1. <div class="container">  
2.     <div class="container-fluid">  
3.             <div class="tabbable">  
4.                 <ul class="nav nav-pills">  
5.                     <li class="active"><a href="#1" data-toggle="tab">1</a></li>  
6.                     <li><a href="#2" data-toggle="tab">2</a></li>  
7.                 </ul>  
8.                 <div class="tab-content">  
9.                     <div class="tab-pane active" id="1">  
10.                         <table class="table">  
11.                             1111  
12.                         </table>  
13.                     </div>  
14.                     <div class="tab-pane" id="2">  
15.                         <table class="table">  
16.                             2222  
17.                         </table>  
18.                     </div>  
19.                 </div>  
20.             </div>  
21.     </div>  
22. </div>  

3、lists（nav-lists） 的用法：

[html] view plaincopy

1. <div class="container">  
2.     <div class="container-fluid">  
3.             <div class="tabbable">  
4.             <!--<ul class="nav nav-tabs">-->  
5.                 <!--<ul class="nav nav-pills">-->  
6.                 <ul class="nav nav-lists">  
7.                     <li class="active"><a href="#1" data-toggle="tab"><i class="icon-book"></i>1</a></li>  
8.                     <li><a href="#2" data-toggle="tab"><i class="icon-arrow-up"></i>2</a></li>  
9.                 </ul>  
10.                 <div class="tab-content">  
11.                     <div class="tab-pane active" id="1">  
12.                         <table class="table">  
13.                             1111  
14.                         </table>  
15.                     </div>  
16.                     <div class="tab-pane" id="2">  
17.                         <table class="table">  
18.                             2222  
19.                         </table>  
20.                     </div>  
21.                 </div>  
22.             </div>  
23.     </div>  
24. </div>  

4、三个标签功能大致相同，可根据你做的网站来具体选择

转载：ling811