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还不会配置编码过滤器？
- 下一篇： 一行Java代码竟能获取tomcat的绝