bootstrap实现自适应响应式tab选项卡切换效果代码-html代码-BFW代码库

bootstrap实现自适应响应式tab选项卡切换效果代码

代码语言：html

所属分类：选项卡

代码描述：bootstrap实现自适应响应式tab选项卡切换效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <style type="text/css">
        body {
	background:#ffded7;
	padding:2em 0;
}
a:hover,a:focus {
	outline:none;
	text-decoration:none;
}
.tab .nav-tabs {
	padding-left:15px;
	border-bottom:4px solid #692f6c;
}
.tab .nav-tabs li a {
	color:#fff;
	padding:10px 20px;
	margin-right:10px;
	background:#692f6c;
	text-shadow:1px 1px 2px #000;
	border:none;
	border-radius:0;
	opacity:0.5;
	position:relative;
	transition:all 0.3s ease 0s;
}
.tab .nav-tabs li a:hover {
	background:#692f6c;
	opacity:0.8;
}
.tab .nav-tabs li.active a {
	opacity:1;
}
.tab .nav-tabs li.active a,.tab .nav-tabs li.active a:hover,.tab .nav-tabs li.active a:focus {
	color:#fff;
	background:#692f6c;
	border:none;
	border-radius:0;
}
.tab .nav-tabs li a:before,.tab .nav-tabs li a:after {
	content:"";
	border-top:42px solid transparent;
	position:absolute;
	top:-2px;
}
.tab .nav-tabs li a:before {
	border-right:15px solid #692f6c;
	left:-15px;
}
.tab .nav-tabs li a:after {
	border-left:15px solid #692f6c;
	right:-15px;
}
.tab .nav-tabs li a i,.tab .nav-tabs li.active a i {
	display:inline-block;
	padding-right:5px;
	font-size:15px;
	text-shadow:none;
}
.tab .nav-tabs li a span {
	display:inline-block;
	font-size:14px;
	letter-spacing:-9px;
	opacity:0;
	transition:all 0.3s ease 0s;
}
.tab .nav-tabs li a:hover span,.tab .nav-tabs li.active a span {
	letter-spacing:1px;
	opacity:1;
	transition:all 0.3s ease 0s;
}
.tab .tab-content {
	padding:30px;
	background:#fff;
	font-size:16px;
	color:#6c6c6c;
	line-height:25px;
}
.tab .tab-content h3 {
	font-size:24px;
	margin-top:0;
}
@media only screen and (max-width:479px) {
	.tab .nav-tabs li {
	width:100%;
	margin-bottom:5px;
	text-align:center;
}
.tab .nav-tabs li a span {
	letter-spacing:1px;
	opacity:1;
}
}
    </style>
</head>

<body>
    <div class="container">
        <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-home"></i><span>SECTION-1</span></a></li>
                        <li role="presentation"><a href="#Section2" aria-controls=.........完整代码请登录后点击上方下载按钮下载查看