iT邦幫忙

0

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


尚未有邦友留言

立即登入留言