<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>后台</title>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>



<ul id="myTab" class="nav nav-tabs">

<li class="active"><a href="#home" data-toggle="tab">首页</a></li>

<li class="dropdown">
<a href="#" id="myTabDrop1" class="dropdown-toggle"
data-toggle="dropdown">
内容管理
<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
<li><a href="#column" tabindex="-1" data-toggle="tab">栏目管理</a></li>
<li><a href="#article" tabindex="-1" data-toggle="tab">文章管理</a></li>
</ul>
</li>

<li><a href="#user" data-toggle="tab">用户管理</a></li>

</ul>



<div id="myTabContent" class="tab-content">

<div class="tab-pane fade in active" id="home">


<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="height:400px"></div>
<!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts图表
var myChart = echarts.init(document.getElementById('main'));

var option = {
tooltip: {
show: true
},
legend: {
data:['销量']
},
xAxis : [
{
type : 'category',
data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
"name":"销量",
"type":"bar",
"data":[5, 20, 40, 10, 10, 20]
}
]
};

// 为echarts对象加载数据
myChart.setOption(option);
</script>


</div>



<!-----------------栏目管理------------------------------->
<div class="tab-pane fade" id="column">
<div class="row">
<br>

<div class="col-xs-3" id="myScrollspy">
<ul class="well" data-spy="affix" data-offset-top="125">
<li><a href="#column-1">添加栏目</a></li>
<li><a href="#column-2">删除栏目</a></li>
</ul>
</div>

<div class="col-xs-9">
<h2 id="column-1">添加栏目</h2>
<div style="width:800px;height:auto;margin-left: auto;margin-right: auto;margin-top:10px;margin-bottom:50px;background-color:#B0E0E6;padding:30px;">
<div style="width:600px;height:auto;margin-left: auto;margin-right: auto;margin-top:50px;margin-bottom:50px;background-color:#F5F5DC;padding:30px;font-size:15px;font-family:Microsoft YaHei">
<form>
<input type="text" class="form-control" placeholder="请输入栏目名称"><br>
<input type="submit" value="提交添加" class="btn btn-primary">
</form>
</div>
</div>

<h2 id="column-2">删除栏目</h2>
<div style="width:800px;height:auto;margin-left: auto;margin-right: auto;margin-top:10px;margin-bottom:50px;background-color:#B0E0E6;padding:30px;">
<div style="width:600px;height:auto;margin-left: auto;margin-right: auto;margin-top:50px;margin-bottom:50px;background-color:#F5F5DC;padding:30px;font-size:15px;font-family:Microsoft YaHei">
<form>
<input type="text" class="form-control" placeholder="请输入栏目名称"><br>
<input type="submit" value="提交添加" class="btn btn-primary">
</form>
</div>
</div>
</div>

</div>
</div>






<!-----------------------文章管理--------------------------->
<div class="tab-pane fade" id="article">
<div class="row">
<br>

<div class="col-xs-3" id="myScrollspy">
<ul class="well" data-spy="affix" data-offset-top="125">
<li><a href="#article-1">添加文章</a></li>
<li><a href="#article-2">删除文章</a></li>
</ul>
</div>

<div class="col-xs-9">
<h2 id="article-1">添加文章</h2>
<div style="width:800px;height:auto;margin-left: auto;margin-right: auto;margin-top:10px;margin-bottom:50px;background-color:#B0E0E6;padding:30px;">
<div style="width:600px;height:auto;margin-left: auto;margin-right: auto;margin-top:50px;margin-bottom:50px;background-color:#F5F5DC;padding:30px;font-size:15px;font-family:Microsoft YaHei">
<form>
<input type="text" class="form-control" placeholder="请输入文章名称"><br>
<input type="submit" value="提交添加" class="btn btn-primary">
</form>
</div>
</div>

<h2 id="article-2">删除文章</h2>
<div style="width:800px;height:auto;margin-left: auto;margin-right: auto;margin-top:10px;margin-bottom:50px;background-color:#B0E0E6;padding:30px;">
<div style="width:600px;height:auto;margin-left: auto;margin-right: auto;margin-top:50px;margin-bottom:50px;background-color:#F5F5DC;padding:30px;font-size:15px;font-family:Microsoft YaHei">
<form>
<input type="text" class="form-control" placeholder="请输入栏目名称"><br>
<input type="submit" value="提交添加" class="btn btn-primary">
</form>
</div>
</div>
</div>

</div>
</div>





<!------------------------用户管理----------------------------------->
<div class="tab-pane fade" id="user">
<div class="row">
<br>

<div class="col-xs-3" id="myScrollspy">
<ul class="well" data-spy="affix" data-offset-top="125">
<li><a href="#user-1">添加用户</a></li>
<li><a href="#user-2">删除用户</a></li>
</ul>
</div>

<div class="col-xs-9">
<h2 id="user-1">添加用户</h2>
<div style="width:800px;height:auto;margin-left: auto;margin-right: auto;margin-top:10px;margin-bottom:50px;background-color:#B0E0E6;padding:30px;">
<div style="width:600px;height:auto;margin-left: auto;margin-right: auto;margin-top:50px;margin-bottom:50px;background-color:#F5F5DC;padding:30px;font-size:15px;font-family:Microsoft YaHei">
<form>
<input type="text" class="form-control" placeholder="请输入用户名称"><br>
<input type="submit" value="提交添加" class="btn btn-primary">
</form>
</div>
</div>

<h2 id="user-2">删除用户</h2>
<div style="width:800px;height:auto;margin-left: auto;margin-right: auto;margin-top:10px;margin-bottom:50px;background-color:#B0E0E6;padding:30px;">
<div style="width:600px;height:auto;margin-left: auto;margin-right: auto;margin-top:50px;margin-bottom:50px;background-color:#F5F5DC;padding:30px;font-size:15px;font-family:Microsoft YaHei">
<form>
<input type="text" class="form-control" placeholder="请输入栏目名称"><br>
<input type="submit" value="提交添加" class="btn btn-primary">
</form>
</div>
</div>
</div>

</div>
</div>




</div>
</body>
</html>