부트스트랩 4 탐색
탐색 메뉴
간단한 가로 메뉴를 만들려면 <ul> 요소에 .nav 클래스를 추가한 다음 각 <li> 요소에 .nav-item 클래스를 추가하고 해당 링크에 .nav-link 클래스를 추가하자.
예제
<ul class="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> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul>
기본 예시
예제 보기정렬된 탐색
탐색을 중앙에 배치하는 .justify-content-center 클래스를 추가 하고 탐색을 오른쪽 정렬하는 .justify-content-end 클래스를 추가한다.
예제
<!-- Centered nav --> <ul class="nav justify-content-center"> <!-- Right-aligned nav --> <ul class="nav justify-content-end">
기본 예시
예제 보기수직 탐색
수직 탐색을 생성하려면 .flex-column 클래스를 추가한다.
예제
<ul class="nav flex-column">
기본 예시
예제 보기탭
.nav-tabs 탐색 메뉴를 수업과 함께 탐색 탭으로 전환한다.
활성/현재 링크에 .active 클래스를 추가한다.
예제
<ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" 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>
기본 예시
예제 보기참고
W3C School - Bootstrap – Bootstrap 4 Navs