在bootstrop中如何使用tab選項卡 實現淡入淡出的效果

1 選項卡功能可以通過Bootstrap中提供的相應組件實現

http://v3.bootcss.com/javascript/#tabs
在標籤頁可以找到

2 找到淡入淡出的效果

每一個class裏面加入一個 fade 在有聚焦的div裏面 不僅要加入fade 還要加入 in
3

<div class="container">
  <!-- 所有的選項卡標籤，每個標籤點擊分別對應面板展示出來 -->
  <ul class="nav nav-tabs" role="tablist">
    <!-- 
      下面的li定義了一個選項卡的標籤，其中a標籤的href屬性指向的就是對應要展開的面板ID
      aria-controls屬性是說當前a鏈接控制的是哪個元素（注意此屬性和功能無關，只是語義）
      注意一定要給a標籤加上data-toggle="tab"，如果不加則boostrap無法知道這是一個選項卡標籤，也就不會有相應的效果
    -->
    <li role="presentation" class="active"><a href="#第一個標籤的ID" aria-controls="第一個標籤的ID" role="tab" data-toggle="tab">標籤頁1</a></li>
    <li role="presentation"><a href="#第二個標籤的ID" aria-controls="第二個標籤的ID" role="tab" data-toggle="tab">標籤頁2</a></li>
  </ul>
  <!-- Tab panes -->
  <div class="tab-content">
    <!-- .tab-pane定義當前是一個tab面板，通過id和選項卡標籤關聯起來 -->
    <div role="tabpanel" class="tab-pane active" id="第一個標籤的ID">
      <!-- 標籤展開後的內容 -->
    </div>
    <div role="tabpanel" class="tab-pane" id="第二個標籤的ID">...</div>
  </div>
</div>

4

在table中可能會遇到 左邊寬度自適應 右邊寬度固定效果實現思路：
左邊設置一個margin-left
右邊一個固定寬度並且浮動起來