ASP.NET + Bootstrap快速搭建登录界面

本人也是后台出身,对自己的要求也就是搭建一个还算看得过去的界面,正好以前没时间研究Bootstrap,所以现学现卖哈,先看一下效果图:
ASP.NET + Bootstrap快速搭建登录界面_第1张图片


<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <title>用户登录title>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <style>
        body
        {
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: url(Images/bg.jfif) no-repeat;
            background-size: 100% 100%;
            background-attachment: fixed;
        }

        form
        {
            width: 400px;
            margin: 200px auto;
            padding: 20px 30px;
            background-color: rgba(255, 255, 255, 0.8);
        }

            form div
            {
                margin-bottom:10px;
            }

        a:link, a:visited, a:hover, a:active
        {
            text-decoration: none;
            color: rgba(0, 0, 0, 0.5);
        }
    style>
    <script src="Scripts/jquery-3.0.0.min.js">script>
    <script src="Scripts/popper.min.js">script>
    <script src="Scripts/bootstrap.min.js">script>
head>
<body>
    <div class="container">
        <form action="Handlers/LoginHandler.ashx" method="post" onsubmit="return login()">
            <div style="margin-bottom:20px;">
                <h2 style="text-align:center;">用户登录h2>
            div>
            <div class="form-group has-success has-feedback">
                <input type="text" class="form-control" id="username" placeholder="用户名">
                <span class="glyphicon glyphicon-user form-control-feedback">span>
            div>
            <div class="form-group has-success has-feedback">
                <input type="password" class="form-control" id="password" placeholder="密码">
                <span class="glyphicon glyphicon-lock form-control-feedback">span>
            div>
            <div class="form-check">
                <label class="form-check-label">
                    <input type="checkbox" class="form-check-input" value=""><span style="font-size:15px;">记住我span>
                label>
            div>
            <div>
                <button type="submit" class="btn btn-primary btn-block">登录button>
            div>
            <div>
                <a href="#" style="display:inline;font-size:15px;">还未注册a>
                <a href="#" style="display:inline;font-size:15px;margin-left:185px;">忘记密码?a>
            div>
        form>
    div>
body>
html>

你可能感兴趣的:(ASP.NET)