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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章