Bootstrap CSS 表单、按钮和图片

一、表单样式

先放截图：

上图中第一行是内联表单（响应式），当窗口宽度小于780时，会变成酱：

Bootstrap CSS 表单、按钮和图片

主要包括的知识点：

内联表单：

必须加label才能使用input标签的class属性，不然会有错误
隐藏label的方法：class属性：sr-only

水平排列表单：

使用栅格系统显示表单

下面是代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单</title>
		<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
		 
	</head>
	<body>
		<!--内联表单-->
		<form role="form" class="form-inline">
			<div class="form-group">
				<label>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="password" />
			</div>
			<div class="form-group">
				<!--隐藏label-->
				<label class="sr-only">选择文件</label>
				<input type="file" />
				<p class="belp-block">选择你的文件</p>
			</div>
		</form>
		<!--水平排列表单-->
		<form class="form-horizontal" role="form">
			<!--栅格系统-->
			<div class="form-group">
				<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">
				<label class="col-sm-2 control-label">password</label>
				<div class="col-sm-10">
					<input type="password" 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>

Bootstrap CSS 表单、按钮和图片

一、表单样式

希望我的记录能够帮到你~ 喜欢请点赞！

谢谢你看到这里！写作仓促，有疏漏之处还请评论指正，共同探讨进步！