Bootstrap 5 네비게이션 패널

네비게이션 바

네비게이션 바는 페이지 상단에 위치한 네비게이션 헤더입니다:

기본 네비게이션 바

Bootstrap을 사용하면 네비게이션 바가 화면 크기에 따라 확장되거나 접히게 됩니다.

請使用 .navbar 클래스를 사용하여 표준 네비게이션 바를 생성한 후, 반응형 접기 클래스를 추가합니다:.navbar-expand-xxl|xl|lg|md|sm（대형, 초대형, 대형, 중형 장치에서 수평으로 정렬되거나, 소형 화면에서 직립형으로 쌓입니다）。

네비게이션 바에 링크를 추가하려면, class="navbar-nav" 의 <ul> 요소를 사용하거나 ( <div>）를 추가한 후, .nav-item 클래스의 <li> 요소를 따라, .nav-link 클래스의 <a> 요소:

實例

<!-- 회색의 수평형 네비게이션 바가 소형 화면에서 직립형으로 변환 -->
<nav class="navbar navbar-expand-sm bg-light">
  <div class="container-fluid">
    <!-- 링크 -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">링크 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">링크 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">링크 3</a>
      </li>
    </ul>
  </div>
</nav>

親自試一試

직립형 네비게이션 바

삭제 .navbar-expand-* 클래스를 사용하여 항상 직립형 네비게이션 바를 생성할 수 있습니다:

實例

<!-- 회색의 직립형 네비게이션 바 -->
<nav class="navbar bg-light">
  ...
</nav>

親自試一試

중앙에 배치된 네비게이션 바

추가 .justify-content-center 클래스를 사용하여 네비게이션 바를 중앙에 배치할 수 있습니다:

實例

<nav class="navbar navbar-expand-sm bg-light justify-content-center">
  ...
</nav>

親自試一試

컬러 네비게이션 바

모든 .bg-color 클래스를 사용하여 네비게이션 바의 배경 색상을 변경할 수 있습니다:

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light

안내:請使用 .navbar-dark 클래스를 사용하여 모든 링크에 흰 텍스트 색상을 추가하거나, .navbar-light 클래스를 통해 검은 텍스트 색상을 추가합니다.

實例

<!-- 회색 배경, 흰 텍스트 -->
<nav class="navbar navbar-expand-sm bg-light navbar-light">
  <div class="container-fluid">
    <ul class="navbar-nav">
      <li class="nav-item">
        活动
      </li>
     <li class="nav-item">
        <a class="nav-link" href="#">링크</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">링크</a>
      </li>
      <li class="nav-item">
        <a class="nav-link active" href="#">활성화</a>
      </li>
    </ul>
  </div>
</nav>
<a class="nav-link disabled" href="#">비활성화</a>
<!-- 블랙 배경, 화이트 텍스트 -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>
<!-- 블루 배경, 화이트 텍스트 -->

親自試一試

<nav class="navbar navbar-expand-sm bg-primary navbar-dark">...</nav>활성화/비활성화 상태를 설정하면 .active 클래스를 <a> 요소를 활성화하거나 .disabled 클래스를 사용하여 링크를 클릭할 수 없도록 합니다。

브랜드 / 브랜드

.navbar-brand 클래스를 사용하여 링크를 클릭할 수 없도록 합니다：

實例

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Logo</a>
  </div>
</nav>

親自試一試

브랜드 / 브랜드를 강조하려면 .navbar-brand 클래스와 이미지를 함께 사용할 때, Bootstrap 5는 자동으로 이미지 스타일을 설정하여 수직 방향으로 네비게이션 바에 맞춥니다。

實例

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="logo.png" alt="Avatar Logo" style="width:40px;" class="rounded-pill"> 
    </a>
  </div>
</nav>

親自試一試

네비게이션 텍스트

請使用 .navbar-text class="navbar-text"는 수직 정렬된 네비게이션 바에서 링크가 아닌 모든 요소에 사용됩니다（확정된 여백과 텍스트 색상을 보장하십시오）。

實例

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <span class="navbar-text">네비게이션 텍스트</span>
  </div>
</nav>

親自試一試

많은 경우, 특히 작은 스크린에서는, 네비게이션 링크를 숨기고 버튼으로 대체하고, 버튼을 클릭할 때 링크를 표시하고 싶습니다.

최소한, 접미사를 설정하여 사용해야 합니다. class="navbar-toggler"、data-bs-toggle="collapse" 와 data-bs-target="#thetarget" 의 버튼을 따라然后将导航栏内容（链接等）包裹在 class="collapse navbar-collapse" 의 <div> 요소에 따라, 버튼의 data-bs-target 매칭된 id："thetarget"。

實例

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Logo</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">링크</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">링크</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">링크</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

親自試一試

안내:또한 제거할 수 있습니다: .navbar-expand-md 클래스는 항상 네비게이션 바 링크를 숨기고 전환 버튼을 표시합니다.

下拉 메뉴 네비게이션 바

네비게이션 바는下拉 메뉴를 포함할 수 있습니다:

實例

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">下拉 메뉴</a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">링크</a></li>
    <li><a class="dropdown-item" href="#">또 다른 링크</a></li>
    <li><a class="dropdown-item" href="#">세 번째 링크</a></li>
  </ul>
</li>

親自試一試

네비게이션 바 메뉴와 버튼

네비게이션 바에 양식을 포함할 수 있습니다:

實例

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="javascript:void(0)">Logo</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="mynavbar">
      <ul class="navbar-nav me-auto">
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">链接</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">链接</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">链接</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="text" placeholder="Search">
        <button class="btn btn-primary" type="button">Search</button>
      </form>
    </div>
  </div>
</nav>

親自試一試

位置固定的導航欄

導航欄也可以固定在頁面的頂部或底部。

固定導航欄會在獨立於頁面滾動的固定位置（頂部或底部）保持可見。

.fixed-top 類使導航欄固定在頁面的頂部：

實例

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
  ...
</nav>

親自試一試

請使用 .fixed-bottom 類把導航欄停留在頁面底部：

實例

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
  ...
</nav>

親自試一試

請使用 .sticky-top 類使導航欄在滾動經過它時固定/停留在頁面的頂部。

註釋：此類在 IE11 及更早版本中不起作用（將其視為 position:relative）。

實例

<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
  ...
</nav>

親自試一試