本博文是将 bootstrap的UI设计包引入项目后自己做的DIY设计,包含基本的增删改查界面,以及布局和其他控件组
1.开始设计前需要下载bootstrap3.0 的包
2.加入到项目中
3. 在html文件中引用(如下):
<link href="../UI/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<script src="../UI/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
4.开始设计界面(源码)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="../UI/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="../UI/bootstrap/css/font-awesome.min93e3.css" rel="stylesheet">
<script src="../UI/jquery/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="../UI/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../UI/layer/layer.js"></script>
<script src="../UI/layer/extend/layer.ext.js"></script>
<script src="../UI/js/common.js"></script>
<script src="../UI/js/validate.js"></script>
<link href="../UI/bootstrap/css/select2.min.css" type="text/css" rel="stylesheet" />
<script src="../UI/bootstrap/js/select2.min.js" type="text/javascript"></script>
<link href="../UI/bootstrap/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" >
<script type="text/javascript" src="../UI/bootstrap/js/bootstrap-datetimepicker.min.js" ></script>
<script type="text/javascript" src="../UI/bootstrap/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<title>基本页面</title>
</head>
<body>
<script type="text/javascript">
//页面加载时查询该用户的全部应用列表
$(document).ready(function() {
createPagination(1,20,150);
});
$(window).load(function() {
//select2 控件渲染
$("#devLanguageQuery").select2({
tags : true
});
$("#sysLevelQuery").select2({
minimumResultsForSearch: Infinity
});
$("#devLanguage").select2({
minimumResultsForSearch: Infinity
});
$("#orgName").select2({
minimumResultsForSearch: Infinity
});
$("#sysLevel").select2({
minimumResultsForSearch: Infinity
});
$('.form_date').datetimepicker({
language : 'zh-CN',
weekStart : 1,
todayBtn : 1,
autoclose : 1,
todayHighlight : 1,
startView : 2,
minView : 2,
forceParse : 0
});
$('.to_date').datetimepicker({
language : 'zh-CN',
weekStart : 1,
todayBtn : 1,
autoclose : 1,
todayHighlight : 1,
startView : 2,
minView : 2,
forceParse : 0
});
});
$(function() {
//应用注册
$("#addBtn").click(function() {
//首先把校验时的红色边框去掉
$("#appName").css({
"border-color" : ""
});
$("#appCode").css({
"border-color" : ""
});
$("#sysField").css({
"border-color" : ""
});
$("#appName").val("");
$("#sysField").val("");
$("#appCode").val("");
$("#addModal").modal("show");
});
//导出数据
$("#exportBtn").click(function() {
var _index = layer.load(2, {
time : 2000
});
});
});
function deleteAppS() {
layer.confirm('确定删除?', function() {
layer.msg('删除成功', {
icon : 1,
time : 2200