bootstrap的垂直tab——一个菜鸡的学习过程
2017-04-13 18:31
281 查看
官网没找到
这个
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- 响应式布局 -->
<!--<meta name="viewport" content="width=device-width, initial-scale=1.0">-->
<title>视频管理</title>
<!--bootstrap-->
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<script type="text/javascript" src="bootstrap/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<!--必须在bootstrap后导入-->
<script type="text/javascript" src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.min.js"></script>
<!--jquery滑块ui-->
<link href="jquery-ui/jquery-ui.css" rel="stylesheet">
<script src="jquery-ui/jquery-ui.js"></script>
<link rel="stylesheet" href="css/profileCss.css">
<link rel="stylesheet" type="text/css" href="font/iconfont.css">
<script src="js/allJs.js"></script>
<style>
</style>
<script type="text/javascript">
$(function(){
// $("#configurationTab").children("li").children("a").css("border","1px 1px 1px 1px");
// $("#configurationTab").children("li").css("margin","0 0 0 -1px")
});
</script>
</head>
<body>
<div style="height: 100px;">
<div class="tab-content vertical-tab-content col-xs-10">
<div role="tabpanel" class="tab-pane active" id="tab1">.本地..</div>
<div role="tabpanel" class="tab-pane" id="tab2">.系统..</div>
<div role="tabpanel" class="tab-pane" id="tab3">..网络.</div>
<div role="tabpanel" class="tab-pane" id="tab4">.视音频..</div>
<div role="tabpanel" class="tab-pane" id="tab5">..图像.</div>
<div role="tabpanel" class="tab-pane" id="tab6">..事件.</div>
<div role="tabpanel" class="tab-pane" id="tab7">..存储.</div>
</div>
<div class="col-xs-2">
<ul class="nav nav-tab vertical-tab" role="tablist" id="vtab">
<li role="presentation" class="active">
<a href="#tab1" aria-controls="home" role="tab"
data-toggle="tab">本地</a>
</li>
<li role="presentation">
<a href="#tab2" aria-controls="inbox" role="tab"
data-toggle="tab">系统</a>
</li>
<li role="presentation">
<a href="#tab3" aria-controls="outbox" role="tab"
data-toggle="tab">网络</a>
</li>
<li role="presentation">
<a href="#tab4" aria-controls="inbox1" role="tab"
data-toggle="tab">视音频</a>
</li>
<li role="presentation">
<a href="#tab5" aria-controls="outbox1" role="tab"
data-toggle="tab">图像</a>
</li>
<li role="presentation">
<a href="#tab6" aria-controls="outbox1" role="tab"
data-toggle="tab">事件</a>
</li>
<li role="presentation">
<a href="#tab7" aria-controls="outbox1" role="tab"
data-toggle="tab">存储</a>
</li>
</ul>
</div>
</div>
</body>
</html>
这个
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- 响应式布局 -->
<!--<meta name="viewport" content="width=device-width, initial-scale=1.0">-->
<title>视频管理</title>
<!--bootstrap-->
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<script type="text/javascript" src="bootstrap/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<!--必须在bootstrap后导入-->
<script type="text/javascript" src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.min.js"></script>
<!--jquery滑块ui-->
<link href="jquery-ui/jquery-ui.css" rel="stylesheet">
<script src="jquery-ui/jquery-ui.js"></script>
<link rel="stylesheet" href="css/profileCss.css">
<link rel="stylesheet" type="text/css" href="font/iconfont.css">
<script src="js/allJs.js"></script>
<style>
</style>
<script type="text/javascript">
$(function(){
// $("#configurationTab").children("li").children("a").css("border","1px 1px 1px 1px");
// $("#configurationTab").children("li").css("margin","0 0 0 -1px")
});
</script>
</head>
<body>
<div style="height: 100px;">
<div class="tab-content vertical-tab-content col-xs-10">
<div role="tabpanel" class="tab-pane active" id="tab1">.本地..</div>
<div role="tabpanel" class="tab-pane" id="tab2">.系统..</div>
<div role="tabpanel" class="tab-pane" id="tab3">..网络.</div>
<div role="tabpanel" class="tab-pane" id="tab4">.视音频..</div>
<div role="tabpanel" class="tab-pane" id="tab5">..图像.</div>
<div role="tabpanel" class="tab-pane" id="tab6">..事件.</div>
<div role="tabpanel" class="tab-pane" id="tab7">..存储.</div>
</div>
<div class="col-xs-2">
<ul class="nav nav-tab vertical-tab" role="tablist" id="vtab">
<li role="presentation" class="active">
<a href="#tab1" aria-controls="home" role="tab"
data-toggle="tab">本地</a>
</li>
<li role="presentation">
<a href="#tab2" aria-controls="inbox" role="tab"
data-toggle="tab">系统</a>
</li>
<li role="presentation">
<a href="#tab3" aria-controls="outbox" role="tab"
data-toggle="tab">网络</a>
</li>
<li role="presentation">
<a href="#tab4" aria-controls="inbox1" role="tab"
data-toggle="tab">视音频</a>
</li>
<li role="presentation">
<a href="#tab5" aria-controls="outbox1" role="tab"
data-toggle="tab">图像</a>
</li>
<li role="presentation">
<a href="#tab6" aria-controls="outbox1" role="tab"
data-toggle="tab">事件</a>
</li>
<li role="presentation">
<a href="#tab7" aria-controls="outbox1" role="tab"
data-toggle="tab">存储</a>
</li>
</ul>
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- java word相关——一个菜鸡的学习过程
- Jquery的左滑动消失或出现——一个菜鸡的学习过程
- VM 安装OSX——一个菜鸡的学习过程
- 一个学生如何选择嵌入式培训和学习及就业过程
- 一个简单的jQuery插件制作，学习过程及实例
- 用c/c++语言写的一个小的“爬虫”程序学习过程总结
- 一个分页存储过程的学习
- 学习的一个过程
- 学习是一个循序渐进的过程.
- 在D3D中绘制一个三角形的一个完整过程(学习3D游戏笔记一)
- GeoServer学习手记（十）：一个完整的WMS请求响应过程
- Yes!~ 我又写了一次树的建立及中序递归遍历。学习是一个不断重复的过程。温故而知新呀！～还是我自己调试出来的，找出错误的感觉真好！～
- 学习Spring过程中发现的一个怪问题
- 一个学习PHP的笔记（编程过程都如此）
- 学习的一个过程
- GeoServer学习手记（十）：一个完整的WMS请求响应过程
- 学习是一个不段坚持和积累的过程
- 学习Struts过程中，写的一个注册表单!
- 学习，是一个探索的过程~~~
- 学习是怎么一个过程