twitter-bootstrap
탭
수색…
기본 HTML
<ul class="nav nav-tabs" role="tablist">
<li role="presentation">
<a href="#id-of-content-1" role="tab" data-toggle="tab">Tab 1</a>
</li>
<li role="presentation">
<a href="#id-of-content-2" role="tab" data-toggle="tab">Tab 2</a>
</li>
<li role="presentation">
<a href="#id-of-content-3" role="tab" data-toggle="tab">Tab 3</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" id="id-of-content-1" class="tab-pane">Tab content 1</div>
<div role="tabpanel" id="id-of-content-2" class="tab-pane">Tab content 2</div>
<div role="tabpanel" id="id-of-content-3" class="tab-pane">Tab content 3</div>
</div>
그러면 3 개의 탭과 3 개의 연관된 컨텐트 div가있는 탭 세트가 생성됩니다.
애니메이션 탭
탭을 페이드 .fade
려면 각 .tab-pane
.fade
를 추가하십시오. 초기 내용을 표시하려면 활성 탭 창에 .in
클래스가 있어야합니다.
<ul class="nav nav-tabs" role="tablist">
<li role="presentation">
<a href="#id-of-content-1" role="tab" data-toggle="tab">
Tab 1
</a>
</li>
<li role="presentation" class="active">
<a href="#id-of-content-2" role="tab" data-toggle="tab">
Tab 2
</a>
</li>
<li role="presentation">
<a href="#id-of-content-3" role="tab" data-toggle="tab">
Tab 3
</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" id="id-of-content-1" class="tab-pane fade">
Tab content 1
</div>
<div role="tabpanel" id="id-of-content-2" class="tab-pane fade active in">
Tab content 2
</div>
<div role="tabpanel" id="id-of-content-3" class="tab-pane fade">
Tab content 3
</div>
</div>
Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow