bootstrap开发运营管理后台之一：布局
2017-07-11 本文已影响429人
ccup区块链
bootstrap开发运营管理后台之一：布局
公司需要用bootstrap实现一个简易的运营管理后台，初次接触前端开发，对于bootstrap第一次使用，着实不知道从何入手，一点点经验记录下来。
这里实现的是一个中规中矩的上，左，中间的布局。跟之前使用easy UI时的尽量保持一致
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>管理后台</title>
<!-- Bootstrap jquery必须在bootstrap.min.js之前引入 -->
<link href="../../resources/css/bootstrap.min.css" rel="stylesheet">
<script src="resources/js/jquery-3.2.1.js"></script>
<script src="../../resources/js/bootstrap.min.js"></script>
<!--布局的整体样式-->
<style type="text/css">
@media (min-width: 768px) {
#slider_sub{
width:250px;
margin-top: 51px;
position: absolute;
z-index: 1;
height: 600px;
background-color:#9acfea;
}
.page_main{
margin-left: 250px;;
}
}
</style>
</head>
<body>
<!--导航 最上层的横幅位置-->
<nav class="navbar navbar-default navbar-static-top" style="background-color: #9acfea">
<div class="navbar-header" id="head_nav">
<a href="#" class="navbar-brand">管理后台</a>
</div>
<!--侧边功能栏,左面竖着的菜单栏，href里面填入跳转的页面地址即可-->
<div class="navbar-default navbar-collapse" id="slider_sub">
<ul class="nav">
<li role="presentation" class="active"><a href="/&***"><span class="glyphicon glyphicon-eye-open"></span> 员工管理</a></li>
<li role="presentation"><a href="/***"><span class="glyphicon glyphicon-user"></span> 部门管理</a></li>
<li role="presentation"><a id="userHtmlButton" href="/**"><span class="glyphicon glyphicon-user"></span> 权限管理</a></li>
<li role="presentation"><a href="/****"><span class="glyphicon glyphicon-bullhorn"></span> 课程管理管理</a></li>
</ul>
</div>
</nav>
<!--核心区-->
<div class="page_main" >
<!--面包导航 按钮功能区域-->
<ol class="breadcrumb">
<li><a href="#">编辑</a></li>
<li><a href="#">删除</a></li>
<li class="active">新增</li>
</ol>
<!--中心区域，此处时插入了一张欢迎图片，以后的table表格等在此处插入即可-->
<div align="center" style="margin-top: 100px">
<h1 class="h1">欢迎登陆我的管理后台</h1>
</div>
</div>
</div>
</body>
</html>
