나브바
Bootstrap의 강력하고 반응이 빠른 탐색 헤더인 navbar에 대한 설명서 및 예제입니다. 접기 플러그인 지원을 포함하여 브랜딩, 탐색 등에 대한 지원이 포함됩니다.
작동 방식
탐색 모음을 시작하기 전에 알아야 할 사항은 다음과 같습니다.
- Navbar는 반응형 축소 및 색 구성표 클래스 에 대한 래핑이 필요합니다
.navbar
..navbar-expand{-sm|-md|-lg|-xl|-xxl}
- Navbar와 그 내용은 기본적으로 유동적입니다. 컨테이너 를 변경하여 다양한 방식으로 가로 너비를 제한합니다.
- 탐색 모음 내에서 간격 및 정렬을 제어하기 위해 간격 및 플렉스 유틸리티 클래스를 사용 합니다.
- Navbar는 기본적으로 반응형이지만 쉽게 수정하여 변경할 수 있습니다. 반응형 동작은 Collapse JavaScript 플러그인에 따라 다릅니다.
- 요소 를 사용하여 접근성을 보장
<nav>
하거나 와 같은 보다 일반적인 요소를 사용하는 경우 모든 탐색 모음에 를<div>
추가하여role="navigation"
보조 기술 사용자를 위한 랜드마크 영역으로 명시적으로 식별합니다. aria-current="page"
현재 페이지 또는 세트의 현재 항목에 대해 를 사용하여 현재 항목을 나타냅니다aria-current="true"
.
prefers-reduced-motion
미디어 쿼리에 따라 다릅니다. 접근성 설명서의 감소된 동작 섹션을 참조하십시오
.
지원되는 콘텐츠
Navbar에는 소수의 하위 구성 요소에 대한 지원이 내장되어 있습니다. 필요에 따라 다음 중에서 선택합니다.
.navbar-brand
회사, 제품 또는 프로젝트 이름..navbar-nav
전체 높이 및 경량 탐색(드롭다운 지원 포함)..navbar-toggler
축소 플러그인 및 기타 탐색 토글 동작과 함께 사용합니다.- 모든 양식 컨트롤 및 작업을 위한 플렉스 및 간격 유틸리티.
.navbar-text
세로로 가운데에 배치된 텍스트 문자열을 추가하기 위한 것입니다..collapse.navbar-collapse
상위 중단점으로 탐색 모음 콘텐츠를 그룹화하고 숨기기 위한 것입니다..navbar-scroll
확장된 탐색 모음 콘텐츠 를 설정max-height
하고 스크롤 하는 옵션을 추가합니다 .
lg
다음은 (큰) 중단점 에서 자동으로 축소되는 반응형 조명 테마 탐색 모음에 포함된 모든 하위 구성 요소의 예입니다 .
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</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-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
이 예에서는 배경 ( bg-light
) 및 공백 ( my-2
, my-lg-0
, me-sm-0
, my-sm-0
) 유틸리티 클래스를 사용합니다.
상표
대부분 의 .navbar-brand
요소에 적용할 수 있지만 일부 요소에는 유틸리티 클래스 또는 사용자 정의 스타일이 필요할 수 있으므로 앵커가 가장 잘 작동합니다.
텍스트
클래스 를 사용하여 요소 내에 텍스트를 추가합니다 .navbar-brand
.
<!-- As a link -->
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
<!-- As a heading -->
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-brand mb-0 h1">Navbar</span>
</div>
</nav>
영상
.navbar-brand
안에 있는 텍스트를 로 바꿀 수 있습니다 <img>
.
<nav class="navbar navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">
<img src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24">
</a>
</div>
</nav>
이미지 및 텍스트
또한 몇 가지 추가 유틸리티를 사용하여 이미지와 텍스트를 동시에 추가할 수도 있습니다. .d-inline-block
및 의 추가에 유의 .align-text-top
하십시오 <img>
.
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top">
Bootstrap
</a>
</div>
</nav>
탐색
Navbar 탐색 링크 .nav
는 자체 수정자 클래스가 있는 옵션을 기반으로 하며 적절한 반응 스타일을 위해 토글러 클래스 를 사용해야 합니다. 탐색 모음의 탐색은 탐색 모음 콘텐츠를 안전하게 정렬된 상태로 유지하기 위해 가능한 한 많은 수평 공간을 차지하도록 증가합니다 .
현재 페이지를 나타내기 위해 .active
클래스를 추가합니다 ..nav-link
aria-current
활성 에 속성 도 추가해야 합니다 .nav-link
.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
<a class="nav-link active" aria-current="page" href="#">Home</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>
</div>
</nav>
그리고 우리는 탐색에 클래스를 사용하기 때문에 원하는 경우 목록 기반 접근 방식을 완전히 피할 수 있습니다.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</div>
</div>
</div>
</nav>
탐색 모음에서 드롭다운을 사용할 수도 있습니다. 드롭다운 메뉴에는 위치 지정을 위한 래핑 요소가 필요하므로 아래와 같이 .nav-item
및 에 대해 별도의 중첩 요소를 사용해야 합니다..nav-link
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
<a class="nav-link active" aria-current="page" href="#">Home</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-bs-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
양식
탐색 모음 내에 다양한 양식 컨트롤 및 구성 요소 배치:
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</nav>
플렉스 레이아웃 을 사용하는 직접적인 자식 요소 .navbar
는 기본적으로 justify-content: space-between
. 이 동작을 조정하려면 필요에 따라 추가 플렉스 유틸리티 를 사용하십시오.
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand">Navbar</a>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</nav>
입력 그룹도 작동합니다. 탐색 모음이 전체 양식이거나 대부분이 양식인 경우 <form>
요소를 컨테이너로 사용하고 일부 HTML을 저장할 수 있습니다.
<nav class="navbar navbar-light bg-light">
<form class="container-fluid">
<div class="input-group">
<span class="input-group-text" id="basic-addon1">@</span>
<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="container-fluid justify-content-start">
<button class="btn btn-outline-success me-2" 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">
<div class="container-fluid">
<span class="navbar-text">
Navbar text with an inline element
</span>
</div>
</nav>
필요에 따라 다른 구성 요소 및 유틸리티와 혼합하여 사용하십시오.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar w/ text</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</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>
</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">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
</div>
반응형 컨테이너를 사용하여 탐색 모음의 콘텐츠가 표시되는 너비를 변경합니다.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-md">
<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">
<div class="container-fluid">
<a class="navbar-brand" href="#">Default</a>
</div>
</nav>
<nav class="navbar fixed-top navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Fixed top</a>
</div>
</nav>
<nav class="navbar fixed-bottom navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Fixed bottom</a>
</div>
</nav>
<nav class="navbar sticky-top navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Sticky top</a>
</div>
</nav>
스크롤링
축소된 탐색 모음의 토글 가능한 콘텐츠 내에서 세로 스크롤을 활성화 .navbar-nav-scroll
하려면 a (또는 다른 탐색 모음 하위 구성 요소)에 추가 합니다. .navbar-nav
기본적으로 스크롤은 뷰포트 높이의 75%에서 시작 되지만 로컬 CSS 사용자 정의 속성 이나 사용자 정의 스타일 75vh
로 이를 재정의할 수 있습니다 . --bs-navbar-height
탐색 모음이 확장되면 더 큰 뷰포트에서 콘텐츠가 기본 탐색 모음에서와 같이 표시됩니다.
이 동작에는 overflow
-설정할 overflow-y: auto
때(여기에서 콘텐츠를 스크롤하는 데 필요함) overflow-x
가 와 동일하여 auto
일부 가로 콘텐츠가 잘리는 잠재적인 단점이 있습니다.
다음 은 최적의 간격을 위한 추가 여백 유틸리티와 함께 .navbar-nav-scroll
사용하는 탐색 모음의 예입니다.style="--bs-scroll-height: 100px;"
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar scroll</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</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="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Link
</a>
<ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
<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" href="#" tabindex="-1" aria-disabled="true">Link</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
반응하는 행동
Navbar는 .navbar-toggler
, .navbar-collapse
및 .navbar-expand{-sm|-md|-lg|-xl|-xxl}
클래스를 사용하여 해당 콘텐츠가 버튼 뒤에서 축소되는 시점을 결정할 수 있습니다. 다른 유틸리티와 함께 특정 요소를 표시하거나 숨길 시기를 쉽게 선택할 수 있습니다.
절대 축소되지 않는 탐색 모음의 경우 탐색 모음에 .navbar-expand
클래스를 추가합니다. 항상 축소되는 탐색 모음의 경우 클래스를 추가하지 마십시오 .navbar-expand
.
토글러
Navbar 토글러는 기본적으로 왼쪽 정렬되지만 , 와 같은 형제 요소 뒤에 오는 경우 .navbar-brand
자동으로 맨 오른쪽에 정렬됩니다. 마크업을 반대로 하면 토글러의 배치가 반대로 됩니다. 다음은 다양한 토글 스타일의 예입니다.
.navbar-brand
가장 작은 중단점에 표시 되지 않음:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</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="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
왼쪽에 브랜드 이름이 표시되고 오른쪽에 토글러가 표시됩니다.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</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="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
왼쪽에 토글러가 있고 오른쪽에 브랜드 이름이 있는 경우:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</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="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
외부 콘텐츠
때로는 접기 플러그인을 사용하여 구조적으로 .navbar
. 플러그인이 작동 id
하고 data-bs-target
일치하므로 쉽게 완료됩니다!
<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">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
이 작업을 수행할 때 컨테이너가 열릴 때 프로그래밍 방식으로 컨테이너로 포커스를 이동하기 위해 추가 JavaScript를 포함하는 것이 좋습니다. 그렇지 않으면 키보드 사용자와 보조 기술 사용자가 새로 공개된 콘텐츠를 찾는 데 어려움을 겪을 수 있습니다. 특히 열린 컨테이너가 문서 구조에서 토글러 앞에 오는 경우 더욱 그렇습니다. 또한 토글러 에 콘텐츠 컨테이너 aria-controls
를 가리키는 속성 이 있는지 확인하는 것이 좋습니다 . id
이론적으로 이를 통해 보조 기술 사용자는 토글러에서 제어하는 컨테이너로 직접 이동할 수 있지만 이에 대한 지원은 현재 매우 고르지 않습니다.
사스
변수
$navbar-padding-y: $spacer * .5;
$navbar-padding-x: null;
$navbar-nav-link-padding-x: .5rem;
$navbar-brand-font-size: $font-size-lg;
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
$nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2;
$navbar-brand-height: $navbar-brand-font-size * $line-height-base;
$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) * .5;
$navbar-brand-margin-end: 1rem;
$navbar-toggler-padding-y: .25rem;
$navbar-toggler-padding-x: .75rem;
$navbar-toggler-font-size: $font-size-lg;
$navbar-toggler-border-radius: $btn-border-radius;
$navbar-toggler-focus-width: $btn-focus-width;
$navbar-toggler-transition: box-shadow .15s ease-in-out;
$navbar-dark-color: rgba($white, .55);
$navbar-dark-hover-color: rgba($white, .75);
$navbar-dark-active-color: $white;
$navbar-dark-disabled-color: rgba($white, .25);
$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-dark-toggler-border-color: rgba($white, .1);
$navbar-light-color: rgba($black, .55);
$navbar-light-hover-color: rgba($black, .7);
$navbar-light-active-color: rgba($black, .9);
$navbar-light-disabled-color: rgba($black, .3);
$navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-light-toggler-border-color: rgba($black, .1);
$navbar-light-brand-color: $navbar-light-active-color;
$navbar-light-brand-hover-color: $navbar-light-active-color;
$navbar-dark-brand-color: $navbar-dark-active-color;
$navbar-dark-brand-hover-color: $navbar-dark-active-color;
고리
반응형 탐색 모음 확장/축소 클래스 (예: .navbar-expand-lg
)는 $breakpoints
지도와 결합되고 의 루프를 통해 생성됩니다 scss/_navbar.scss
.
// Generate series of `.navbar-expand-*` responsive classes for configuring
// where your navbar collapses.
.navbar-expand {
@each $breakpoint in map-keys($grid-breakpoints) {
$next: breakpoint-next($breakpoint, $grid-breakpoints);
$infix: breakpoint-infix($next, $grid-breakpoints);
// stylelint-disable-next-line scss/selector-no-union-class-name
&#{$infix} {
@include media-breakpoint-up($next) {
flex-wrap: nowrap;
justify-content: flex-start;
.navbar-nav {
flex-direction: row;
.dropdown-menu {
position: absolute;
}
.nav-link {
padding-right: $navbar-nav-link-padding-x;
padding-left: $navbar-nav-link-padding-x;
}
}
.navbar-nav-scroll {
overflow: visible;
}
.navbar-collapse {
display: flex !important; // stylelint-disable-line declaration-no-important
flex-basis: auto;
}
.navbar-toggler {
display: none;
}
}
}
}
}