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());
%>

 

添加位置如下：

第三步修改页面样式

打开bootstrap中文网，找到全局css样式，比照官网给的demo进行添加样式。

https://v3.bootcss.com/css/

比如这里的

表格添加样式

input添加样式

    用户名
    
  
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());
%>



    
    







        

        
id
        
name
        
age
        
编辑
        
删除
    
    

            
${u.id}
            
${u.name}
            
${u.age}
            
编辑
	        
删除
        
    


        首  页
        上一页
        下一页
        末  页


  

    用户名
    
  
  

    年龄
    
  
  新增用户