트위터 부트 스트랩 탭 뒤집기

Question

트위터 부트 스트랩 (http://twitter.github.io/bootstrap/javascript.html#tabs) 탭 기능을 사용했지만 위쪽과 아래쪽의 TabMenuNav에 표시된 내용이 거꾸로되어 있어야합니다. 이것이 가능합니까? 해결 방법은 무엇입니까?

Answer 1

예상 한대로 다음 CSS를 사용하십시오. 내용을 강조 표시하기 위해 .tab-content 클래스에 테두리를 추가했습니다.

.tab-content { 
padding:10px; 
border:1px solid #ddd; 
border-bottom:0px; 
} 
.nav-tabs { 
border-bottom: 0px; 
border-top: 1px solid #ddd; 
} 
.nav-tabs > li { 
margin-bottom:0; 
margin-top:-1px; 
} 

.nav-tabs > li > a { 
padding-top: 8px; 
padding-bottom: 8px; 
line-height: 20px; 
border: 1px solid transparent; 
-moz-border-radius:0px; 
-webkit-border-radius:0px; 
border-radius:0px; 
-moz-border-radius-bottomright: 5px; 
-webkit-border-bottom-right-radius: 5px; 
border-bottom-right-radius: 5px; 
-moz-border-radius-bottomleft: 5px; 
-webkit-border-bottom-left-radius: 5px; 
border-bottom-left-radius: 5px; 
} 
.nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus { 
color: #555555; 
cursor: default; 
background-color: #ffffff; 
border: 1px solid #ddd; 
border-top-color: transparent; 
} 

HTML 구조는 다음과 같아야

<div class="tabbable"> 
    <div class="tab-content"> 
     <div id="tab1" class="tab-pane active"> 
      tab1 content</div> 
     <div id="tab2" class="tab-pane"> 
      tab2 content</div> 
     <div id="tab3" class="tab-pane"> 
      tab3 content</div> 
     <div id="tab4" class="tab-pane"> 
      tab4 content</div> 
    </div> 
    <ul class="nav nav-tabs"> 
     <li class="active"><a href="#tab1" data-toggle="tab">tab1</a></li> 
     <li><a href="#tab2" data-toggle="tab">tab2</a></li> 
     <li><a href="#tab3" data-toggle="tab">tab3</a></li> 
     <li><a href="#tab4" data-toggle="tab">tab4</a></li> 
    </ul> 
</div> 

Bootply 예.

Answer 2

먼저 <div class="tab-content">을 사용하고 마지막으로 <ul class="nav nav-tabs" id="myTab">을 사용하여 순서를 바꾸어보세요.

<div class="tab-content"> 
    <div class="tab-pane active" id="home">...</div> 
    <div class="tab-pane" id="profile">...</div> 
    <div class="tab-pane" id="messages">...</div> 
    <div class="tab-pane" id="settings">...</div> 
</div> 

<ul class="nav nav-tabs" id="myTab"> 
    <li class="active"><a href="#home">Home</a></li> 
    <li><a href="#profile">Profile</a></li> 
    <li><a href="#messages">Messages</a></li> 
    <li><a href="#settings">Settings</a></li> 
</ul>