24.Bootstrap(中文教程)元件：navbar:响应式导栏列

ㄧ.响应式导栏列

<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