Blogger Information
Blog 39
fans 0
comment 0
visits 30808
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
Bootstrap第二课 : 之表格 , 表单 2018年9月25日 22:03
南通税企通马主任的博客
Original
747 people have browsed it

编程 : 用水平表单制作一个完整用户登陆页面

实例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../dist/css/bootstrap.css">
    <title>水平表单之用户登录</title>
</head>
<body>
<script src="../jquery.js"></script>
<script src="../dist/js/bootstrap.js"></script>
<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h3 class="text-center">用户登录</h3>
            <form action="" class="form-horizontal">
                <div class="form-group">
                    <label for="name" class="col-sm-2 control-label">用 户 名</label>
                    <div class="col-sm-10">
                        <input type="text" id="name" class="form-control" placeholder="邮箱/手机/QQ号/微信号">
                    </div>
                </div>
                <div class="form-group">
                    <label for="password" class="col-sm-2 control-label">密     码</label>
                    <div class="col-sm-10">
                        <input type="text" id="password" class="form-control" placeholder="密码不少于8位数并包含字母及大小写">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-10 col-sm-offset-2">
                        <div class="checkbox">
                            <label for="checkbox"><input type="checkbox" id="checkbox" checked>记住密码</label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-10 col-sm-offset-2">
                        <button type="submit" class="btn btn-primary">登录</button>
                        <button type="reset" class="btn btn-info">重填</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


Correction status:Uncorrected

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments