나브바

Bootstrap의 강력하고 반응이 빠른 탐색 헤더인 navbar에 대한 설명서 및 예제입니다. 브랜딩, 탐색, 축소 플러그인 등에 대한 지원을 포함합니다.

작동 방식

탐색 모음을 시작하기 전에 알아야 할 사항은 다음과 같습니다.

Navbar는 반응형 축소 및 색 구성표 클래스 에 대한 래핑이 필요합니다 .navbar..navbar-expand{-sm|-md|-lg|-xl}
Navbar와 그 내용은 기본적으로 유동적입니다. 수평 너비를 제한 하려면 선택적 컨테이너 를 사용하십시오.
탐색 모음 내에서 간격 및 정렬을 제어하기 위해 간격 및 플렉스 유틸리티 클래스를 사용 합니다.
Navbar는 기본적으로 반응형이지만 쉽게 수정하여 변경할 수 있습니다. 반응형 동작은 Collapse JavaScript 플러그인에 따라 다릅니다.
Navbar는 인쇄할 때 기본적으로 숨겨져 있습니다. 에 추가하여 강제로 인쇄 .d-print합니다 .navbar. 디스플레이 유틸리티 클래스를 참조하십시오 .
요소 를 사용하여 접근성을 보장 <nav>하거나 와 같은 보다 일반적인 요소를 사용하는 경우 모든 탐색 모음에 를 <div>추가하여 role="navigation"보조 기술 사용자를 위한 랜드마크 영역으로 명시적으로 식별합니다.

이 구성 요소의 애니메이션 효과는 prefers-reduced-motion미디어 쿼리에 따라 다릅니다. 접근성 설명서의 감소된 동작 섹션을 참조하십시오 .

지원되는 콘텐츠

Navbar에는 소수의 하위 구성 요소에 대한 지원이 내장되어 있습니다. 필요에 따라 다음 중에서 선택합니다.

.navbar-brand회사, 제품 또는 프로젝트 이름.
.navbar-nav전체 높이 및 경량 탐색(드롭다운 지원 포함).
.navbar-toggler축소 플러그인 및 기타 탐색 토글 동작과 함께 사용합니다.
.form-inline모든 양식 컨트롤 및 작업에 대해
.navbar-text세로로 가운데에 배치된 텍스트 문자열을 추가하기 위한 것입니다.
.collapse.navbar-collapse상위 중단점으로 탐색 모음 콘텐츠를 그룹화하고 숨기기 위한 것입니다.

lg다음은 (큰) 중단점 에서 자동으로 축소되는 반응형 조명 테마 탐색 모음에 포함된 모든 하위 구성 요소의 예입니다 .

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

이 예에서는 색상 ( bg-light) 및 간격 ( my-2, my-lg-0, mr-sm-0, my-sm-0) 유틸리티 클래스를 사용합니다.

상표

대부분 의 .navbar-brand요소에 적용할 수 있지만 일부 요소에는 유틸리티 클래스 또는 사용자 정의 스타일이 필요할 수 있으므로 앵커가 가장 잘 작동합니다.

<!-- As a link -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
</nav>

<!-- As a heading -->
<nav class="navbar navbar-light bg-light">
  <span class="navbar-brand mb-0 h1">Navbar</span>
</nav>

에 이미지를 추가 .navbar-brand하려면 적절한 크기를 지정하기 위해 항상 사용자 정의 스타일이나 유틸리티가 필요합니다. 다음은 시연할 몇 가지 예입니다.

<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.6/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
  </a>
</nav>

<!-- Image and text -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.6/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
  </a>
</nav>

탐색

Navbar 탐색 링크 .nav는 자체 수정자 클래스가 있는 옵션을 기반으로 하며 적절한 반응 스타일을 위해 토글러 클래스 를 사용해야 합니다. 탐색 모음의 탐색은 탐색 모음 콘텐츠를 안전하게 정렬된 상태로 유지하기 위해 가능한 한 많은 수평 공간을 차지하도록 증가합니다 .

활성 상태 .active는 현재 페이지를 .nav-links 또는 바로 상위 .nav-items에 직접 적용할 수 있음을 나타냅니다.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

그리고 우리는 탐색에 클래스를 사용하기 때문에 원하는 경우 목록 기반 접근 방식을 완전히 피할 수 있습니다.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-link" href="#">Features</a>
      <a class="nav-link" href="#">Pricing</a>
      <a class="nav-link disabled">Disabled</a>
    </div>
  </div>
</nav>

탐색 모음에서 드롭다운을 사용할 수도 있습니다. 드롭다운 메뉴에는 위치 지정을 위한 래핑 요소가 필요하므로 아래와 같이 .nav-item및 에 대해 별도의 중첩 요소를 사용해야 합니다..nav-link

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

양식

를 사용하여 탐색 모음 내에 다양한 양식 컨트롤 및 구성 요소를 배치합니다 .form-inline.

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

플렉스 레이아웃 을 사용하는 직접적인 자식 요소 .navbar는 기본적으로 justify-content: space-between. 이 동작을 조정하려면 필요에 따라 추가 플렉스 유틸리티 를 사용하십시오.

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand">Navbar</a>
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

입력 그룹도 작동합니다.

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1">@</span>
      </div>
      <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
    </div>
  </form>
</nav>

다양한 버튼도 이러한 탐색 모음 형식의 일부로 지원됩니다. 이것은 또한 수직 정렬 유틸리티를 사용하여 다양한 크기의 요소를 정렬할 수 있음을 상기시켜줍니다.

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <button class="btn btn-outline-success" type="button">Main button</button>
    <button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
  </form>
</nav>

텍스트

Navbars는 의 도움으로 약간의 텍스트를 포함할 수 있습니다 .navbar-text. 이 클래스는 텍스트 문자열의 수직 정렬 및 수평 간격을 조정합니다.

<nav class="navbar navbar-light bg-light">
  <span class="navbar-text">
    Navbar text with an inline element
  </span>
</nav>

필요에 따라 다른 구성 요소 및 유틸리티와 혼합하여 사용하십시오.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar w/ text</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarText">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
    </ul>
    <span class="navbar-text">
      Navbar text with an inline element
    </span>
  </div>
</nav>

색 구성표

background-color테마 클래스와 유틸리티 의 조합 덕분에 탐색 모음에 테마를 지정하는 것이 그 어느 때보다 쉬워졌습니다 . 밝은 배경색 .navbar-light과 함께 사용하거나 .navbar-dark어두운 배경색에 사용할 수 있습니다. 그런 다음 .bg-*유틸리티로 사용자 정의하십시오.

<nav class="navbar navbar-dark bg-dark">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-dark bg-primary">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

컨테이너

필수는 아니지만 탐색 모음을 .container페이지의 중앙에 배치할 수 있습니다. 또는 내부에 컨테이너를 추가하여 고정 또는 정적 상단 탐색 모음.navbar 의 콘텐츠만 중앙에 배치할 수 있습니다 .

<div class="container">
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
  </nav>
</div>

컨테이너가 탐색 모음 내에 있으면 지정된 .navbar-expand{-sm|-md|-lg|-xl}클래스보다 낮은 중단점에서 수평 패딩이 제거됩니다. 이렇게 하면 탐색 모음이 접힐 때 아래쪽 뷰포트에서 불필요하게 패딩을 두 배로 늘리지 않습니다.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

놓기

위치 유틸리티 를 사용 하여 비정적 위치에 탐색 모음을 배치합니다. 상단에 고정, 하단에 고정 또는 상단에 고정 중에서 선택하십시오(페이지가 상단에 도달할 때까지 페이지를 스크롤한 다음 그대로 유지). 고정 탐색 모음 이 DOM의 일반적인 흐름에서 가져오고 다른 요소와 겹치는 것을 방지하기 위해 사용자 지정 CSS(예: on ) position: fixed가 필요할 수 있음을 의미합니다 .padding-top<body>

또한 모든 브라우저 .sticky-top에서 완전히 지원되는 것은position: sticky 아닙니다 .

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Default</a>
</nav>

<nav class="navbar fixed-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed top</a>
</nav>

<nav class="navbar fixed-bottom navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed bottom</a>
</nav>

<nav class="navbar sticky-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Sticky top</a>
</nav>

스크롤링

축소된 탐색 모음의 토글 가능한 콘텐츠 내에서 세로 스크롤을 활성화 .navbar-nav-scroll하려면 a (또는 다른 탐색 모음 하위 구성 요소)에 추가 합니다. .navbar-collapse기본적으로 스크롤 75vh은 뷰포트 높이의 75%에서 시작되지만 인라인 또는 사용자 정의 스타일로 이를 재정의할 수 있습니다. 탐색 모음이 확장되면 더 큰 뷰포트에서 콘텐츠가 기본 탐색 모음에서와 같이 표시됩니다.

이 동작에는 overflow-설정할 overflow-y: auto때(여기에서 콘텐츠를 스크롤하는 데 필요함) overflow-x가 와 동일하여 auto일부 가로 콘텐츠가 잘리는 잠재적인 단점이 있습니다.

다음 은 최적의 간격을 위한 추가 여백 유틸리티와 함께 .navbar-nav-scroll사용하는 탐색 모음의 예입니다.style="max-height: 100px;"

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar scroll</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarScroll">
    <ul class="navbar-nav mr-auto my-2 my-lg-0 navbar-nav-scroll" style="max-height: 100px;">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
          Link
        </a>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#">Something else here</a></li>
        </ul>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Link</a>
      </li>
    </ul>
    <form class="d-flex">
      <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

반응하는 행동

Navbar는 .navbar-toggler, .navbar-collapse및 .navbar-expand{-sm|-md|-lg|-xl}클래스를 사용하여 해당 콘텐츠가 버튼 뒤에서 축소되는 시점을 결정할 수 있습니다. 다른 유틸리티와 함께 특정 요소를 표시하거나 숨길 시기를 쉽게 선택할 수 있습니다.

절대 축소되지 않는 탐색 모음의 경우 탐색 모음에 .navbar-expand클래스를 추가합니다. 항상 축소되는 탐색 모음의 경우 클래스를 추가하지 마십시오 .navbar-expand.

토글러

Navbar 토글러는 기본적으로 왼쪽 정렬되지만 , 와 같은 형제 요소 뒤에 오는 경우 .navbar-brand자동으로 맨 오른쪽에 정렬됩니다. 마크업을 반대로 하면 토글러의 배치가 반대로 됩니다. 다음은 다양한 토글 스타일의 예입니다.

.navbar-brand가장 작은 중단점에 표시 되지 않음:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
    <a class="navbar-brand" href="#">Hidden brand</a>
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

왼쪽에 브랜드 이름이 표시되고 오른쪽에 토글러가 표시됩니다.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

왼쪽에 토글러가 있고 오른쪽에 브랜드 이름이 있는 경우:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

외부 콘텐츠

때로는 접기 플러그인을 사용하여 구조적으로 .navbar. 플러그인이 작동 id하고 data-target일치하므로 쉽게 완료됩니다!

접힌 콘텐츠

navbar 브랜드를 통해 전환할 수 있습니다.

<div class="fixed-top">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
      <h5 class="text-white h4">Collapsed content</h5>
      <span class="text-muted">Toggleable via the navbar brand.</span>
    </div>
  </div>
  <nav class="navbar navbar-dark bg-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</div>

이 작업을 수행할 때 컨테이너가 열릴 때 프로그래밍 방식으로 컨테이너로 포커스를 이동하기 위해 추가 JavaScript를 포함하는 것이 좋습니다. 그렇지 않으면 키보드 사용자와 보조 기술 사용자가 새로 공개된 콘텐츠를 찾는 데 어려움을 겪을 수 있습니다. 특히 열린 컨테이너가 문서 구조에서 토글러 앞에 오는 경우 더욱 그렇습니다. 또한 토글러 에 콘텐츠 컨테이너 aria-controls를 가리키는 속성 이 있는지 확인하는 것이 좋습니다 . id이론적으로 이를 통해 보조 기술 사용자는 토글러에서 제어하는 컨테이너로 직접 이동할 수 있지만 이에 대한 지원은 현재 매우 고르지 않습니다.