用水平表单制作一个完整用户登陆页面—2018年9月25日08时00分 - Bootstrap作业

首页 > 博客列表 > 用水平表单制作一个完整用户登陆页面—2018年9月25日08时00分

博主信息

博文 21

粉丝 0

访问量 22241

专题推荐

更多>

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

实例

<!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="static/dist/css/bootstrap.css">
    <title>用户登录</title>
</head>
<body>
<!--<div class="container">-->
    <!--<div class="row">-->
        <!--<div class="col-md-8 col-md-offset-2">-->
        <!--<h2 class="text-center">用户登录</h2>-->


        <!--</div>-->
    <!--</div>-->


<div class="container">
    <div class="row">
    <div class="col-md-8 col-md-offset-2">


    <form action="" method="post" class="form-horizontal">
        <h2 class="text-center">用户登录</h2>

        <div class="form-group">
          <lable class="col-sm-2 control-label" for="user">账号:</lable>

            <div class="col-sm-10">
                <input type="user" name="user" id="user" class="form-control" placeholder="Mobile">
            </div>
        </div>


        <div class="form-group">
            <lable class="col-sm-2 control-label" for="password">密码:</lable>

            <div class="col-sm-10">
                <input type="password" name="password" id="password" class="form-control" placeholder="Password">
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-4 col-sm-offset-2">
                <div class="checkbox">
            <label>
                <input type="checkbox" checked>记住密码
            </label>
                </div>
            </div>
        </div>


        <div class="form-group">
            <div class="col-sm-10 col-sm-offset-2">
                <!--<div class="btn btn-success">用户登录</div>-->
                <button type="button" class="btn btn-success col-sm-12" name="btnlogin" id="btnlogin">登录</button>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-10 col-sm-offset-2">
                <button type="button" class="btn btn-danger col-sm-12" name="btnexit" id="btnexit">取消</button>
            </div>
        </div>


    </form>

    </div>
</div>
</div>


</body>
</html>

运行实例 »

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

总结:

<table class="table"> ... </table> 基础表格

<table class="table table-striped"> ... </table> 带分割线表格

<table class="table table-bordered"> ... </table> 带边框表格

<table class="table table-hover"> ... </table> 表格鼠标选中效果

<table class="table table-condensed"> ... </table> 表格行间距锁紧

.active 鼠标悬停在行或单元格上时所设置的颜色

.success 绿色效果,成功

.info 蓝色效果,提示

.warning 黄色效果,警告