Bootstrap_navbar導覽頁面

十一月 15, 2019 本文总阅读量次

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


<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>

建立漢堡按鍵步驟

class=”navbar-toggle”：這個是關鍵字，有它才能讓我們順利看到漢堡按鍵，並出現在視窗右方。
data-toggle=”collapse”：這是用來製作動畫效果的，沒有的話，我們點「三」的時候不會有任何反應。
data-target=”#myNavbar”這裡面的myNavbar是一個CSS的id，可以任意命名，一定要跟下面縮放的id對應才可執行。
這段這是用來產生「一」，當有三個「一」時，合在一起就會變「三」的按鍵了。
class=”collapse navbar-collapse”：這兩字詞幫助我們在正常視窗的情況下，可以看到原本的導覽列。
id=”Navbarshow”與button裡的data-target做對應，能讓我們看到縮放裡的內容
如果希望navbar不會受頁面捲動下移而消失，則在class加上fixed-top，變會置頂在最上方

navbar導覽使用方式

建立漢堡按鍵步驟