부트스트랩 4 탐색바
네비게이션 바
탐색 모음은 페이지 상단에 배치되는 탐색 헤더다.
기본 탐색바
Bootstrap을 사용하면 화면 크기에 따라 탐색 모음이 확장되거나 축소될 수 있다.
클래스 와 함께 표준 탐색 모음이 생성되고 그 뒤에 반응형 축소 .navbar 클래스가 생성된다.
.navbar-expand-xl|lg|md|sm (초대형, 대형, 중형 또는 소형 화면에서 탐색 모음을 수직으로 쌓는다.)
탐색 모음 내부에 링크를 추가하려면 class=”navbar-nav”가 있는 <ul> 요소를 사용하자.
그런 다음 .nav-item 클래스가 있는 <li> 요소를 추가한 다음 .nav-link 클래스가 있는 <a> 요소를 추가한다.
예제
<!-- A grey horizontal navbar that becomes vertical on small screens -->
<nav class="navbar navbar-expand-sm bg-light">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</nav>
수직 탐색 모음
수직 탐색 모음을 만들려면 .navbar-expand-xl|lg|md|sm 클래스를 제거하자.
예제
<!-- A vertical navbar -->
<nav class="navbar bg-light">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</nav>
중앙 Navbar
탐색 모음을 중앙에 배치하려면 .justify-content-center 클래스를 추가하자.
예제
<nav class="navbar navbar-expand-sm bg-light justify-content-center"> ... </nav>
컬러 Navbar
탐색 모음의 배경색을 변경하려면 .bg-color 클래스 중 하나를 사용하자 (.bg-primary, .bg-secondary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-dark 및 .bg-light).
⭐ .navbar-dark 클래스가 포함된 탐색 모음의 모든 링크에 흰색 텍스트 색상을 추가하거나 .navbar-light 클래스를 사용하여 검정색 텍스트 색상을 추가하자.
예제
<!-- Grey with black text -->
<nav class="navbar navbar-expand-sm bg-light navbar-light">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</nav>
<!-- Black with white text -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>
<!-- Blue with white text -->
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">...</nav>
브랜드 / 로고
.navbar-brand 클래스는 페이지의 브랜드/로고/프로젝트 이름을 강조하는 데 사용된다.
예제
<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <a class="navbar-brand" href="#">Logo</a> ... </nav>
탐색 모음 축소
작은 화면에서는 탐색 링크를 숨기고 클릭하면 표시되는 버튼으로 대체하려는 경우가 많다.
축소 가능한 탐색 모음을 만들려면 버튼을 사용하자.
예제
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Navbar</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
드롭다운이 있는 Navbar
Navbar에는 드롭다운 메뉴도 포함될 수 있다.
예제
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Logo</a>
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Dropdown link
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</li>
</ul>
</nav>
Navbar 양식 및 버튼
입력과 버튼을 나란히 그룹화하기 위해 <form> 요소에 class=”form-inline”을 추가한다.
예제 1
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<form class="form-inline" action="/action_page.php">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-success" type="submit">Search</button>
</form>
</nav>
예제 2
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<form class="form-inline" action="/action_page.php">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text" class="form-control" placeholder="Username">
</div>
</form>
</nav>
탐색 가능한 텍스트
.navbar-text 클래스를 사용하여 링크가 아닌 navbar 내부의 모든 요소를 수직으로 정렬한다.
적절한 패딩 및 텍스트 색상을 보장한다.
예제
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
</ul>
<!-- Navbar text-->
<span class="navbar-text">
Navbar text
</span>
</nav>
고정 탐색 표시줄
탐색 표시줄을 페이지 상단이나 하단에 고정할 수도 있다.
고정 탐색 모음은 페이지 스크롤과 관계없이 고정된 위치(상단 또는 하단)에 계속 표시된다.
.fixed-top 클래스는 탐색 모음을 상단에 고정 시킨다.
페이지 하단에 navbar를 유지하려면 .fixed-bottom 클래스를 사용하자.
탐색 모음을 스크롤할 때 페이지 상단에 고정되도록 하려면 .sticky-top 클래스를 사용하자.
⭐ 이 클래스는 IE11 및 이전 버전에서는 작동하지 않는다. position: relative;로 처리된다.
예제 1
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top"> ... </nav>
예제 2
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom"> ... </nav>
예제 3
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top"> ... </nav>