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

代码语言:html

所属分类:选项卡

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

代码标签: 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-ta.........完整代码请登录后点击上方下载按钮下载查看

网友评论0