2015-05-29 40 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>