나브바
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-link
s 또는 바로 상위 .nav-item
s에 직접 적용할 수 있음을 나타냅니다.
<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
일치하므로 쉽게 완료됩니다!
<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
이론적으로 이를 통해 보조 기술 사용자는 토글러에서 제어하는 컨테이너로 직접 이동할 수 있지만 이에 대한 지원은 현재 매우 고르지 않습니다.