Bootstrap的使用。。。之登录界面。。。

最新推荐文章于 2024-06-30 12:00:24 发布

小贺。

最新推荐文章于 2024-06-30 12:00:24 发布

阅读量4.9k

点赞数 2

分类专栏： web前端 PHP 文章标签： bootstrap 界面

本文链接：https://blog.csdn.net/Run_the_youth/article/details/51340885

版权

web前端同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

PHP

7 篇文章 0 订阅

订阅专栏

直接上代码。。。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>请登录</title>
    <link href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet">
    <link href="Login.css" rel="stylesheet">
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
    <form class="form-inline">
        <div class="form-group">
            <label class="sr-only" for="exampleInputEmail3">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
        </div>
        <div class="form-group">
            <label class="sr-only" for="exampleInputPassword3">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
        </div><br/>
        <div class="checkbox">
            <label>
                <input type="checkbox" value="remember-me">Remember me?</input>
            </label>
        </div>

        <button type="button" class="btn btn-primary btn-lg">登录</button>
</form>
</body>
</html>

css代码。。。


body{
    background-color: #4A374A;
    text-align: center;
}

.form-inline{
    padding-right: 15px;
    padding-left: 15px;
    margin-left: auto;
    margin-right: auto;
    height: 720px;
    max-width: 330px;
    padding-top: 50px;
}
.form-inline input{
    margin-bottom: 10px;
    outline: none;
    padding: 10px;
    font-size: 13px;
    color: #fff;
    text-shadow:1px 1px 1px;
    border-top: 1px solid #312E3D;
    border-left: 1px solid #312E3D;
    border-right: 1px solid #312E3D;
    border-bottom: 1px solid #56536A;
    border-radius: 4px;
    background-color: #2D2D3F;
}
.form-inline .form-control{
    position: relative;
    height: auto;
    padding: 10px;
    font-size: 16px;
    width: 300px;
}
.btn{
    width: 300px;
    min-height: 40px;
    display: block;
    background-color: #4a77d4;
    border: 1px solid #3762bc;
    color: #fff;
    padding: 10px 16px;
    font-size: 18px;
    line-height: normal;
    border-radius: 6px;
    margin: 0;
    text-decoration: none;
    text-align: center;
}

.checkbox{
    margin-left: -160px;
    font-size: 18px;
    color: #FFE4E1;
}