当前位置:主页 > 网页特效 > TAB标签 >

简单实用的Bootstrap选项卡效果

发布时间:2018/07/10 来源:互联网 浏览: 关键词:选项卡 bootstrap tab 
简单实用的Bootstrap选项卡效果 简单实用的Bootstrap选项卡效果
阿里云

简要教程

这是一款基于Bootstrap的简单实用的选项卡效果。该选项卡在原生boostrap选项卡的基础上进行了一些美化,效果时尚大方,非常不错。

使用方法

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

<scriptsrc="path/to/jquery.min.js"></script>
<linkhref="path/to/bootstrap.min.css"rel="stylesheet">
<scriptsrc="path/to/bootstrap.min.js"></script>

HTML结构

该bootstrap选项卡的HTML结构如下:

<divclass="container">
    <divclass="row">
        <divclass="col-lg-offset-3 col-lg-6">
            <divclass="tab"role="tabpanel">
                <!-- Nav tabs -->
                <ulclass="nav nav-tabs"role="tablist">
                    <lirole="presentation"class="active"><ahref="#Section1"aria-controls="home"role="tab"data-toggle="tab">Section 1</a></li>
                    <lirole="presentation"><ahref="#Section2"aria-controls="profile"role="tab"data-toggle="tab">Section 2</a></li>
                    <lirole="presentation"><ahref="#Section3"aria-controls="messages"role="tab"data-toggle="tab">Section 3</a></li>
                    <lirole="presentation"><ahref="#Section4"aria-controls="messages"role="tab"data-toggle="tab">Section 4</a></li>
                </ul>
                <!-- Tab panes -->
                <divclass="tab-content tabs">
                    <divrole="tabpanel"class="tab-pane fade in active"id="Section1">
                        <h3>Section 1</h3>
                        <p>......</p>
                    </div>
                    <divrole="tabpanel"class="tab-pane fade"id="Section2">
                        <h3>Section 2</h3>
                        <p>......</p>
                    </div>
                    <divrole="tabpanel"class="tab-pane fade"id="Section3">
                        <h3>Section 3</h3>
                        <p>......</p>
                    </div>
                    <divrole="tabpanel"class="tab-pane fade"id="Section4">
                        <h3>Section 4</h3>
                        <p>......</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>   

CSS样式

为该选项卡添加下面的CSS样式。

a:hover,a:focus{
    outline:none;
    text-decoration:none;
}
.tab .nav-tabs{
    border:1pxsolid#1fc1dd;
}
.tab .nav-tabs li{
    margin:0;
}
.tab .nav-tabs li a{
    font-size:14px;
    color:#999898;
    background:#fff;
    margin:0;
    padding:20px25px;
    border-radius:0;
    border:none;
    border-right:1pxsolid#ddd;
    text-transform:uppercase;
    position:relative;
}
.tab .nav-tabs li a:hover{
    border-top:none;
    border-bottom:none;
    border-right-color:#ddd;
}
.tab .nav-tabs li.active a,
.tab .nav-tabs li.active a:hover{
    color:#fff;
    border:none;
    background:#1fc1dd;
    border-right:1pxsolid#ddd;
}
.tab .nav-tabs li.active a:before{
    content:"";
    width:58%;
    height:4px;
    background:#fff;
    position:absolute;
    top:0;
    left:0;
    right:0;
    margin:0auto;
}
.tab .nav-tabs li.active a:after{
    content:"";
    border-top:10pxsolid#1fc1dd;
    border-left:10pxsolidtransparent;
    border-right:10pxsolidtransparent;
    position:absolute;
    bottom:-10px;
    left:43%;
}
.tab .tab-content{
    font-size:13px;
    color:#999898;
    line-height:25px;
    background:#fff;
    padding:20px;
    border:1pxsolid#1fc1dd;
    border-top:none;
}
.tab .tab-content h3{
    font-size:24px;
    color:#999898;
    margin-top:0;
}
@media onlyscreenand (max-width:480px){
    .tab .nav-tabs li{
        width:100%;
        text-align:center;
    }
    .tab .nav-tabs li.active a,
    .tab .nav-tabs li.active a:after,
    .tab .nav-tabs li.active a:hover{
        border:none;
    }
}          

共有人阅读,期待你的评论!评论
骚年说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!
Top