SSM整合的Maven项目中引入Bootstrap，三步实现高大上插拔UI，后端也有美感
生活随笔
收集整理的这篇文章主要介绍了
SSM整合的Maven项目中引入Bootstrap，三步实现高大上插拔UI，后端也有美感
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
对比效果
引入bootstrap前
引入bootstrap后
实现
第一步下载并引入bootstrap
bootstrap3下载
https://v3.bootcss.com/getting-started/#download
下载完成后
因为bootstrap需要依赖jquery，所以你需要下在jquery。
关于不使用Maven构建项目时的引入bootstrap的时候请参照：
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/85037589
如果下载bootstrap以及jquery有问题，请在：
https://github.com/badaoliumang/StaticResourceCollection
进行下载。
下载完将bootstrap以及jquery引入到项目中
位置：
在webapp下新建static目录，将下载的bootstrap的文件复制进来。
static下新建js目录，将jquery复制进来。
在WEB-INF下新建jsp目录，在其下新建listUser.jsp
第二步jsp页面引入bootstrap
打开listUser.jsp
添加如下代码：
<%pageContext.setAttribute("APP_PATH", request.getContextPath()); %> <script type="text/javascript" src="${APP_PATH }/static/js/jquery-1.12.4.min.js"></script> <link href="${APP_PATH }/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"> <script src="${APP_PATH }/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
添加位置如下：
第三步修改页面样式
打开bootstrap中文网，找到全局css样式，比照官网给的demo进行添加样式。
https://v3.bootcss.com/css/
比如这里的
表格添加样式
<table align='center' border='1' cellspacing='0' class="table table-bordered">input添加样式
<div class="form-group"><label for="name">用户名</label><input type="text" class="form-control" id="name" name ="name" placeholder="name"></div>button添加样式
<button type="submit" class="btn btn-default">新增用户</button>完整jsp页面代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%><%pageContext.setAttribute("APP_PATH", request.getContextPath()); %> <!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>查询所有用户</title> </head><script type="text/javascript" src="${APP_PATH }/static/js/jquery-1.12.4.min.js"></script> <link href="${APP_PATH }/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"> <script src="${APP_PATH }/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> <body> <table align='center' border='1' cellspacing='0' class="table table-bordered"<th ><td>id</td><td>name</td><td>age</td><td>编辑</td><td>删除</td></th><c:forEach items="${userList}" var="u"><tr class="active"><td >${u.id}</td><td>${u.name}</td><td>${u.age}</td><td><a href="editUser?id=${u.id}">编辑</a></td><td><a href="deleteUser?id=${u.id}">删除</a></td></tr></c:forEach> </table> <div style="text-align:center"><a href="?start=0">首 页</a><a href="?start=${page.start-page.count}">上一页</a><a href="?start=${page.start+page.count}">下一页</a><a href="?start=${page.last}">末 页</a> </div> <form action="addUser" method="post"><div class="form-group"><label for="name">用户名</label><input type="text" class="form-control" id="name" name ="name" placeholder="name"></div><div class="form-group"><label for="age">年龄</label><input type="number" class="form-control" id="age" name="age" placeholder="age"></div><button type="submit" class="btn btn-default">新增用户</button> </form></body> </html>
总结
以上是生活随笔为你收集整理的SSM整合的Maven项目中引入Bootstrap，三步实现高大上插拔UI，后端也有美感的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： web.xml还不会配置编码过滤器？
- 下一篇： BJUI选择时间后点击导出提示未选择时间