2015-05-29 39 views
0

:我在bootstrap上是全新的。我想使用vertical tabset來顯示標籤右側的內容。我的想法素描:UI Bootstrap tabset首先顯示標籤的內容

Hand sketch of idea

<tabset vertical="true" type="tabs"> 
<tab heading="Vertical 1">Vertical content 1</tab> 
<tab heading="Vertical 2">Vertical content 2</tab> 
</tabset> 

但遺憾的是我沒能解決這個這個CSS命令。

+1

我插你的形象給你。此外,不需要感謝你的問題。 –

回答

0

性感照片:d從鏈接

<div class="col-xs-3"> <!-- required for floating --> 
    <!-- Nav tabs --> 
    <ul class="nav nav-tabs tabs-left"><!-- 'tabs-right' for right tabs --> 
<li class="active"><a href="#home" data-toggle="tab">Home</a></li> 
<li><a href="#profile" data-toggle="tab">Profile</a></li> 
<li><a href="#messages" data-toggle="tab">Messages</a></li> 
<li><a href="#settings" data-toggle="tab">Settings</a></li> 
</ul> 
</div> 
<div class="col-xs-9"> 
<!-- Tab panes --> 
<div class="tab-content"> 
    <div class="tab-pane active" id="home">Home Tab.</div> 
    <div class="tab-pane" id="profile">Profile Tab.</div> 
    <div class="tab-pane" id="messages">Messages Tab.</div> 
    <div class="tab-pane" id="settings">Settings Tab.</div> 
</div> 
</div> 

http://dbtek.github.io/bootstrap-vertical-tabs/learn.html

0

1.download CSS:http://dbtek.github.io/bootstrap-vertical-tabs/ 2.添加到您的網頁和低於設計頁面:

<div class="col-md-12"> 
<div class="col-md-3"> <!-- required for floating --> 
    <!-- Nav tabs --> 
    <ul class="nav nav-tabs tabs-left"><!-- 'tabs-right' for right tabs --> 
    <li class="active"><a href="#home" data-toggle="tab">Home</a></li> 
    <li><a href="#profile" data-toggle="tab">Profile</a></li> 
    <li><a href="#messages" data-toggle="tab">Messages</a></li> 
    <li><a href="#settings" data-toggle="tab">Settings</a></li> 
    </ul> 
</div> 
<div class="col-md-9"> 
    <!-- Tab panes --> 
    <div class="tab-content"> 
     <div class="tab-pane active" id="home">Home Tab.</div> 
     <div class="tab-pane" id="profile">Profile Tab.</div> 
     <div class="tab-pane" id="messages">Messages Tab.</div> 
     <div class="tab-pane" id="settings">Settings Tab.</div> 
    </div> 
</div> 
</div>