SSM开发之bootstrap整合
2020-03-02 01:31
190 查看
一、下载bootstrap
1.进入bootstrap官网,地址为https://www.bootcss.com,如下图
2.选择bootstrap进行下载,我这里下载的是bootstrap3,如下图
二、bootstrap使用
1.解压压缩包,粘到项目中,如下图
2.在jsp中引用bootstrap的js和css
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String contextPath = request.getContextPath(); String basePath = contextPath + "/CONFIG-INF"; %> <!-- js import --> <script src="<%=basePath%>/bootstrap/js/bootstrap.min.js"></script> <!-- css import --> <link href="<%=basePath%>/bootstrap/css/bootstrap.min.css" rel="stylesheet">
三、页面测试
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <jsp:include page="../CONFIG-INF/common.jsp"></jsp:include> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>登录</title> </head> <body> <div class="container" style="width:400px; position: relative; top: 15%;"> <div class="form-signin"> <h2 class="form-signin-heading" style="text-align: center;">试卷分析系统</h2> <input type="text" id="username" class="form-control margincss" placeholder="用户名" required autofocus> <input type="password" id="password" class="form-control margincss" placeholder="密码" required> <div> <input type="text" id="checkcode" class="form-control margincss" placeholder="验证码" style="display: inline; width: 50%;" required> <div style="float: right;" class="margincss"> <img id="checkImg" alt="请稍等" style="width: 80px; height: 35px;"> </div> </div> <div class="checkbox"> <label> <input type="checkbox" value="remember-me"> 记住我 </label> <div style="float: right;"> <a>忘记密码</a> </div> </div> <button class="btn btn-lg btn-primary btn-block" type="button">登录</button> </div> </div> </body> </html>
注:这里的common.jsp引用了bootstrap的css和js
运行后的页面如下图:
…后续可能会有补充
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- ssm整合说明与模板-Spring Spring MVC Mybatis整合开发
- ssm整合bootstrap之分页
- springmvc+mybatis+spring 整合 bootstrap html5 mysql oracle SSM
- SpringBoot整合SSM开发基于RESTful API的微服务小笔记
- SSM整合开发流程
- bootstrap+angular+ssm整合(下)
- ssm整合说明与模板-Spring Spring MVC Mybatis整合开发
- springmvc整合mybatis框架源码 bootstrap html5 mysql oracle maven SSM
- SSM整合开发的小Demo----毕业设计管理系统之教师模块
- Maven整合SSM框架开发之dao层开发
- 【SSM框架 SSM项目源码 SSM源码 下载】java框架整合Springmvc+mybatis+shiro+bootstrap
- 整合开发 Angular2 + Bootstrap4 + Nodejs + Eclipse +Spring + SpringMVC +Mybatis
- ssm整合开发
- SSM整合开发(二)—Service层
- SSM(spring-springmvc-mybatis)整合开发xml配置文件内容springmvc-config.xml,application.xml,web.xml
- SSM整合开发(三)—Web层
- ssm(springmvc4+spring4+mybatis3)整合实战-个人博客系统-前端页面的开发
- java开发之框架搭建(SSM整合+profile+mybatis逆向工程)
- SSM(Spring,SpringMVC,MyBatis)整合开发流程
- SSM整合开发的小Demo----毕业设计管理系统之管理员模块