Bootstrap-自適應navbar

概念

• 透過navbar-expand定義在何種尺寸，menu項目的呈現會改為「漢堡折疊」樣式效果
• 使用bootstrap自定義的data-toggle及data-target，決定按鈕點下之後，menu的div要以collapse方式展開

  實作

• 首先class套用navbar，預設讓它是一個dispaly:flex的彈性盒子，且內部item會水平置中對齊(可以參考bootstrap的原始碼查看css設定)
• navbar-expand-sm則是決定當螢幕尺寸小於sm時，會改為以「折疊漢堡」顯示menu項目;若從頭到尾都希望以「折疊漢堡」顯示，則不要在class使用任何navbar-expand

• 如果希望navbar不會受瀏覽頁面捲動而消失，會一直顯示在最上方，則在class加上fixed-top

• button就是畫面中的「漢堡折疊」，需套用navbar-toggler類。基本上就會被navbar-expand-sm的定義影響在什麼螢幕尺寸顯示，什麼尺寸隱藏(可以參考bootstrap的原始碼查看css設定)

• data-toggle是bootstrap自訂的屬性data-toggle="collapse"，意思是當點擊它按鈕時，會觸發了”collapse”事件
• data-target也是bootstrap自訂的屬性，當”collapse”事件觸發，它的目標是#navbarCollapse，所以下面的#navbarCollapse這個div就會展開。
• #navbarCollapse這個div的class需套用collapse、navbar-collapse，基本上也就是會被navbar-expand-sm的定義影響在什麼螢幕尺寸顯示，什麼尺寸隱藏。

<nav id="main-nav" class="navbar navbar-expand-sm navbar-dark fixed-top" style="background-color:#24243c;">
    <div class="container">
        <a href="index.html" class="navbar-brand">LonelyPlanet</a>
        <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div id="navbarCollapse" class="collapse navbar-collapse" >
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a href="#home-section" class="nav-link">Home</a>
                </li>
                <li class="nav-item">
                    <a href="#explore-head-section" class="nav-link">Explore</a>
                </li>
                <li class="nav-item">
                    <a href="#author-head-section" class="nav-link">Author</a>
                </li>
                <li class="nav-item">
                    <a href="#mission-head-section" class="nav-link">Mission</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

參考bootstrap部分原始碼

• navbar
  
• navbar-expand-sm
  
• narvar-collapse
• narvar-toggler
  

成果

My Project-LonelyPlanet-Menu