---
# System prepended metadata

title: '[Bootstrap] Navbar導覽頁'
tags: [Bootstrap]

---

# [Bootstrap] Navbar導覽頁
###### tags: `Bootstrap`

### 基礎觀念


* nav外層使用`<div class=”container”></div>`包住時，Navbar導覽列放置在頁面中央或內容的中間，若沒有設定container，導覽列預設的內容寬度是浮動，並自動佔滿水平寬度
* 透過navbar-expand定義在何種尺寸，menu項目的呈現會改為「漢堡折疊」樣式效果
* 使用bootstrap自定義的data-toggle及data-target，決定按鈕點下之後，menu的div要以collapse方式展開
* navbar-expand-sm大小則是決定當螢幕尺寸小於sm時，會改為以「三」顯示menu項目![](https://i.imgur.com/Bm6IPRD.png)

範例如下：
```
<nav id="main-nav" class="navbar navbar-expand-sm navbar-dark fixed-top" >

<nav class="nav navbar-default">
  <div class="container-fluid">
      <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#Navbarshow">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span> 
          </button>
          <a class="navbar-brand" href="#">Brand</a>
      </div>
      <div class="collapse navbar-collapse" id="Navbarshow"> //底下放要縮放的內容
          <ul class="nav navbar-nav">
              <li><a data-toggle="tab" href="#home">Home</a></li>
              <li><a data-toggle="tab" href="#menu1">Page 1</a></li>
              <li><a data-toggle="tab" href="#menu2">Page 2</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
              <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Log in</a></li>
              <li><a href="#">Log out</a></li>
              <li><a href="#"><span class="glyphicon glyphicon-user"></span> Admin</a></li>
          </ul>
      </div>
  </div>
</nav> 
```

###   建立漢堡按鍵步驟

1. `class="navbar-toggle"`：這個是關鍵字，有它才能讓我們順利看到漢堡按鍵，並出現在視窗右方。
2. `data-toggle="collapse"`：這是用來製作動畫效果的，沒有的話，我們點「三」的時候不會有任何反應。
3. `data-target="#myNavbar"`這裡面的myNavbar是一個CSS的id，可以任意命名，一定要跟下面縮放的id對應才可執行。
4. `<span class="icon-bar"></span>`這段這是用來產生「一」，當有三個「一」時，合在一起就會變「三」的按鍵了。

5. ` class="collapse navbar-collapse"`：這兩字詞幫助我們在正常視窗的情況下，可以看到原本的導覽列。
6. id="Navbarshow"與button裡的data-target做對應，能讓我們看到縮放裡的內容


###   補充資料

* 如果希望navbar不會受頁面捲動下移而消失，則在class加上fixed-top，變會置頂在最上方