<>BootStrap实现左侧或右侧竖式tab选项卡

代码如下:
<div style="height: 100px;"> <div class="col-xs-2"> <ul class="nav nav-tab
vertical-tab" role="tablist" id="vtab"> <li role="presentation" class="active">
<a href="#tab1" aria-controls="home" role="tab" data-toggle="tab">本地</a> </li>
<li role="presentation"> <a href="#tab2" aria-controls="inbox" role="tab"
data-toggle="tab">系统</a> </li> <li role="presentation"> <a href="#tab3"
aria-controls="outbox" role="tab" data-toggle="tab">网络</a> </li> <li
role="presentation"> <a href="#tab4" aria-controls="inbox1" role="tab"
data-toggle="tab">视音频</a> </li> <li role="presentation"> <a href="#tab5"
aria-controls="outbox1" role="tab" data-toggle="tab">图像</a> </li> <li
role="presentation"> <a href="#tab6" aria-controls="outbox1" role="tab"
data-toggle="tab">事件</a> </li> <li role="presentation"> <a href="#tab7"
aria-controls="outbox1" role="tab" data-toggle="tab">存储</a> </li> </ul> </div>
<div class="tab-content vertical-tab-content col-xs-10"> <div role="tabpanel"
class="tab-pane active" id="tab1">这是.本地..</div> <div role="tabpanel"
class="tab-pane" id="tab2">这是.系统..</div> <div role="tabpanel" class="tab-pane"
id="tab3">这是..网络.</div> <div role="tabpanel" class="tab-pane"
id="tab4">这是.视音频..</div> <div role="tabpanel" class="tab-pane"
id="tab5">这是..图像.</div> <div role="tabpanel" class="tab-pane"
id="tab6">这是..事件.</div> <div role="tabpanel" class="tab-pane"
id="tab7">这是..存储.</div> </div> </div>
效果如下:

将上面的二者对调可以实现右侧竖式选项卡:
<div style="height: 100px;"> <div class="tab-content vertical-tab-content
col-xs-10"> <div role="tabpanel" class="tab-pane active"
id="tab1">这是.本地..</div> <div role="tabpanel" class="tab-pane"
id="tab2">这是.系统..</div> <div role="tabpanel" class="tab-pane"
id="tab3">这是..网络.</div> <div role="tabpanel" class="tab-pane"
id="tab4">这是.视音频..</div> <div role="tabpanel" class="tab-pane"
id="tab5">这是..图像.</div> <div role="tabpanel" class="tab-pane"
id="tab6">这是..事件.</div> <div role="tabpanel" class="tab-pane"
id="tab7">这是..存储.</div> </div> <div class="col-xs-2"> <ul class="nav nav-tab
vertical-tab" role="tablist" id="vtab"> <li role="presentation" class="active">
<a href="#tab1" aria-controls="home" role="tab" data-toggle="tab">本地</a> </li>
<li role="presentation"> <a href="#tab2" aria-controls="inbox" role="tab"
data-toggle="tab">系统</a> </li> <li role="presentation"> <a href="#tab3"
aria-controls="outbox" role="tab" data-toggle="tab">网络</a> </li> <li
role="presentation"> <a href="#tab4" aria-controls="inbox1" role="tab"
data-toggle="tab">视音频</a> </li> <li role="presentation"> <a href="#tab5"
aria-controls="outbox1" role="tab" data-toggle="tab">图像</a> </li> <li
role="presentation"> <a href="#tab6" aria-controls="outbox1" role="tab"
data-toggle="tab">事件</a> </li> <li role="presentation"> <a href="#tab7"
aria-controls="outbox1" role="tab" data-toggle="tab">存储</a> </li> </ul> </div>
</div>

友情链接
ioDraw流程图
API参考文档
OK工具箱
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:637538335
关注微信