bootstrap系列-6.BooStrap表单(上)

本节代码实例只要讲解表单的及控件的UI属性设定,讲解的内容均以注释的方式写出

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>BootStrap表单</title>
	<meta charset="utf-8" />
    <link href="bootstrap.css" rel="stylesheet" />
</head>
<body>
    <!--form-inline:内联表单,设置为内联表单之后控件就会移植到一行之上-->
    <form role="form" class="form-inline">
        <!--设置输入框的上下大小form-group  不直接设置  在外面包围div进行设置,group类的属性还有如下:form-group form-control input-group button-group-->
        <div class="form-group">
            <!--sr-only:功能是将控件隐藏-->
            <!--placeholder:框内的默认文字-->
            <label class="sr-only">email</label>
            <input type="email" class="form-control" placeholder="Enter email" />
        </div>
        <div class="form-group">
            <label>密码</label>
            <input type="password" class="form-control" placeholder="Enter password" />
        </div>
        <div class="form-group">
            <label>选择文件</label>
            <input type="file" />
            <p class="help-block">选择你需要的文件</p>
        </div>
    </form>
    <!--form-horizontal:水平表单-->
    <form class="form-horizontal" role="form">
        <div class="form-group">
            <!--control-label:表示的是label样式-->
            <label class="col-sm-2 control-label">Email</label>
            <div class="col-sm-10">
                <input type="email" class="form-control" placeholder="Email" />
             </div>
        </div>
        <div class="form-group">
            <!--control-label:表示的是label样式-->
            <label class="col-sm-2 control-label">Password</label>
            <div class="col-sm-10">
                <input type="email" class="form-control" placeholder="Password" />
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" />记住密码
                    </label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-default">登录</button>
            </div>
        </div>
    </form>
</body>
</html>

在这里插入图片描述


版权声明:本文为cdc8596原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。