Navbar 導覽列

CH7 70
課程練習下載
Bootstrap 路徑 : Components / Navbar

| Navbar 基本運作方式 | 範例

  • Navbar 透過 .navbar-expand{ sm | lg | xl } 給予響應式的折疊 ,{ } 內的尺寸可設定想於哪個斷點下顯示摺疊選單
    • 與 Nav 最大差異於有無摺疊選單
  • .navbar-light.navbar-dark 為 navber 主題
    • .navbar-light 會搭配 .bg-light ,字為黑色
    • .navbar-dark 會搭配 .bg-dark ,字為白色
  • .navbar 結構會搭配 <a> 連結,如果不想要使用連結,可使用 <span> 或其他文字元素取代
  • .navbar-brand 會使用於公司,產品或專案名稱
<nav class="navbar navbar-dark bg-dark">
    <a class="navbar-bland" href="#">Navbar<a>
</nav>

<nav class="navbar navbar-dark bg-dark">
    <span class="h1" class="navbar-bland">Navbar<a>
</nav>

| Navbar 折疊漢堡選單 | 範例

Navbar + Dropdown + form
Bootstrap-navbar折疊漢堡選單示意圖

架構拆解

  • nav.navbar.navbar-light.bg-light.navbar-expand{ sm | lg | xl }
    • a.navbar-brand ( 這邊通常放 LOGO , 亦可加入H1)
    • button.navbar-toggler data-toggle="collapse" ( .navbar.collapse.collapse 折疊選單被折疊於 button.navbar-toggle 內,需以 data-toggle="collapse" 啟用 。另外 data-target的ID需與.collapse 一樣 )
      • span.navbar-toggler-icon
    • .navbar-collapse.collapse ( 此折疊選單被折疊於 button.navbar-toggle 內 )
      • ul.navbar-nav
        • li.nav-item
          • a.nav-link

| Navbar 加入品牌 LOGO 圖片 | 範例

  • Logo 圖片請使用 svg 格式
<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="圖片路徑" width="30" height="30" alt="">
  </a>
</nav>

| Navbar 加入表單 Form | 範例

  • Form 表單預設為上下排列,可加入 form.form-inline 讓它呈現水平排列。

| Navbar 更換顏色 Color schemes | 範例

兩主方式

  1. nav.navbar-{ dark | light } 後方的 .bg-目標 ,目標更換主題色
    • nav.navbar-dark 字為白色
    • nav.navbar-light 字為黑色
  2. nav.navbar-{ dark | light } 加入 style 並於目標處填入色票號碼 #000000
<nav class="navbar navbar-dark bg-目標">  
    <span class="navbar-text">Lorem, ipsum dolor.</span>
</nav>

<nav class="navbar navbar-light" style="background-color: 目標;">
    <span class="navbar-text">
        Navbar text with an inline element
    </span>
</nav>

| Navbar 定位 Placement |

  • .fixed-top , .fixed-bottom 範例
  • .sticky-top 範例
  • 使用 fixed 的 CLASS 讓 navbar 定位於網頁的上方、下方、網頁往下滑動時依舊固定於上方
  • .sticky-top 可加在很多地方,例如左方側邊欄上。如需加在選單上,需於內容上方

| fixed-top 與 sticky-top 差異? | 範例

  • .fixed-top : 不佔空間,下方內文會被遮住。
  • .sticky-top : 會佔住空間,下方內文不會被遮住。預設寬度為 100%;

資料來源

最後修改日期: 13 5 月, 2020

作者