文章前提

Nav 導覽

Modal 互動視窗

CH7 68
課程練習下載
Bootstrap 路徑 : Components / Navs

| Navs 基本架構 |

  • <ul> <li> 為架構
    • ul.nav
      • li.nav-item
        • a.nav-link
  • <a> 為架構
    • nav.nav
      • a.nav-link
  • 啟用的連結處須加上 .active ,如想停用此連結使用 .disabled

Navs 可用樣式

Bootstrap 大部分排版都使用 Flex ,navs 也是。可使用 Utilities 的 Flex 做 navs 的垂直或水平排版

| Horizontal alignment 水平對齊 |

  • navs 要水平對齊任何一個位置,可使用 Utilities 的 Flex
<ul class="nav justify-content-end">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <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 disabled" href="#">Disabled</a>
  </li>
</ul>

| Vertical 垂直排列 |

  • navs 要垂直對齊任一位置,可使用 Utilities 的 Flex
  • 下方程式碼使用垂直置中
<ul class="nav flex-column align-items-center">
    <li class="nav-item">
        <a href="#" class="nav-link active">link a</a>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link">link b</a>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link disabled">link c</a>
    </li>
</ul>

| Tabs 分頁 |

  • .nav 加上 .nav-tabs 即呈現頁籤樣式的導覽
    Bootstrap-Nav_Tabs-分頁

| Pills 片狀 |

  • .nav 加上 .nav-pills 即呈現片狀樣式的導覽

Bootstrap-Nav_Pills片狀

| JavaScripit behavior JavaScript 行為 | 範例

  • 套用 JavaScript 和 List group 很像,可透過頁籤方式切換裡面的內容
  • <a> 加上 data-toggle="tab" 啟動 JavaScript 切換功能 ,href="#ID" href 內的 ID 需與內容 ID 相同
  • 下方是使用 .nav-tabs 頁籤樣式,如果要換 .nav-pills 片狀樣式 ,記得換成 data-toggle="pills"
<ul class="nav nav-tabs mb-3" id="myTab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home"
            aria-selected="true">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab"
            aria-controls="profile" aria-selected="false">Profile</a>
    </li>
</ul>

<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">AAA Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reiciendis quo placeat magni quasi in tenetur, porro velit exercitationem illum. Mollitia.</div>
    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">BBB Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum, perferendis aliquid, sequi sunt earum debitis maxime esse excepturi aliquam sed corrupti fugiat vero aspernatur eaque unde praesentium enim rerum necessitatibus?</div>
</div>

| JavaScript 行為加入 Dropdown | 範例

  • 範例內使用 <ul><li> 架構,也可直接使用 <a> 架構

Bootstrap-Nav_Dropdown


資料來源

最後修改日期: 2 4 月, 2020

作者