부트스트랩 탭 및 알약
메뉴
대부분의 웹 페이지에는 일종의 메뉴가 있습니다.
HTML에서 메뉴는 종종 다음과 같이 순서가 지정되지 않은 목록으로 정의되고 <ul>나중에 스타일이 지정됩니다.
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
위 목록의 가로 메뉴를 만들고 싶다면
.list-inline클래스를 <ul>다음 에 추가하세요.
<ul class="list-inline">
또는 Bootstraps의 탭 및 알약을 사용하여 위의 메뉴를 표시할 수 있습니다(아래 참조).
참고: 탭과 알약을 토글 가능/동적으로 만드는 방법을 알아보려면 이 페이지 의 마지막 예 를 참조하세요.
탭
탭은 다음으로 생성됩니다 <ul class="nav nav-tabs">.
팁: 또한 현재 페이지를 로 표시하십시오 <li class="active">.
다음 예에서는 탐색 탭을 만듭니다.
예시
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
드롭다운 메뉴가 있는 탭
탭에는 드롭다운 메뉴도 포함될 수 있습니다.
다음 예는 "메뉴 1"에 드롭다운 메뉴를 추가합니다.
예시
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Submenu 1-1</a></li>
<li><a href="#">Submenu 1-2</a></li>
<li><a href="#">Submenu 1-3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
의사
알약은 로 생성됩니다 <ul class="nav nav-pills">. 또한 현재 페이지를
<li class="active">다음 으로 표시하십시오.
예시
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
수직 알약
알약은 세로로 표시할 수도 있습니다. .nav-stacked클래스 를 추가하기만 하면 됩니다.
예시
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
행의 수직 알약
텍스트...
텍스트...
텍스트...
다음 예에서는 세로 알약 메뉴를 마지막 열 안에 배치합니다. 따라서 큰 화면에서 메뉴가 오른쪽에 표시됩니다. 그러나 작은 화면에서는 콘텐츠가 자동으로 단일 열 레이아웃으로 조정됩니다.
예시
<div class="col-md-3">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</div>
드롭다운 메뉴가 있는 알약
알약은 드롭다운 메뉴도 보유할 수 있습니다.
다음 예는 "메뉴 1"에 드롭다운 메뉴를 추가합니다.
예시
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Submenu 1-1</a></li>
<li><a href="#">Submenu 1-2</a></li>
<li><a href="#">Submenu 1-3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
중앙 탭 및 알약
탭과 알약을 가운데에 맞추거나 정렬하려면 .nav-justified클래스를 사용하십시오.
768px보다 작은 화면에서는 목록 항목이 누적됩니다(콘텐츠는 중앙에 유지됨).
예시
<!-- Centered Tabs -->
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
<!-- Centered Pills -->
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
전환 가능/동적 탭
집
통증 자체도 중요하지만 아디피싱 과정에 의해 통증이 더 커지는데, 큰 일을 할 수 있도록 통증을 줄이는 시간을 드리고 있습니다.
탭을 토글 가능하게 만들려면 data-toggle="tab"각 링크에 속성을 추가하십시오. 그런 다음 모든 탭에 대해 고유한 ID가 있는 클래스를 추가하고 class 가 있는 요소 .tab-pane안에 래핑합니다
.<div>.tab-content
탭을 클릭할 때 탭이 페이드 인 및 페이드 아웃되도록 하려면
.fade클래스를 .tab-pane다음 에 추가하십시오.
예시
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
</div>
전환 가능/동적 알약
알약에도 동일한 코드가 적용됩니다. data-toggle 속성만 다음으로 변경하십시오 data-toggle="pill".
예시
<ul class="nav nav-pills">
<li class="active"><a data-toggle="pill" href="#home">Home</a></li>
<li><a data-toggle="pill" href="#menu1">Menu 1</a></li>
<li><a data-toggle="pill" href="#menu2">Menu 2</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
</div>
전체 부트스트랩 탐색 참조
모든 탐색 클래스에 대한 전체 참조를 보려면 전체 부트스트랩 탐색 참조 로 이동하십시오 .
모든 탭 옵션, 메서드 및 이벤트에 대한 전체 참조를 보려면 Bootstrap JS 탭 참조 로 이동하십시오 .