Отображение содержимого выше загрузочных вкладок загрузки?

Question

Я хочу реализовать разметку вкладки Nav на странице, как определено в bootstrap. Тем не менее, я хочу разместить содержимое, которое появляется при нажатии каждой вкладки, ВЫШЕ вкладок, в отличие от традиционно размещенного содержимого под вкладками.

Простыми словами я хочу переключить позиции «вкладок» и «содержимого вкладки».

Может кто-нибудь помочь?

Answer 1

Вы можете переключать положение вкладок и вкладок-контента путем размещения вкладок-контента по вкладкам:

<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> 

<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> 

UPDATE Получить закладки, чтобы показать вниз

Чтобы получить язычки, чтобы показать вверх вниз, вы можете переписать по умолчанию CSS Bootstrap с

.nav-tabs { 
    border-bottom: transparent; 
    border-top: 1px solid #dddddd; 
} 
.nav-tabs > li { 
    float: left; 
    margin-bottom: -1px; 
} 
.nav-tabs > li > a { 
    margin-right: 2px; 
    line-height: 1.42857143; 
    border: 1px solid transparent; 
    border-radius: 0 0 4px 4px; 
} 
.nav-tabs > li > a:hover { 
    border-color: #eeeeee #eeeeee #dddddd; 
} 
.nav-tabs > li.active > a, 
.nav-tabs > li.active > a:hover, 
.nav-tabs > li.active > a:focus { 
    color: #555555; 
    background-color: #ffffff; 
    border: 1px solid #dddddd; 
    border-top-color: transparent; 
    cursor: default; 
    margin:-1px; 
} 

Вот обновленный Bootply
http://www.bootply.com/K8HhVqoz08

Надеюсь, это поможет.