简单 Bootstrap Tabs选项卡

PetitQ Tab选项卡 2018-10-25 1.55K 0 0

这是一款非常简单的 Bootstrap Tabs 选项卡美化特效。该特效在原生 Bootstrap Tabs 选项卡的基础上，通过 css3 来对它进行了一些美化效果。

使用方法：

在页面中引入 jquery 和 bootstrap 相关文件。

也想出现在这里？联系我们吧

<link href="path/to/css/bootstrap.min.css" rel="stylesheet">

<script src="path/to/js/jquery.min.js"></script>

<script src="path/to/js/bootstrap.min.js"></script>

HTML 结构：

该 Bootstrap Tabs 选项卡使用下面的 HTML 结构：

```
<div class="container">
```
```
    <div class="row">
```

        <div class="col-md-offset-3 col-md-6">

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

```
                </ul>
```
```
                
```

                <div class="tab-content tabs">

                    <div role="tabpanel" class="tab-pane fade in active" id="Section1">

                        <h3>选项卡 1</h3>

```
                        <p>....</p>
```
```
                    </div>
```

                    <div role="tabpanel" class="tab-pane fade" id="Section2">

                        <h3>选项卡 2</h3>

```
                        <p>...</p>
```
```
                    </div>
```

                    <div role="tabpanel" class="tab-pane fade" id="Section3">

                        <h3>选项卡 3</h3>

```
                        <p>....</p>
```
```
                    </div>
```
```
                </div>
```
```
            </div>
```
```
        </div>
```
```
    </div>
```
```
</div>
```

CSS 样式：

通过下面的 CSS 代码来对选项卡进行美化。

```
a:hover,a:focus{
```
```
    outline: none;
```
```
    text-decoration: none;
```
```
}
```
```
.tab .nav-tabs{
```
```
    position: relative;
```
```
    border-bottom: none;
```
```
}
```
```
.tab .nav-tabs li{
```
```
    text-align: center;
```
```
    margin-right: 10px;
```
```
}
```
```
.tab .nav-tabs li a{
```
```
    display: block;
```
```
    font-size: 16px;
```
```
    font-weight: 600;
```
```
    color: #444;
```
```
    padding: 10px 15px;
```
```
    background: transparent;
```
```
    margin-right: 0;
```
```
    border: none;
```
```
    border-radius: 0;
```
```
    overflow: hidden;
```
```
    position: relative;
```
```
    z-index: 1;
```
```
    transition: all 0.5s ease 0s;
```
```
}
```
```
.tab .nav-tabs li a:before{
```
```
    content: "";
```
```
    width: 100%;
```
```
    height: 3px;
```
```
    background: #de7921;
```
```
    position: absolute;
```
```
    top: 92%;
```
```
    left: 0;
```
```
    transition: all 0.3s ease 0s;
```
```
}
```
```
.tab .nav-tabs li a:hover:before,
```
```
.tab .nav-tabs li.active a:before,
```

.tab .nav-tabs li.active a:hover:before{

```
    top: 0;
```
```
}
```
```
.tab .nav-tabs li a:after{
```
```
    content: "";
```
```
    width: 100%;
```
```
    height: 100%;
```
```
    background: #fff;
```
```
    position: absolute;
```
```
    top: 100%;
```
```
    left: 0;
```
```
    z-index: -1;
```
```
    transition: all 0.3s ease 0s;
```
```
}
```
```
.tab .nav-tabs li a:hover:after,
```
```
.tab .nav-tabs li.active a:after,
```
```
.tab .nav-tabs li.active a:hover:after{
```
```
    top: 0;
```
```
}
```
```
.nav-tabs li.active a,
```
```
.nav-tabs li.active a:focus,
```
```
.nav-tabs li.active a:hover,
```
```
.nav-tabs li a:hover{
```
```
    border: none;
```
```
}
```
```
.tab .tab-content{
```
```
    padding: 30px 15px 20px;
```
```
    background: #fff;
```
```
    font-size: 14px;
```
```
    color: #555;
```
```
    line-height: 26px;
```
```
}
```
```
.tab .tab-content h3{
```
```
    font-size: 24px;
```
```
    margin-top: 0;
```
```
}
```

@media only screen and (max-width: 479px){

```
    .tab .nav-tabs li{ width: 100%; }
```
```
}
```

简单 Bootstrap Tabs 选项卡

已有 387 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

Tab选项卡

简单 Bootstrap Tabs选项卡

使用方法：

HTML 结构：

CSS 样式：

简单 Bootstrap Tabs 选项卡

相关文章

Tab选项卡鼠标悬停黑白变彩色jQuery效果

简单 Bootstrap Tabs选项卡

CSS3半透明垂直Accordion手风琴选项卡特效

发表回复取消回复

热销模板

Tab选项卡

使用方法：

HTML 结构：

CSS 样式：

简单 Bootstrap Tabs 选项卡

相关文章

发表回复 取消回复

热销模板

发表回复取消回复