美文网首页
web项目初建--Bootstrap初使用

web项目初建--Bootstrap初使用

作者: 李姗姗_8ef1 | 来源:发表于2019-02-27 14:40 被阅读0次

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初使用

      本文链接:https://www.haomeiwen.com/subject/cozoyqtx.html