Bootstrap 导航栏

navbar + collapse 响应式导航 · 难度：入门 · +15XP

Navbar 导航栏

.navbar + .navbar-expand-lg 创建响应式导航栏。在大屏幕上水平展开，小屏幕上折叠为汉堡菜单。

配色方案

.navbar-light 配 .bg-light（浅色），.navbar-dark 配 .bg-dark（深色）。

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Logo</a>
  <button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#nav">
  <div class="collapse navbar-collapse" id="nav">
    <ul class="navbar-nav"><li><a class="nav-link">Home</a></li></ul>
  </div>
</nav>