bootstrap4实现增删改查（常用样式整理）

bootstrap4实现增删改查

BootStrap4.3.1 + SpringBoot2.1.5

一张图

1 引入JS

设置设备大小viewport

2 基础排版样式

2.1 容器和网格系统

• container container-fluid //容器类前者固定宽度后者100%宽度
文字排版
• display //标题类 1-4
• small //小文本
• //文本底部下面一条虚线边框

2.2 栅格布局系统

栅格嵌套*
响应式布局
显示和隐藏样式

3 导航栏

• navbar、navbar-expand-sm、bg-light、bg-dark
• ul：navbar-nav li：nav-item

	

		

		
			
LOGO
		
	

		
主页
		
基础管理
		
业务管理
		
消息管理
		
系统管理
	

4 下拉菜单

• dropdown //下拉菜单默认
• button设置dropdown-toggle data-toggle=“dropdown” //下拉button
• dropdown-menu //下拉菜单
• a设置样式dropdown-item

	
		admin
		

			
个人中心
			
设置
			
关于
			
退出
		
	
	

5 列表组（含折叠）

• list-group //列表组
• list-group-item //列表li
• list-group-item-action

collapse类用于指定一个折叠元素，点击后控制内容的隐藏与显示，需要在元素上添加 data-toggle=“collapse” 属性。data-target="#id" 属性是对应折叠的内容。

	

		

			
基础管理
				

					

						部门管理 
						0
						
					
					
管理2
					
管理3
					
管理4
				
			
权限管理
				

					
管理1
					
管理2
					
管理3
					
管理4
				
		
	

5.1 bootstrap-treeview

bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件。该jQuery插件基于Twitter Bootstrap，以简单和优雅的方式来显示一些继承树结构，如视图树、列表树等等。

bootstrap-treeview
https://www.cnblogs.com/tangzeqi/p/8021637.html

6 表单样式

• form-group 可用于表单布局，对form中的div添加该样式进行布局，同时配合form的class进行布局。
• input-group 输入框组，是对表单的扩展，可在form的div中方便的组合span和input等
• label for email
• input class form-control

6.1 input-group

关键字检索

	
		
			搜索
		

6.2 form-group

右侧栏：查询条件+表格+分页

	

	

		部门ID
		
	
		

			部门名称
			
		
		

			部门级别
			
				请选择
				1
				2
				3
			
		
		
		
		查询
		新增

7 表格样式

标签样式有以下几种：
.table 表格基本样式
.table-striped 在 内添加斑马线形式的条纹 ( IE8 不支持)
.table-bordered 为所有表格的单元格添加边框
.table-hover 在 内的任一行启用鼠标悬停状态
.table-condensed 让表格更加紧凑
.table-responsive //响应式表格，可以让表格水平滚动以适应小型设备（小于 768px）。当在大于 768px 宽的大型设备上查看时，您将看不到任何的差别。
.table-dark //黑色背景表格

7.2 table

表格固定

全选	序号	部门编号	部门名称	部门级别	操作

7.3 分页

• pagination //ul元素上添加
• page-item //在li元素上添加page-item
• page-link

分页静态界面

	

			

				
首页
				
上一页
				
1
				
2
				
3
				
下一页
				
尾页
			
			
		
		共50条记录 第1/3页 
		

		
		GO
		

分页动态界面

	
	

		

		
		
		共0条记录  第1/1页
		
			
			
			GO
		
	

脚本

8 模态窗口

新增

新增


	

		

			

				
新增
				
					×
				
			
			

				

					

						部门ID
						
					
					

						部门名称
						
					
					

						部门级别
						
							请选择
							1
							2
							3
						
					
				
			
			

				取消
				保存
			
		
	
 

data-backdrop=“static” data-keyboard=“false” //禁止模态框的关闭按钮和点击空白处关闭模态框

aria-label属性用来给当前元素加上的标签描述，接受字符串作为参数。是用不可视的方式给元素加label（如果被描述元素存在真实的描述元素，可使用 aria-labelledby 属性作为来绑定描述元素和被描述元素来代替）。

8.2 模态窗口显示、隐藏

隐藏模态窗口对表单重置：
//input清空
$(“input”).val("");

//select重置
$("#selectId option:first").prop(“selected”, ‘selected’)

//注：$("#formId")[0].reset();
//因为reset方法是js的，在jquery中使用时要将jQuery对象转成js对象
.

//显示模态窗口
function dept_add_model() {
	$("#dept_add_model").modal();
}
//隐藏模态窗口
function modal_hide() {
	if (confirm("是否取消操作?"))
	{
		//隐藏模态窗口
		$("#dept_add_modal").modal('hide');
		//$("input").val("");
		$("#dept_add_form")[0].reset(); 
	} else {
		return false;
	}}

信息提示框

• alert-success //成功提示信息
• alert-dismissable class=“close” data-dismiss=“alert” //关闭提示框
× × 是 HTML 实体字符，来表示关闭操作

	

	信息：success
	×
	

图片

• rounded //圆角效果
• rounded-circle //椭圆效果
• img-thumbnail //图片缩略图效果
• img-fluid //图片响应式效果

超大屏幕

• jumbotron // 屏幕
• jumbotron-fluid //没有圆角的全屏幕

按钮

• btn-primary //主要按钮
• btn-secondary //次要按钮
• btn-success //成功按钮
• btn-info //信息按钮
• btn-danger //危险
• btn-outline-primary //按钮边框
• btn-sm btn-lg //小大号按钮
• btn-block //块级按钮
• active //可用
• disabled //禁用

按钮组

• btn-group //按钮组
• btn-group-lg|sm|xs 控制按钮组大小
• btn-group-vertical 垂直按钮组

进度条

• progress //添加一个div
• progress-bar //在上面的div中添加一个progress-bar的div

卡片

• card、card-header、card-body、card-footer
• card-img-top //图片
• card-body、card-title、card-text //图片卡片
• card-img-overlay//设置图片为背景

提示框

• data-toggle=“tooltip” //创建提示框
• title=“我是提示内容!” //提示内容
• data-placement=“top” //指定提示框位置
$(document).ready(function(){ //初始化
$(’[data-toggle=“tooltip”]’).tooltip();
});

颜色

• text-muted 柔和
• text-primary 重要
• text-success 成功
• text-info 提示
• text-warning 警告
• text-danger 危险
• text-secondary 副标题
• text-dark 深灰色文字
• text-light 浅灰色
• text-white 白色

…

参考资料

Bootstrap4 中文文档
http://bs4.ntp.org.cn/examples.html

折叠导航栏
https://www.runoob.com/bootstrap4/bootstrap4-navbar.html

JQuery全局变量在函数中调用报错undefined
https://blog.csdn.net/qq_19636353/article/details/45244539

bootstrap-treeview
https://www.cnblogs.com/tangzeqi/p/8021637.html

其他

定义前端一些常用ID、方法

/* 查询. */
dept_id、dept_name、dept_level;//查询条件的属性id
$(#"query")、$(#"queryBtn")、$(#"queryDeptBtn") //查询按钮
queryDepts();、queryAll() //查询所有dept方法
queryDeptById(); //查询1个dept方法（通过id查询）
queryDeptList(); //查询列表方法
showDeptList(data)  //显示加载查询列表

/* 新增. */
$("#addDeptId")、$("#addDeptName")、$("#addDeptLevel"); //新增参数ID定义
$("#addBtn")、$("#addDeptBtn") //新增按钮id
$("#addModal")、$("#addDeptModal")；showAddDeptModal() //新增界面模态窗口ID、方法
$("#addDeptForm") //新增表单id
$("#saveBtn")、$("#addSaveBtn") //保存按钮id
addSaveDept();//保存方法
addDepts();//批量新增方法

/* 修改. */
$("#editDeptId")、$("#editDeptName")、$("#editDeptLevel") //修改参数
$("#edit1")、$("#editBtn1")、$("#editDeptBtn1") //修改按钮id（含多个）
$("#editForm")、$("#editDeptForm") //修改表单id
$("#editModal")、$("#editDeptModal")；showEditDeptModal() //修改界面模态窗口id、方法
$("#editSaveBtn") //修改保存按钮
editSaveDept() //修改保存调用方法
editDepts() //批量修改方法

/* 删除. */
$("#del1")、$("#delBtn1")、$("#delDeptBtn1") //删除按钮id（含多个）
deleteDept() //删除方法


/* 分页查询. */
var pagination; //分页控件id
var homePage=1; //首页
var lastPage=0; //上一页(初始值为0)
var firstPage=1; //第一页(恒值1)
var pageNo=1; //页码(初始值为1)
var nextPage=0; //下一页(初始值为0)
var endPage=0; //末页(初始值为0)
var pageSize=30; //单页数量(默认30条记录)
var pageCount=1; //总页数(初始值为1)
var totalCount=0; //总数据量
// currentPage=pageNo; //当前页数（放在后台计算）
// pageIndex=pageNo*pageSize; //起始页下标=pageNo-1(放在后台计算)
// pageInput //分页输入框
// pageSearch //分页搜索按钮

/* 导出. */
exportDeptBtn; //导出dept按钮id
exportDepts(); //导出方法


/* 公共模块. */
btn_close