1、Navigational tabs(nav-tabs)標籤用法,簡單的實驗:
- <div class="container">
- <div class="container-fluid">
- <div class="tabbable">
- <ul class="nav nav-tabs">
- <li class="active"><a href="#1" data-toggle="tab">1</a></li>
- <li><a href="#2" data-toggle="tab">2</a></li>
- </ul>
- <div class="tab-content">
- <div class="tab-pane active" id="1">
- <table class="table">
- 1111
- </table>
- </div>
- <div class="tab-pane" id="2">
- <table class="table">
- 2222
- </table>
- </div>
- </div>
- </div>
- </div>
- </div>
2、pills的用法,用nav-pills替換掉上個的nav-tabs,(我自己覺得nav-pills其實美化了選項卡)
- <div class="container">
- <div class="container-fluid">
- <div class="tabbable">
- <ul class="nav nav-pills">
- <li class="active"><a href="#1" data-toggle="tab">1</a></li>
- <li><a href="#2" data-toggle="tab">2</a></li>
- </ul>
- <div class="tab-content">
- <div class="tab-pane active" id="1">
- <table class="table">
- 1111
- </table>
- </div>
- <div class="tab-pane" id="2">
- <table class="table">
- 2222
- </table>
- </div>
- </div>
- </div>
- </div>
- </div>
3、lists(nav-lists) 的用法:
- <div class="container">
- <div class="container-fluid">
- <div class="tabbable">
- <!--<ul class="nav nav-tabs">-->
- <!--<ul class="nav nav-pills">-->
- <ul class="nav nav-lists">
- <li class="active"><a href="#1" data-toggle="tab"><i class="icon-book"></i>1</a></li>
- <li><a href="#2" data-toggle="tab"><i class="icon-arrow-up"></i>2</a></li>
- </ul>
- <div class="tab-content">
- <div class="tab-pane active" id="1">
- <table class="table">
- 1111
- </table>
- </div>
- <div class="tab-pane" id="2">
- <table class="table">
- 2222
- </table>
- </div>
- </div>
- </div>
- </div>
- </div>
4、三個標籤功能大致相同,可根據你做的網站來具體選擇
轉載:ling811