Bootstrap4實現增刪改查（常用樣式整理）

Bootstrap4實現增刪改查

BootStrap4.3.1 + SpringBoot2.1.5

一張圖

1 引入JS

<meta name="viewpoint" content="width=device-width,initial-scale=1" />
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />

設置設備大小viewport

2 基礎排版樣式

2.1 容器和網格系統

• container container-fluid //容器類前者固定寬度後者100%寬度
文字排版
• display //標題類 1-4
• small //小文本
• <abbr> //文本底部下面一條虛線邊框

2.2 柵格佈局系統

柵格嵌套*
響應式佈局
顯示和隱藏樣式

3 導航欄

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

<div class="container-fluid">
	<nav class="navbar navbar-expand-md bg-dark">
		<div class="navbar-header">
		<!-- <img src="/img/logo.png" class="img-rounded"> -->
			<h2><a class="navbar-brand" href="../index.html">LOGO</a></h2>
		</div>
	<ul class="nav navbar-nav">
		<li class="nav-item active" id="nav1Page"><a class="nav-link" href="#">主頁</a></li>
		<li class="nav-item" id="nav2Page"><a class="nav-link" href="#">基礎管理</a></li>
		<li class="nav-item" id="nav3Page"><a class="nav-link" href="#">業務管理</a></li>
		<li class="nav-item" id="nav4Page"><a class="nav-link" href="#">消息管理</a></li>
		<li class="nav-item" id="nav5Page"><a class="nav-link" href="#">系統管理</a></li>
	</ul>
</nav>

4 下拉菜單

• dropdown //下拉菜單默認
• button設置dropdown-toggle data-toggle=“dropdown” //下拉button
• dropdown-menu //下拉菜單
• a設置樣式dropdown-item

<div class="dropdown">
	<a class="dropdown-toggle" data-toggle="dropdown" href="#">
		<span class="glyphicon glyphicon-user"></span>admin</a>
		<ul class="dropdown-menu">
			<li class="dropdown-item"><a href="#">個人中心</a></li>
			<li class="dropdown-item"><a href="#">設置</a></li>
			<li class="dropdown-item"><a href="#">關於</a></li>
			<li class="dropdown-item"><a href="#">退出</a></li>
		</ul>
	</div>
	

5 列表組（含摺疊）

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

collapse類用於指定一個摺疊元素，點擊後控制內容的隱藏與顯示，需要在元素上添加 data-toggle=“collapse” 屬性。data-target="#id" 屬性是對應摺疊的內容。

<!-- 左側欄 List Group -->
<div class="row">
	<div class="col-md-2">
		<ul class="list-group">
			<li class="list-group-item"><a data-toggle="collapse"
				data-target="#collapse1" href="#">基礎管理</a>
				<ul class="collapse show" id="collapse1">
					<li>
						<a class="list-group-item-action" href="#">部門管理 
						<span id="totalCount" class="badge badge-pill badge-secondary">0</span>
						</a>
					</li>
					<li><a href="#">管理2</a></li>
					<li><a href="#">管理3</a></li>
					<li><a href="#">管理4</a></li>
				</ul></li>
			<li class="list-group-item"><a data-toggle="collapse"
				data-target="#collapse2" href="#">權限管理</a>
				<ul class="collapse" id="collapse2">
					<li><a href="#">管理1</a></li>
					<li><a href="#">管理2</a></li>
					<li><a href="#">管理3</a></li>
					<li><a href="#">管理4</a></li>
				</ul></li>
		</ul>
	</div>
</div>

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

關鍵字檢索

<!-- 關鍵字檢索 -->
<div class="input-group justify-content-end">
	<input type="text" class="form-control col-md-2" placeholder="輸入關鍵字"/>
		<span class="input-group-btn">
			<button type="submit" class="btn btn-outline-primary">搜索</button>
		</span>
</div>

6.2 form-group

右側欄：查詢條件+表格+分頁

<!-- 右側欄：查詢條件 -->
<div class="col-md-10">
	<div class="row form-inline form-group" id="manage_dept_query">
	<div class="form-group col-md-3">
		<label for="dept_id">部門ID</label>
		<input type="text" id="dept_id" class="form-control"/>
	</div>
		<div class="form-group col-md-3">
			<label for="dept_name">部門名稱</label>
			<input type="text" id="dept_name" class="form-control" value="" placeholder="請輸入" />
		</div>
		<div class="form-group col-md-2">
			<label for="dept_level">部門級別</label>
			<select id="dept_level" class="form-control">
				<option value="1">請選擇</option>
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
			</select>
		</div>
		
		<!-- 查詢按鈕 -->
		<span class="col-md-1"><button class="btn btn-outline-primary" type="button" id="manage_query_button" onclick="queryDepts()">查詢</button></span>
		<span class="col-md-1"><button class="btn btn-outline-primary" type="button" id="manage_add_button" onclick="dept_add_model()">新增</button></span>
</div>

7 表格樣式

<table> 標籤樣式有以下幾種：
.table 表格基本樣式
.table-striped 在 <tbody> 內添加斑馬線形式的條紋 ( IE8 不支持)
.table-bordered 爲所有表格的單元格添加邊框
.table-hover 在 <tbody> 內的任一行啓用鼠標懸停狀態
.table-condensed 讓表格更加緊湊
.table-responsive //響應式表格，可以讓表格水平滾動以適應小型設備（小於 768px）。當在大於 768px 寬的大型設備上查看時，您將看不到任何的差別。
.table-dark //黑色背景表格

7.2 table

表格固定

<!-- 列表 -->
<div id="mamage_list" style="height: 550px; overflow: auto;">
	<table class="table table-bordered table-hover text-center" id="manage_list_table">
		<thead>
			<tr>
				<th>全選<input type='checkbox' id="cb0"/></th>
				<th>序號</th>
				<th>部門編號</th>
				<th>部門名稱</th>
				<th>部門級別</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody></tbody>
	</table>
</div>

7.3 分頁

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

分頁靜態界面

<!-- 分頁查詢 -->
	<div class="input-group justify-content-end">
			<ul class="pagination pagination-sm">
				<li class="page-item"><a class="page-link" href="#">首頁</a></li>
				<li class="page-item disabled"><a class="page-link" href="#">上一頁</a></li>
				<li class="page-item active"><a class="page-link" href="#">1</a></li>
				<li class="page-item"><a class="page-link" href="#">2</a></li>
				<li class="page-item"><a class="page-link" href="#">3</a></li>
				<li class="page-item"><a class="page-link" href="#">下一頁</a></li>
				<li class="page-item"><a class="page-link" href="#">尾頁</a></li>
			</ul>
			
		<!-- Query Result -->
		<span class="col-md-2"><label>共50條記錄 第1/3頁 </label></span>
		<div class="input-group col-md-2">
		<input type="text" id="table_page" class="form-control text-center col-md-4" value="1" placeholder="1"/>
		<span class="input-group-addon"><button class="btn btn-outline-primary">GO</button></span>
		</div>

分頁動態界面

<body>
	<!-- 分頁查詢 -->
	<div class="input-group justify-content-end" id="paginationDiv">
		<ul class="pagination pagination-sm" id="pagination">
		</ul>
		<!-- Query Result -->
		<span class="col-md-2" id="pageInfo"><label>共0條記錄&nbsp;&nbsp;第1/1頁</label></span>
		<span class="input-group col-md-2">
			<input type="text" id="pageInput" class="form-control text-center col-md-4"	placeholder="1" />
			<span class="input-group-addon">
			<button class="btn btn-outline-primary" onclick="queryDepts()">GO</button></span>
		</span>
	</div>
</body>

腳本

<script type="text/javascript">

/* 分頁查詢JS. */
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=20; //單頁數量
var pageCount=1; //總頁數(初始值爲1)
var totalCount=0; //總數據量
// currentPage=pageNo; //當前頁數(暫未使用)
// pageIndex=pageNo*pageSize; //起始頁下標(放在後臺計算)
// pageGoInput //頁面跳轉輸入框
// pageGoBtn //頁面跳轉按鈕

$(function(){
	pagination = $("#pagination");
	initPagination(200);
})

function initPagination(total)
{
/*
 * 	totalCount = total == undefined ? 0 : total;
	if(totalCount == 0)
	{
		//$('#pagination').hide();
		return;
	}
 */

	/*
	 * 分頁初始化計算方式
	 * homePage=1
	 * lastPage==pageNo ? pageNo : pageNo-1
	 * firstPage=1
	 * nextPage==pageNo ? pageNo : pageNo+1
	 * 如果firstPage=pageNo=endPage
	 */
	pageCount = Math.ceil(totalCount/pageSize);
	pagination.html('');
	pagination.append("<li class='page-item' id='homePage' pageNo='1'><a class='page-link' href='#'>首頁</a></li>");
	pagination.append("<li class='page-item' id='lastPage' pageNo='1'><a class='page-link' href='#'>上一頁</a></li>");
	//page 1 is default active
	pagination.append("<li class='page-item active' id='firstPage' pageNo='1'><a class='page-link' href='#'>1</a></li>");
	if(pageCount > 1)
	{
		for(var i=2; i<=pageCount; i++)
		{
			pagination.append("<li class='page-item' pageNo='"+i+"'><a class='page-link' href='#'>"+i+"</a></li>");
		}
		pagination.append("<li class='page-item' id='nextPage' pageNo='"+ (pageNo+1) +"'><a class='page-link' href='#'>下一頁</a></li>");
	}else
	{
		pagination.append("<li class='page-item disabled' id='nextPage' pageNo='1'><a class='page-link' href='#'>下一頁</a></li>");
		//pageNo='1' 或者 pageNo='"+pageCount+"' 或者 pageNo='"+pageNo+"'
		//pagination.append("<li class='page-item disabled' id='nextPage' pageNo='"+pageNo+"'><a class='page-link' href='#'>下一頁</a></li>");
	}
	endPage = pageCount;
	pagination.append("<li class='page-item' id='endPage' pageNo='"+ pageCount +"'><a class='page-link' href='#'>末頁</a></li>");
	//pageInfo
	$("#pageInfo").html("<label>共" + totalCount + "條記錄&nbsp;&nbsp;第"+pageNo+"/"+pageCount+"頁 </label>");
	
	//get pageNo
	$("#pagination li").click(function()
	{
		pageination($(this));
	});

	//get next page btn
	$("#nextPage").click(function() {
		nextPageClick($(this));
	});
}

function nextPageClick(page) {
//	$("#pagination li").removeClass("active");
// //遍歷測試
//	$("#pagination li[pageNo]").each(function(i){
//		   var sortid=$(this).attr("pageNo");
//		   console.log(sortid)
//		});
}

function pageination(page)
{
	//獲取當前頁數
	pageNo = Number(page.attr("pageNo"));
	lastPage = pageNo-1;
	nextPage = pageNo+1;
	lastPage = lastPage <= 1 ? 1 : lastPage;
	nextPage = nextPage >= pageCount ? pageCount : nextPage;
	var newLastPage = $("#lastPage").attr("pageNo",lastPage);
	var newNextPage = $("#nextPage").attr("pageNo",nextPage);
	//設置樣式
	$("#pagination li").removeClass("active");
	//點擊nextPage 則去掉上一頁樣式，設置新的pageNo樣式爲active
	if(page.attr("id")=="nextPage" || page.attr("id")=="lastPage")
	{
		//pageNo已是最新
		$("#pagination li[pageNo="+pageNo+"]").addClass("active");
		
//		//遍歷測試
//		$.each($("#pagination li[pageNo]"),function(i){
//			if($(this).attr("pageNo")==nextPage)
//			{
//				alert($(this).attr("pageNo"))
//				//console.log($(this).attr("pageNo"));
//			}
//		});
	}
	else {
		if(!page.hasClass("active"))
		{
			page.addClass("active");
		}
	}
	alert("pageId="+page.attr("id")+", pageNo="+pageNo+", lastPage="+lastPage+", nextPage="+nextPage)
	console.log("pageId="+page.attr("id")+", pageNo="+pageNo+", lastPage="+lastPage+", nextPage="+nextPage)
}
</script>

8 模態窗口

新增

<!-- 新增-->
<span class="col-md-1"><button class="btn btn-outline-primary" type="button" id="manage_add_button" onclick="dept_add_model()">新增</button></span>
<!-- 新增界面-->
<div class="modal fade" id="dept_add_modal" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false" aria-labelleyby="myModalLabel">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title" id="myModalLabel">新增</h4>
				<button type="button" class="btn-danger close" id="btn_close" aria-label="close" onclick="modal_hide()">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<form id="dept_add_form">
					<div class="form-group">
						<label class="control-label" for="dept_id">部門ID</label>
						<input type="text" id="dept_id" class="form-control">
					</div>
					<div class="form-group">
						<label>部門名稱</label>
						<input type="text" id="dept_name" class="form-control">
					</div>
					<div class="form-group">
						<label for="dept_level">部門級別</label>
						<select id="dept_level" class="form-control">
							<option value="0">請選擇</option>
							<option value="1">1</option>
							<option value="2">2</option>
							<option value="3">3</option>
						</select>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
				<button type="submit" class="btn btn-primary">保存</button>
			</div>
		</div>
	</div></div>
 

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 實體字符，來表示關閉操作

<div class="container">
	<div class="alert alert-success alert-dismissible fade show">
	<span><strong>信息：</strong>success</span>
	<button type="button" class="close" data-dismiss="alert">&times;</button>
	</div>
</div>

圖片

• 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