bootstrap ui设计

本文介绍了如何将Bootstrap UI设计包整合到项目中,通过HTML、CSS和JavaScript实现基本的增删改查界面。内容包括引入Bootstrap资源,设置样式,以及实现日期选择、分页、查询条件等交互功能。此外,还涉及了select2插件的使用和应用操作的模拟功能。
摘要由CSDN通过智能技术生成

  本博文是将 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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值