SSM整合的Maven项目中引入Bootstrap，三步实现高大上插拔UI，后端也有美感

最新推荐文章于 2023-08-12 18:23:17 发布

霸道流氓气质

最新推荐文章于 2023-08-12 18:23:17 发布

阅读量1.8k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：第三方框架文章标签： maven-bootstrap

本文链接：https://blog.youkuaiyun.com/BADAO_LIUMANG_QIZHI/article/details/85325577

第三方框架专栏收录该内容

153 篇文章

订阅专栏

对比效果

引入bootstrap前

引入bootstrap后

实现

第一步下载并引入bootstrap

bootstrap3下载

https://v3.bootcss.com/getting-started/#download

下载完成后

因为bootstrap需要依赖jquery，所以你需要下在jquery。

关于不使用Maven构建项目时的引入bootstrap的时候请参照：

https://blog.youkuaiyun.com/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>