### **上下结构** ``` <div class="tab-container"> <ul class="nav nav-tabs"> <li class="active"><a data-toggle="tab" data-target="#tab_1" aria-expanded="true">域名管理</a></li> <li class=""><a data-toggle="tab" data-target="#tab_2" aria-expanded="false">伪静态</a></li> </ul> <div class="tab-content form-horizontal"> <div class="tab-pane active" id="tab_1"> 域名管理 </div> <div class="tab-pane" id="tab_2"> 伪静态 </div> </div> </div> ``` ***** ### **左右结构** ``` <style> .vertical-tab { background-color: #f0f0f1; width: 90px; } .vertical-tab .active { background-color: #dedede; } </style> <div class="col-xs-2"> <ul class="nav nav-tab vertical-tab" style=" height: 645px; "> <li class="active"><a data-toggle="tab" data-target="#tab_1">域名管理</a></li> <li class=""><a data-toggle="tab" data-target="#tab_2">伪静态</a></li> </ul> </div> <div class="tab-content vertical-tab-content col-xs-10"> <div class="tab-pane active" id="tab_1"> 域名管理 </div> <div class="tab-pane" id="tab_2"> 伪静态 </div> </div> ```