4.十一、Bootstrap V4自學之路-----組件---導航

關於易用性

若是你使用導航來製做一個導航欄，請確保向<ul>的邏輯父元素添加了role="navigation"或者給整個導航條包裹一個<nav>元素。不要在<ul>的自己上面添加這個role，由於這將阻止它被使用輔助技術的用戶聲明爲一個真正的列表。

基礎導航

經過擴展基礎的.nav組件，實現你本身的導航樣式。全部的Bootstrap的導航組件都創建在這個基礎上。包含禁用狀態，可是不包含激活狀態。

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Another link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

僞代碼附上：（看結構）

《ul class="nav"》
--| 《li class="nav-item》
--| --| 《a class="nav-link"》    
          
--| 《li class="nav-item》
--| --| 《a class="nav-link"》    
          
--| 《li class="nav-item》
--| --| 《a class="nav-link disabled"》

或者使用一個 <nav>來包裹導航條。

<nav class="nav">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Another link</a>
  <a class="nav-link disabled" href="#">Disabled</a>
</nav>

選項卡

將上面的基本導航放在一塊兒，添加一個.nav-tabs類以生成一個可輕觸的界面。用 輕觸JavaScript 插件創造可輕觸的區域。

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a href="#" class="nav-link active">Active</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Link</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Another link</a>
  </li>
  <li class="nav-item disabled">
    <a href="#" class="nav-link">Disabled</a>
  </li>
</ul>

PS：這裏注意的是在.nav處添加了一個樣式 .nav-tabs類，所出現的效果。

丸狀導航

用一樣的HTML，可是使用.nav-pills代替。

<ul class="nav nav-pills">
  <li class="nav-item">
    <a href="#" class="nav-link active">Active</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Link</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Another link</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link disabled">Disabled</a>
  </li>
</ul>

堆疊丸狀導航

只須要向.nav.nav-pills添加.nav-stacked類。

<ul class="nav nav-pills nav-stacked">
  <li class="nav-item">
    <a href="#" class="nav-link active">Active</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Link</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Another link</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link disabled">Disabled</a>
  </li>
</ul>

使用彈出菜單

使用一些額外的HTML以及彈出菜單JavaScript插件就能夠添加一個彈出菜單。

帶彈出菜單的選項卡

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a href="#" class="nav-link active">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Another link</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link disabled">Disabled</a>
  </li>
</ul>

這裏整理一下結構：

《ul class="nav nav-tabs"》
--| 《li class="nav-item"》
--| --| 《a href="#" class="nav-link active"》
--| 《li class="nav-item dropdown"》
--| --| 《a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"》
--| --| 《div class="dropdown-menu"》
--| --| --| 《a class="dropdown-item"》
--| --| --| 《a class="dropdown-item"》
--| --| --| 《a class="dropdown-item"》
--| --| --| 《div class="dropdown-divider"》 --| --| --| 《a class="dropdown-item"》
--| 《li class="nav-item"》
--| --| 《a href="#" class="nav-link"》
--| 《li class="nav-item"》
--| --| 《a href="#" class="nav-link"》

帶彈出菜單的丸狀導航

<ul class="nav nav-pills">
  <li class="nav-item">
    <a href="#" class="nav-link active">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Another link</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link disabled">Disabled</a>
  </li>
</ul>

PS:和上述同樣，只是將類更換爲 .nav-pills類。

JavaScript行爲

使用選項卡JavaScript插件，單獨引入或者使用編譯過的bootstrap.js文件，以擴展咱們的導航選項卡以及丸狀按鈕，建立可選項卡切換的內容面板，甚至利用彈出菜單。

使用data屬性

你能夠不寫任何JavaScript代碼就激活一個選項卡或者丸狀按鈕，只須要在一個元素上指定data-toggle="tab"或者dta-toggle="pill"。在.nav-tabs或者.nav-pills上使用data屬性。

PS：panes 英文，玻璃窗。

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" href="#home" role="tab" data-toggle="tab">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#profile" role="tab" data-toggle="tab">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#messages" role="tab" data-toggle="tab">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#settings" role="tab" data-toggle="tab">Settings</a>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="home">home.</div>
  <div role="tabpanel" class="tab-pane" id="profile">profile.</div>
  <div role="tabpanel" class="tab-pane" id="messages">messages..</div>
  <div role="tabpanel" class="tab-pane" id="settings">settings.</div>
</div>

PS：注意對應id，使用href="#id"的方式對應到panes（玻璃窗）。

利用JavaScript

利用JavaScript啓用選項卡切換效果（每一個選項卡須要一個一個被激活）：

<script type="text/javascript">
    $('#nav-item a').click(function (e) {
        e.preventDefault()
        $(this).tab('show')
      })
</script>

你能夠用多種方式逐個激活選項卡：

<script type="text/javascript">
  $('#myTab a[href="#profile"]').tab('show') // 按名稱選擇標籤
  $('#myTab a:first').tab('show') // 選擇第一標籤
  $('#myTab a:last').tab('show') // 選擇最後一個標籤
  $('#myTab li:eq(2) a').tab('show') // 選擇第三個選項卡（從0開始索引）
</script>

淡入淡出效果

想製做出淡入淡入效果，只要向每一個.tab-pane上添加.fade。第一個選項卡塊必須擁有.in類，以適當地淡入初始內容。

    fade 英文是，褪色的意思。

    切換時真的有淡入淡出的效果呢~  截圖沒效果，之後本身作一個本身的網站。再把效果都實現出來一便~oy~！

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" href="#home" role="tab" data-toggle="tab">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#profile" role="tab" data-toggle="tab">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#messages" role="tab" data-toggle="tab">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link"  href="#settings" role="tab" data-toggle="tab">Settings</a>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div role="tabpanel" class="tab-pane fade in active" id="home">home</div>
  <div role="tabpanel" class="tab-pane fade" id="profile">profile</div>
  <div role="tabpanel" class="tab-pane fade" id="messages">messages</div>
  <div role="tabpanel" class="tab-pane fade" id="settings">settings</div>
</div>

方法 $().tab

激活一個選項卡元素以及內容容器。選項卡必需要麼帶有.data-target屬性要麼帶href屬性，屬性值指向DOM中的一個容器節點。

<ul class="nav nav-tabs" role="tablist" id="myTab">
  <li class="nav-item">
    <a class="nav-link active" data-target="#home" role="tab" data-toggle="tab" aria-controls="home">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#profile" role="tab" data-toggle="tab" aria-controls="profile">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#messages" role="tab" data-toggle="tab" aria-controls="messages">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#settings" role="tab" data-toggle="tab" aria-controls="settings">Settings</a>
  </li>
</ul>

<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="home">home</div>
  <div role="tabpanel" class="tab-pane" id="profile">profile</div>
  <div role="tabpanel" class="tab-pane" id="messages">messages</div>
  <div role="tabpanel" class="tab-pane" id="settings">settings</div>
</div>

<button type="button" onclick="test_l_setting()">測試setting</button>
<button type="button" onclick="test_f_home()">測試home</button>

<script>
    function test_l_setting(){
       $('#myTab a:last').tab('show')
    }
    function test_f_home(){
       $('#myTab a:first').tab('show')
    }
</script>

測試成功！！吼吼吼吼吼！

事件

當顯示一個新選項卡時，事件依下面的依次觸發：

1. hide.bs.tab (在當前活動的選項卡上)

2. show.bs.tab (在要被顯示的選項卡上)

3. hidden.bs.tab (在前一個活動的選項卡，即觸發hide.bs.tab事件的選項卡)

4. shown.bs.tab (在剛剛顯示出來的新的活動選項卡上，即觸發show.bs.tab事件的選項卡)

若是沒有選項卡已經被激活，則hide.bs.tab事件以及hidden.bs.tab事件都不會被觸發。

事件類型	描述
show.bs.tab	respectively.在選項卡即將顯示時觸發事件（此時新選項卡尚未顯示）。event.target指向激活的選項卡，event.relatedTarget指向上一個激活的選項卡（若是可用的話）。
shown.bs.tab	在一個選項卡顯示完成的時候觸發這個事件。event.target指向激活的選項卡，event.relatedTarget指向上一個激活的選項卡（若是可用的話）。
hide.bs.tab	當一個新選項卡即將顯示的時候觸發這個事件（此時上一個激活的選項卡即將被隱藏）。event.target指向當前激活的選項卡，event.relatedTarget指向下一個即將激活的選項卡。
hidden.bs.tab	在一個新選項卡顯示完成時觸發這個事件（此時上一個激活的選項卡已經隱藏）。event.target指向上一個激活的選項卡，event.relatedTarget指向新激活的選項卡。

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // 新激活的選項卡
  e.relatedTarget // 之前的活動選項卡
})