bootstrap表单样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
    <form role="form" class="form-inline"><!--表单变成内联,宽度自适应-->
    <div class="form-group">
        <label>密码</label>
        <input type="password" name="" class="form-control" placeholder="Enter password">
    
    </div>
        <div class="form-group">
            <label>email</label>
            <input type="email" name="" class="form-control" placeholder="Enter email">
            <button type="submmit">提交</button>

        </div>
        <div class="form-group">
            <label class="sr-only">选择文件</label> <!--lable添加class sr-only 可以隐藏lable-->
            <input type="file" name="">
            <p class="help-block">选择你需要的文件</p>
        
        </div>


    </form>
    <form role="form" class="form-horizontal">
        <div class="form-group">
                <label class="col-sm-2 control-label">Email</label>
                <div class="col-sm-10">
                    <input type="email" name="" class="form-control" placeholder="email"><!--加类form-control带圆角效果-->
                </div>
    
    
        </div>
        <div class="form-group">
                <label class="col-sm-2 control-label">password</label>
                <div class="col-sm-10">
                    <input type="password" name="" placeholder="password">
                </div>
    
    
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2"><!--添加类名col-md-offset-2向右移动两个位子-->
                <div class="checkbox">
                    <label>

                        <input type="checkbox" name="">记住密码
                    </label>

                </div>


            </div>


        </div>    
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submmit" class="btn btn-default">登录</button>

            </div>


        </div>    
    
    </form>
</body>
</html>

猜你喜欢

转载自my.oschina.net/kitty0107/blog/1633390