Bootstrap页面布局17 - BS选项卡

2021-10-13 01:04:13

代码结构：

<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='#'>选项一</a></li>

        <li><a href='#'>选项二</a></li>

        <li><a href='#'>选项三</a></li>

        <li><a href='#'>选项四</a></li>

        <li><a href='#'>选项五</a></li>

    </ul>

</div>

图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='#tab1' data-toggle='tab'>选项一</a></li>

        <li><a href='#tab2' data-toggle='tab'>选项二</a></li>

        <li><a href='#tab3' data-toggle='tab'>选项三</a></li>

        <li><a href='#tab4' data-toggle='tab'>选项四</a></li>

        <li><a href='#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='#tab1' data-toggle='tab'>选项一</a></li>

            <li><a href='#tab2' data-toggle='tab'>选项二</a></li>

            <li><a href='#tab3' data-toggle='tab'>选项三</a></li>

            <li><a href='#tab4' data-toggle='tab'>选项四</a></li>

            <li><a href='#tab5' data-toggle='tab'>选项五</a></li>

        </ul>

        <!--

            选项卡的内容定义

        -->

        <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>