간단한 바

.navbar-expand-md 클래스로 일반 메뉴를 표시할 뷰포트 너비 및 햄버거 메뉴를 표시할 때를 제어할 수 있습니다.

<nav class="navbar navbar-expand-md bg-light">
<div class="container">
<a href="#" class="navbar-brand">Navbar</a>
<button
  type="button"
  data-bs-toggle="collapse"
  data-bs-target="#navbarNav"
  class="navbar-toggler"
>
  <span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a href="#" class="nav-link active">Home</a>
</li>
<li class="nav-item">
<a href="#about" class="nav-link">About</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Services</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Contact</a>
</li>
</ul>
</div>
</div>
</nav>

색상 변형

nav 요소에 클래스를 추가하는 것도 가능합니다. 예를 들어, bg-primary를 추가하면 배경색을 빠르게 파란색으로 변경할 수 있습니다.

<nav class="navbar navbar-expand-md bg-primary navbar-dark">
  <div class="container">
    <a href="#" class="navbar-brand">Navbar</a>
    <button
      type="button"
      data-bs-toggle="collapse"
      data-bs-target="#navbarNav"
      class="navbar-toggler"
    >
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item">
          <a href="#" class="nav-link active">Home</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">About</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">Services</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

상단 고정

고정 상단 클래스는 스크롤과 상관없이 뷰포트 상단에 고정된 내비게이션 바를 만드는 데 사용됩니다.

<nav class="navbar navbar-expand-md bg-dark navbar-dark fixed-top">
  <div class="container">
    <a href="#" class="navbar-brand">Navbar</a>
    <button
      type="button"
      data-bs-toggle="collapse"
      data-bs-target="#navbarNav"
      class="navbar-toggler"
    >
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item">
          <a href="#" class="nav-link active">Home</a>
        </li>
        <li class="nav-item">
          <a href="#about" class="nav-link">About</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">Services</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

네비게이션 바에서의 폼

부트스트랩에서 네비게이션 바에서의 폼은 네비게이션 바 내에 표준 HTML 폼 요소를 통합하여 작동합니다. 이를 통해 검색 상자 또는 다른 폼 입력을 네비게이션 영역 내에 직접 포함할 수 있습니다.

기억하세요, 다른 일반 요소들과 똑같은 방법으로 이 작업을 수행할 수 있습니다.

네비게이션 바

이미지

이미지