Bootstrap是Twitter推出的一个用于web前端开发的开源工具包，是一个CSS/HTML框架。
1.开源包下载
Bootstrap中文网：http://www.bootcss.com/，
下载中文文档
下载Bootstrap
用于生产环境的Bootstrap下载。
2.项目中使用
将解压后的三个文件夹放入项目文件夹下，或者根据自己的需求引用文件
如果想要用到BootStrap提供的js插件，那么还需要引入jQuery框架，因为BootStrap提供的js插件是依赖于jQuery的。jQuery下载网站：https://code.jquery.com/
选择最新版minified，单击右键，在新标签或者新窗口中打开之后就可以看到jQuery的代码 ，再Ctrl+S保存到本地就可以了，默认的名称为jquery-3.3.1.min.js，将此文件放入项目中并引用。
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>HaveFun</title>
<script type="text/javascript" src="/static/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css">
</head>
之后在页面中就可以使用bootstrap了。
官方式样网址：https://v3.bootcss.com/css/，学习积累自己动手。
将之前的登录页面重新设计
<style>
body{
background: url('/static/image/background.jpg') no-repeat;
width: 100%;
}
.row{
margin: 200px 0 0;
}
.form-horizontal{
margin-top: 30px;
}
.btn{
width: 120px;
}
</style>
<body>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4 container">
<form class="form-horizontal" method="post" action="/user/login">
<div class="form-group">
<label class="col-sm-3 control-label">用户名：</label>
<div class="col-sm-7">
<input type="text" class="form-control" name="userName">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">密码：</label>
<div class="col-sm-7">
<input type="text" class="form-control" name="password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-5 col-sm-5">
<button type="submit" class="btn btn-default">登录</button>
</div>
</div>
</form>
</div>
<div class="col-md-4"/></div>
</div>
</body>
</html>
网友评论