Source

나브바

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="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <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" href="#" tabindex="-1" aria-disabled="true">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.4/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.4/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" href="#" tabindex="-1" aria-disabled="true">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-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">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="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <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>

컨테이너

필수는 아니지만 navbar를 감싸서 페이지 중앙에 배치하거나 안에 하나를 추가하여 고정 또는 정적 상단 navbar.container 콘텐츠만 중앙에 배치할 수 있습니다 .

<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는 , 및 클래스를 활용 .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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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>

외부 콘텐츠

때로는 축소 플러그인을 사용하여 페이지의 다른 곳에서 숨겨진 콘텐츠를 트리거하고 싶을 때가 있습니다. 플러그인이 작동 id하고 data-target일치하므로 쉽게 완료됩니다!

Collapsed content

Toggleable via the navbar brand.

<div class="pos-f-t">
  <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>