SSM开发之bootstrap整合

最新推荐文章于 2023-01-06 12:25:18 发布

王小白杂货店

最新推荐文章于 2023-01-06 12:25:18 发布

阅读量869

点赞数

分类专栏： spring系列文章标签： java bootstrap

本文链接：https://blog.csdn.net/qq_39464523/article/details/104105313

版权

spring系列专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、下载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
运行后的页面如下图：
在这里插入图片描述
…后续可能会有补充

王小白杂货店

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
SSM开发之bootstrap整合

一、下载bootstrap1.进入bootstrap官网，地址为https://www.bootcss.com，如下图2.选择bootstrap进行下载，我这里下载的是bootstrap3，如下图二、bootstrap使用1.解压压缩包，粘到项目中，如下图2.在jsp中引用bootstrap的js和css<%@ page language="java" contentTyp...
复制链接

扫一扫

专栏目录