부트스트랩 4 탐색
탐색 메뉴
간단한 수평 메뉴를 만들려면
요소에 .nav클래스를 추가한 다음
각각 에 대해 클래스를 추가하고 해당 링크에 클래스를 추가합니다.<ul>.nav-item<li>.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>
의사
.nav-pills클래스 와 함께 탐색 메뉴를 탐색 알약으로 바꿉니다 . 알약을 전환할 수 있게 하려면 이 페이지의 마지막 예를 참조하십시오.
예시
<ul class="nav nav-pills">
<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>
정당화된 탭/알약
.nav-justified클래스(동일한 너비) 로 탭/알약을 정렬합니다 .
예시
<ul class="nav nav-pills
nav-justified">..</ul>
<ul class="nav nav-tabs nav-justified">..</ul>
드롭다운이 있는 알약
예시
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li
class="nav-item dropdown">
<a class="nav-link
dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</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>
<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>
드롭다운이 있는 탭
예시
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li
class="nav-item dropdown">
<a class="nav-link
dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</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>
<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>
전환 가능/동적 탭
집
통증 자체도 중요하지만 아디피싱 과정에 의해 통증이 더 커지는데, 큰 일을 할 수 있도록 통증을 줄이는 시간을 드리고 있습니다.
탭을 토글 가능하게 만들려면 data-toggle="tab"각 링크에 속성을 추가하십시오. 그런 다음 모든 탭에 대해 고유한 ID가 있는 클래스를 추가하고 class 가 있는 요소 .tab-pane안에 래핑합니다
.<div>.tab-content
탭을 클릭할 때 탭이 페이드 인 및 페이드 아웃되도록 하려면
.fade클래스를 .tab-pane다음 에 추가하십시오.
예시
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link"
data-toggle="tab" href="#menu1">Menu 1</a>
</li>
<li
class="nav-item">
<a class="nav-link" data-toggle="tab"
href="#menu2">Menu 2</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div
class="tab-pane container active" id="home">...</div>
<div class="tab-pane
container fade"
id="menu1">...</div>
<div class="tab-pane
container fade" id="menu2">...</div>
</div>
전환 가능/동적 알약
집
통증 자체도 중요하지만 아디피싱 과정에 의해 통증이 더 커지는데, 큰 일을 할 수 있도록 통증을 줄이는 시간을 드리고 있습니다.
알약에도 동일한 코드가 적용됩니다. data-toggle 속성만 다음으로 변경하십시오 data-toggle="pill".
예시
<!-- Nav pills -->
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link"
data-toggle="pill" href="#menu1">Menu 1</a>
</li>
<li
class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu2">Menu 2</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div
class="tab-pane container active" id="home">...</div>
<div class="tab-pane
container fade"
id="menu1">...</div>
<div class="tab-pane
container fade" id="menu2">...</div>
</div>
전체 부트스트랩 4 탐색 참조
모든 탭 옵션, 메서드 및 이벤트에 대한 전체 참조를 보려면 Bootstrap 4 JS 탭 참조 로 이동 하십시오.