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">
<style type="text/css">
	.demo{ background: #d57d7d;padding: 1.5em 0; }
	a:hover,a:focus{
		outline: none;
		text-decoration: none;
	}
	.tab .nav-tabs{
		position: relative;
		border-bottom: 0 none;
	}
	.tab .nav-tabs li{
		text-align: center;
	}
	.tab .nav-tabs li a{
		display: block;
		height: 70px;
		line-height: 65px;
		background: linear-gradient(165deg, transparent 29%, #908a78 30%);
		font-size: 15px;
		font-weight: 600;
		color: #fff;
		text-transform: uppercase;
		margin-right: 0;
		border-radius: 0;
		border: none;
		position: relative;
		transition: all 0.5s ease 0s;
	}
	.tab .nav-tabs li.active a,
	.tab .nav-tabs li a:hover{
		background: linear-gradient(165deg, transparent 29%, #efe8d5 30%);
		border: none;
		color: #908a78;
	}
	.tab .nav-tabs li a:before{
		content: "";
		height: 70px;
		line-height: 90px;
		border-bottom: 70px solid rgba(0, 0, 0, 0.1);
		border-right: 10px solid transparent;
		position: absolute;
		top: 0;
		left: 100%;
		z-index: 1;
	}
	.tab .nav-tabs li:last-child a:before{
		border: none;
	}
	.tab .tab-content{
		font-size: 14px;
		color: #6f6c6c;
		line-height: 26px;
		background: #efe8d5;
		padding: 20px;
	}
	.tab .tab-content h3{
		font-size: 24px;
		color: #6f6c6c;
		margin-top: 0;
	}
	.tab .tab-content p{
		margin-bottom: 0;
	}
	@media only screen and (max-width: 480px){
		.tab .nav-tabs li{
			width: 100%;
			margin-bottom: 8px;
		}
		.tab .nav-tabs li:last-child{
			margin-bottom: 0;
		}
		.tab .nav-tabs li a:before{
			border: none;
		}
	}
</style>

</head>
<body>

<div class="demo">
	<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">Section 1</a></li>
						<li role="presentation".........完整代码请登录后点击上方下载按钮下载查看