调整项目目录结构：在项目statics目录下，创建JS、CSS、Plugins文件，分别用于存放js、css和第三方插件。
Bootstrap：提供现成的样式+效果
1、下载Bootstrap
在boostrap官网下载用于生产版本的bootstrap，放在plugins文件夹。
2、Html中引入Bootstrap的css
<head>
...
<link rel="stylesheet" href="/static/plugins/bootstrap/css/bootstrap.css">
// 开发时使用bootstrap.css。
// 发布时用bootstrap.min.css。Min.css内容中去掉了换行，文件大小小一些。
</head>
<body>
...
</body>
3、应用
Bootstrap官网css页中，找到所需样式，然后在html中使用对应class名称：
<table class="table table-bordered">
...
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
...
在bootstrap官网的组件页，找到要使用的组件样式，在html中对元素使用对应class名。
bootstrap上组件样式有限，这时可以使用fontawesome。
FontAwesome：提供图标
1、下载FontAwesome
到FontAwesome官网下载：font-awesome 放到Plugins文件夹
2、在html中引入fontawesome
<head>
...
<link rel="stylesheet" href="/static/plugins/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="/static/plugins/font-awesome/css/fontawesome.css">
</head>
<body>
...
</body>
3、应用
找到合适的组件样式，将其class名应用到html元素中：
<a class="fa fa-pencil-square-o">编辑</a>
...
模态框
1、引入Bootstrap的JS：
...
<script src="/static/plugins/bootstrap/js/bootstrap.js"></script>
</body>
...
2、编辑模态框代码
在Bootstrap官网的js页中找到需要的模态框，复制代码到项目代码中，并引入jquery。这时，点击复制的代码中对应的按钮，弹出模态框。然后根据需求修改模态框。
3、给模态框的元素绑定事件
...
<script src="/static/js/jquery-3.1.1.js"></script>
<script src="/static/plugins/bootstrap/js/bootstrap.js"></script>
<script>
$(function(){
bindEvent();
bindSave();
});
function bindEvent(){
$("#aBtn").click(function(){ # 给页面中id='aBtn'的元素绑定点击事件
$("#aModal").modal("show"); # 找到id='aModal'的模态框，将它显示
})
}
function bindSave(){
var postData = {};
$("#saveBtn").click(function(){ # 给模态框中id='saveBtn'的元素绑定点击事件
$("#aModal").find("input,select").each(function(){ # 在id='aModal'的模态框中找出input和select元素，并遍历
console.log($(this)[0]);
var v = $(this).val();
var n = $(this).attr('name');
if(n=="gender"){ # 如果name='gender',那么它是select元素
if($(this).prop("checked")){ # 检测这个select元素是否被选中
postData[n]=v;
}
}else{
postData[n]=v;
}
...
# ajax将postData向后端发送请求
});
});
</script>
</body>
...
撤去模态框
$('#aModal').modal('hide') # 将模态框撤去
新页面还是模态框？
使用新页面的情况：
● 独立的页面
● 数据量大或条目多
使用对话框的情况：
● 数据量少或条目少
另：
(1) 增加、编辑
① Ajax：考虑，当前页；td中自定义属性
② 页面刷新
(2) 删除
对话框方式