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>

效果如下

web项目初建--Bootstrap初使用

web项目初建--Bootstrap初使用

1.开源包下载

2.项目中使用

推荐阅读更多精彩内容