Loading

bootstrap 基础表单 内联表单 横向表单

bootstrap 基础表单 内联表单 横向表单

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="dist/css/bootstrap.css">
</head>

<body>
    <p class="btn-primary">基础表单</p>
    <form>
        <fieldset>
            <legend>User Login</legend>
            <div class="form-group">
                <label for="">User</label>
                <input type="email" class="form-control" placeholder="this is email input">
            </div>
            <div class="form-group">
                <label for="">Pass</label>
                <input type="password" class="form-control" placeholder="this is for password">
            </div>
            <div class="checkbox">
                <label for="">
                    <input type="checkbox">ABC</input>
                </label>
            </div>
            <button type="submit" class="btn btn-default">Login</button>
        </fieldset>
    </form>
    <p class="btn-primary">内联表单</p>
    <form class="form-inline">
        <div class="form-group">
            <label for="">User</label>
        </div>
        <div class="form-group">
            <input type="text" class="form-control" placeholder="this is for user">
        </div>
        <div class="checkbox">
            <label for="chk2">
                <input id="chk2" type="checkbox">Remember Pass</label>
        </div>
        <button type="submit" class="btn btn-default">Login</button>
    </form>
    <p class="btn-primary">横向表单</p>
    <form action="" class="form-horizontal" role="form">
        <div class="form-group">
            <label for="account" class="col-sm-2 control-label">UserName</label>
            <div class="col-sm-10">
                <input type="email" class="form-control" id="account" placeholder="account place holder">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <div class="checkbox">
                    <label for="chk">
                        <input id="chk" type="checkbox">remember me</label>
                </div>
            </div>
        </div>
    </form>
    <script type="text/javascript" src="dist/jQuery/jquery-1.11.3.js"></script>
    <script type="text/javascript" src="dist/js/bootstrap.js"></script>
</body>

</html>

 

posted @ 2015-10-02 19:53  stono  阅读(681)  评论(0)  编辑  收藏  举报