前端使用 BootStrap 写一些后台常用的界面
一、前言
1、作为一个专注后台方向上的学习者，肯定不只是简单地处理业务逻辑而已
2、自己独立完成一个作品，一般都要涉及到几个界面的编写：
①登录界面
②CRUD界面
③主页
④…
3、UI方面的简单的框架有很多，使用的过程也是深有感触：
①之前先是使用 EasyUI ，后来逐渐觉得其写出来的界面如明日黄花，简陋不已，写出来的界面都不好意思说是自己写的。
②于是接着选择了最新最热门的基于 Vue2.0 的 ElementUI，为此还特地深入学习了 Vue，后来觉得有点笨重，并且其是侧重于前端工程化的，最好每次都使用 webpack 去开启，作为一个后台的，写好 CRUD、Controller 就已经花费了不少时间了，还把简单的界面处理得那么复杂，总共花费的时间太多成本太高了。
③最后还是回到了 BootStrap，其实很早就接触它了，不过觉得这是新手的玩意，不愿意使用，但是后来觉得开发成本真的极低，且界面淳朴无邪~
④当然中间还有使用了很多 UI 框架，如国内的贤心返璞归真的 LayUI，梁先生的基于 vue 的 iView ；特效框架如基于 CSS3 的 Animate 等等，感觉还行。
二、代码与效果
后面有心情的话，再把其他的界面补上
1、登录界面
① 代码
<html>
<head>
<meta charset="utf-8" />
<title>larger5title>
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、前端主页
<html lang="zh">
<head>
<meta charset="UTF-8">meta>
<title>larger5title>
<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="#">larger5a>
<div class="nav-collapse collapse">
<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 界面
<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>
<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="#">当前用户：xxa>
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 官网