前端使用 BootStrap 写一些后台常用的界面
一、前言
1、作为一个专注后台方向上的学习者，肯定不只是简单地处理业务逻辑而已
2、自己独立完成一个作品，一般都要涉及到几个界面的编写：
①登录界面
②CRUD界面
③主页
④…
3、UI方面的简单的框架有很多，使用的过程也是深有感触：
①之前先是使用 EasyUI ，后来逐渐觉得其写出来的界面如明日黄花，简陋不已，写出来的界面都不好意思说是自己写的。
②于是接着选择了最新最热门的基于 Vue2.0 的 ElementUI，为此还特地深入学习了 Vue，后来觉得有点笨重，并且其是侧重于前端工程化的，最好每次都使用 webpack 去开启，作为一个后台的，写好 CRUD、Controller 就已经花费了不少时间了，还把简单的界面处理得那么复杂，总共花费的时间太多成本太高了。
③最后还是回到了 BootStrap，其实很早就接触它了，不过觉得这是新手的玩意，不愿意使用，但是后来觉得开发成本真的极低，且界面淳朴无邪~
④当然中间还有使用了很多 UI 框架，如国内的贤心返璞归真的 LayUI，梁先生的基于 vue 的 iView ；特效框架如基于 CSS3 的 Animate 等等，感觉还行。
二、代码与效果
后面有心情的话，再把其他的界面补上
1、登录界面
① 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>larger5</title>
</head>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.css" />
<script type="text/javascript" src="bootstrap/js/jQuery.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<body>
<div class="container">
<div class="row">
<div class="">
<img src="images/logo.png" />
<br />
<br />
<div>
<form>
<!--表单控件-->
<input type="text" name="username" id="username" placeholder="用户名" class="form-control " />
<br />
<input type="password" name="password" id="password" placeholder="密码" class="form-control" />
<br />
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1" class="radio-inline"> boss
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2" class="radio-inline" > son
</label>
<br />
<br />
<input type="submit" value="登录" class="btn btn-success" />
</form>
</div>
</div>
</div>
</div>
</body>
</html>② 效果
2、前端主页
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8"></meta>
<title>larger5</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.css" />
<script type="text/javascript" src="bootstrap/js/jQuery.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
</head>
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
.data_list {
border: 1px solid #E5E5E5;
padding: 10px;
background-color: #FDFDFD;
margin-top: 15px;
}
.data_list .data_list_title {
font-size: 15px;
font-weight: bold;
border-bottom: 1px solid #E5E5E5;
padding-bottom: 10px;
padding-top: 5px;
}
.data_list .data_list_title img {
vertical-align: top;
}
</style>
<body>
<!--导航条浮动，固定在上方，不会随着滚动条滑下而消失-->
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<!--标题，字体稍微大点-->
<a class="brand" href="#">larger5</a>
<!--导航条具有响应式功能，主要是在屏幕较小的设备也能用-->
<div class="nav-collapse collapse">
<!--导航标签，H5就有了-->
<ul class="nav">
<li >
<a href="#"><i class="icon-home"></i> 主页</a>
</li>
<li >
<a href="#"><i class="icon-pencil"></i> 写博文</a>
</li>
<li>
<a href="#"><i class="icon-book"></i> 分类管理</a>
</li>
<li >
<a href="#"><i class="icon-user"></i> 个人中心</a>
</li>
</ul>
</div>
<!--导航条内的表单，居右-->
<form name="myForm" class="navbar-form pull-right" method="post" action="">
<input class="span2" id="s_title" name="s_title" type="text" style="margin-top:5px;height:30px;" placeholder="文章标题">
<button type="submit" class="btn" onkeydown="if(event.keyCode==13) myForm.submit()"><i class="icon-search"></i> 搜索</button>
</form>
</div>
</div>
</div>
<div class="container">
<!--流式，按百分比分列-->
<div class="row-fluid">
<div class="span9">
<!--这里的内容经常会变化-->
<div class="data_list">
<div class="data_list_title">
<img src="images/list_icon.png" /> 最新资讯
</div>
</div>
</div>
<div class="span3">
<div class="data_list">
<div class="data_list_title">
<img src="images/user_icon.png" /> 个人中心
</div>
</div>
<div class="data_list">
<div class="data_list_title">
<img src="images/byType_icon.png" /> 按类别
</div>
</div>
<div class="data_list">
<div class="data_list_title">
<img src="images/byDate_icon.png" /> 按日期
</div>
</div>
</div>
</div>
</div>
</body>
</html>
3、后台 CRUD 界面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>后台管理</title>
<link rel="stylesheet" href="bootstrap3/css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="bootstrap3/css/bootstrap.min.css" />
<script type="text/javascript" src="bootstrap3/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="bootstrap3/js/bootstrap.min.js"></script>
</head>
<style type="text/css">
body {
padding: 20px;
}
.headLeft {
float: left;
}
.headRight {
padding-top: 40px;
padding-left: 340px;
}
.search {
margin-bottom: 10px;
}
.search .toolbar {}
</style>
<!--必须使用较新版本的BootStrap才有如下效果-->
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand " href="#">后台管理系统</a>
</div>
<div id="navbar" class="navbar-right">
<a class="navbar-brand" href="#">当前用户：xx</a>
</div>
</div>
</nav>
</div>
</div>
<div class="row" style="padding-top: 45px">
<div class="col-md-3">
<div class="list-group">
<!--激活，作为标题-->
<a href="#" class="list-group-item active ">
系统菜单
</a>
<a href="#" class="list-group-item">管理一</a>
<a href="#" class="list-group-item">管理二</a>
<a href="#" class="list-group-item">管理三</a>
<a href="#" class="list-group-item">管理四</a>
<a href="#" class="list-group-item">退出</a>
</div>
</div>
<div class="col-md-9">
<div>
<ol class="breadcrumb">
<li><span class="glyphicon glyphicon-home"></span>
<a href="#">主页</a>
</li>
<li class="active"></li>
</ol>
</div>
<div align="center" style="padding-top: 50px;">
<h1>后台管理系统</h1>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div align="center" style="padding-top: 200px">
Copyright © 2017-2018 larger5
</div>
</div>
</div>
</div>
</body>
</html>效果：
4、…
（有心情再写~）
三、小结
1、做后台做烦了，可以试着去写点前端的东西，前端专注与视觉的建设，能让你带愉悦的心情重返后台的工作~
2、BootStrap3 官网
本文作者：larger5
本文发布时间：2018年02月27日
本文来自云栖社区合作伙伴
CSDN，了解相关信息可以关注csdn.net网站。
