3种基于Bootstrap的超酷Tabs选项卡UI设计

当前位置:主页 > jQuery库 > 选项卡 > 3种基于Bootstrap的超酷Tabs选项卡UI设计
3种基于Bootstrap的超酷Tabs选项卡UI设计
分享:

    插件介绍

    这是3种基于Bootstrap的超酷tabs选项卡UI设计效果。这3款选项卡都是使用原生的Bootstrap网格系统和Tabs组件来制作,通过自定义CSS样式来生成不同的选项卡效果。

    浏览器兼容性

    浏览器兼容性
    时间:2016-05-27
    阅读:
麦子学院
简要教程

这是3种基于Bootstrap的超酷tabs选项卡UI设计效果。这3款选项卡都是使用原生的Bootstrap网格系统和Tabs组件来制作,通过自定义CSS样式来生成不同的选项卡效果。

使用方法

HTML结构

下面是每一种选项卡的HTML结构和它们对应的效果演示图。

选项卡1:

tabs选项卡效果-1

<div class="container">
    <div class="row text-center">
        <h1 class="white">Tab选项卡-1</h1>
    </div>
    <div class="row">
        <div class="col-md-offset-2 col-md-8 mt30">
            <div class="tab" role="tabpanel">
                <!-- 选项卡的分页导航 -->
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active"><a href="#Section1" aria-controls="home" role="tab" data-toggle="tab">Section 1</a></li>
                    <li role="presentation"><a href="#Section2" aria-controls="profile" role="tab" data-toggle="tab">Section 2</a></li>
                    <li role="presentation"><a href="#Section3" aria-controls="messages" role="tab" data-toggle="tab">Section 3</a></li>
                    <li role="presentation"><a href="#Section4" aria-controls="settings" role="tab" data-toggle="tab">Section 4</a></li>
                </ul>
                <!-- 选项卡Tab内容 -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="Section1">
                        <h3>Section 1</h3>
                        <p>
                            ......
                        </p>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="Section2">
                        <h3>Section 2</h3>
                        <p>
                            ......
                        </p>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="Section3">
                        <h3>Section 3</h3>
                        <p>
                            ......
                        </p>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="Section4">
                        <h3>Section 4</h3>
                        <p>
                            .......
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
                

选项卡2:

tabs选项卡效果-2

<div class="container">
    <div class="row text-center">
        <h1 class="white">Tab选项卡-2</h1>
    </div>

    <div class="row">
        <div class="col-md-offset-3 col-md-6">
            <div class="tab" role="tabpanel">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active">
                    <a href="#Section1" aria-controls="home" role="tab" data-toggle="tab"><i class="fa fa-envelope-o"></i>Section 1</a>
                    </li>
                    <li role="presentation">
                    <a href="#Section2" aria-controls="profile" role="tab" data-toggle="tab"><i class="fa fa-cubes"></i>Section 2</a>
                    </li>
                    <li role="presentation">
                    <a href="#Section3" aria-controls="messages" role="tab" data-toggle="tab"><i class="fa fa-comments"></i>Section 3</a>
                    </li>
                </ul>
                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane fade in active" id="Section1">
                        <p>......</p>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="Section2">
                        <p>......</p>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="Section3">
                        <p>...... </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>                  
                

选项卡3:

tabs选项卡效果-3

<div class="container">
    <div class="row text-center">
        <h1 class="white">Tab选项卡-3</h1>
    </div>

    <div class="row">
        <div class="col-md-offset-2 col-md-8">
            <div class="tab" role="tabpanel">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active">
                    <a href="#Section1" aria-controls="home" role="tab" data-toggle="tab"><i class="fa fa-envelope-o"></i>Section 1</a>
                    </li>
                    <li role="presentation">
                    <a href="#Section2" aria-controls="profile" role="tab" data-toggle="tab"><i class="fa fa-cube"></i>Section 2</a>
                    </li>
                    <li role="presentation">
                    <a href="#Section3" aria-controls="settings" role="tab" data-toggle="tab"><i class="fa fa-comment"></i>Section 3</a>
                    </li>
                </ul>
                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane fade in active" id="Section1">
                        <h3>Section 1</h3>
                        <p>
                           ......
                        </p>
                    </div>

                    <div role="tabpanel" class="tab-pane fade" id="Section2">
                        <h3>Section 2</h3>
                        <p>
                            ......
                        </p>
                    </div>

                    <div role="tabpanel" class="tab-pane fade" id="Section3">
                        <h3>Section 3</h3>
                        <p>
                            ......
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>                 
                

各种选项卡的CSS样式请参考下载文件。

网友评论