ㄧ.響應式導欄列

<div class="component demo" style="height:300vh">
  <nav class="navbar navbar-expand-md navbar-light bg-light">
    <a href="#" class="nav-bar-brand">ninghao</a>
    <button class="navbar-toggler" data-toggle="collapse" data-target="#navbar-content">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbar-content">
      <ul class="navbar-nav">
        <li class="nav-item"><a href="#" class="nav-link">學習</a></li>
        <li class="nav-item"><a href="#" class="nav-link">社區</a></li>
        <li class="nav-item"><a href="#" class="nav-link">博客</a></li>
      </ul>
    </div>
    
  </nav>
</div>


#demo.component{
  padding: 50px;
}

重點：
1. .collapse為手機響應式隱藏 .navbar-collapse為平板響應式顯示
2.再做一個menu的按鈕，button.navbar-toggler以及設定data-toggle為collapse屬性還有data-target要呼叫#navbar-content的導覽列
3.按鈕裡面的icon為span.navbar-toggler-icon

codepen
參考：bootstrap4