一、前言1、作为一个专注后台方向上的学习者，肯定不只是简单地处理业务逻辑而已2、自己独立完成一个...
一、前言
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网站。
版权声明
本文仅代表作者观点，不代表百度立场。
本文系作者授权百度百家发表，未经许可，不得转载。
上一篇：单例模式的一种实现 下一篇：Win下使用Java操作远程分布式集群中的HBase
