23.Bootstrap(中文教程)元件：navbar:导栏列

ㄧ.导栏列

<div class="component demo">  <nav class="navbar navbar-expand-md navbar-light bg-light">    <a href="#" class="nav-bar-brand">ninghao</a>    <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>  </nav></div>#demo.component{  padding: 50px;}

重点：
1.导栏列需要在外方使用navbar
2. .navbar-expand-md，为md的时候的导栏列水平排列。如果小于的话就垂直排列
3. .navbar-brand 为您的公司，产品或专案名称。也可以是logo
4. .navbar-nav 提供完整的高和轻便的导航（包括对下拉清单的支持）。也就是里面有nav-item以及nav-link
5. .nav-link为连结的导栏列，.nav-item为连结导栏列外面的li
6. .avbar-light .bg-light为样式，可参考官网：https://bootstrap.hexschool.com/docs/4.2/components/navbar/#color-schemes

codepen
参考：bootstrap4