后台管理系统HtmlBootstrap 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="cdn.bootcss/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" 属性是对应折叠的内容。
<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，以简单和优雅的⽅式来显⽰⼀些继承树结构，如视图树、列表树等等。
5.2 左侧菜单
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></spa n>
</div>
7 表格样式
<table> 标签样式有以下⼏种：
.table 表格基本样式
.table-striped 在 <tbody> 内添加斑马线形式的条纹 ( IE8 不⽀持)
.table-bordered 为所有表格的单元格添加边框
.table-hover 在 <tbody> 内的任⼀⾏启⽤⿏标悬停状态
.table-condensed 让表格更加紧凑
.table-responsive //响应式表格，可以让表格⽔平滚动以适应⼩型设备（⼩于 768px）。当在⼤于 768px 宽的⼤型设备上查看时，您将看不到任何的差别。
div下拉菜单.table-dark //⿊⾊背景表格
7.2 table
表格固定
<!-- 列表 -->
<div id="mamage_list" >
<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条记录 ；第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)
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论