首页 > 代码库 > Bootstrap页面布局17 - BS选项卡

Bootstrap页面布局17 - BS选项卡

2024-07-15 13:13:05   226人阅读

代码结构：

<div class=‘container-fluid‘>    <h2 class=‘page-header‘>Bootstrap 选项卡</h2>    <!--        选项卡：通过BS的类来控制选项卡的样式
　　　　 ?处可以换成以下几个类
　　　　 .nav-tabs:如图1
　　　　 .nav-pills:如图2
　　　　 .nav-tabs nav-stacked:如图3    -->    <ul class=‘nav ?‘>        <li class=‘active‘><a href=http://www.mamicode.com/‘#‘>选项一>

图1：　　　　　　.nav-tabs

图2：　　　　　　.nav-pills

图3：　　　　　　.nav-tabs nav-stacked

选项卡内容部分的代码：

<div class=‘container-fluid‘>    <h2 class=‘page-header‘>Bootstrap 选项卡</h2>    <!--        选项卡：通过BS的类来控制选项卡的样式    -->    <ul class=‘nav nav-tabs‘>        <li class=‘active‘><a href=http://www.mamicode.com/‘#tab1‘ data-toggle=‘tab‘>选项一</a></li>        <li><a href=http://www.mamicode.com/‘#tab2‘ data-toggle=‘tab‘>选项二</a></li>        <li><a href=http://www.mamicode.com/‘#tab3‘ data-toggle=‘tab‘>选项三</a></li>        <li><a href=http://www.mamicode.com/‘#tab4‘ data-toggle=‘tab‘>选项四</a></li>        <li><a href=http://www.mamicode.com/‘#tab5‘ data-toggle=‘tab‘>选项五</a></li>    </ul>        <!--        选项卡的内容定义    -->    <div class=‘tab-content‘>        <div class=‘tab-pane active‘ id=‘tab1‘><p>我是选项卡一的内容</p></div>        <div class=‘tab-pane‘ id=‘tab2‘><p>我是选项卡二的内容</p></div>        <div class=‘tab-pane‘ id=‘tab3‘><p>我是选项卡三的内容</p></div>        <div class=‘tab-pane‘ id=‘tab4‘><p>我是选项卡四的内容</p></div>        <div class=‘tab-pane‘ id=‘tab5‘><p>我是选项卡五的内容</p></div>    </div>    </div>

如图

 

选项卡居右(居左)：

<div class=‘container-fluid‘>    <h2 class=‘page-header‘>Bootstrap 选项卡</h2>    <div class=‘tabbable tabs-left‘>            <!--            选项卡：通过BS的类来控制选项卡的样式        -->        <ul class=‘nav nav-tabs‘>            <li class=‘active‘><a href=http://www.mamicode.com/‘#tab1‘ data-toggle=‘tab‘>选项一"color: #000000;">            选项卡的内容定义        -->        <div class=‘tab-content‘>            <div class=‘tab-pane active‘ id=‘tab1‘>我是选项卡一的内容</div>            <div class=‘tab-pane‘ id=‘tab2‘>我是选项卡二的内容</div>            <div class=‘tab-pane‘ id=‘tab3‘>我是选项卡三的内容</div>            <div class=‘tab-pane‘ id=‘tab4‘>我是选项卡四的内容</div>            <div class=‘tab-pane‘ id=‘tab5‘>我是选项卡五的内容</div>        </div>     </div>      </div>

选项卡居左：

　　添加一个div且 class=‘tabbable tabs-left‘ ，如图1：

选项卡居右：

　　添加一个div且 class=‘tabbable tabs-right‘，如图2：

选项卡居下：

　　添加一个div且 class=‘tabbable tabs-below‘,且 .tab-content 与 .nav nav-tabs互换位置，如图3：

图1：

图2：

图3：

注意：

　　如果在运用bootstrap2的时候有些地方通过以上代码无法得到对应的效果，那么也许是bs的版本问题，重新下载一个可以解决战斗！


联系
我们