讲给后台程序员看的前端系列教程(49)——Bootstrap全局CSS样式(3)

谷哥的小弟

于 2019-10-18 16:13:22 发布

阅读量529

点赞数 1

分类专栏：讲给后台程序员看的前端系列教程文章标签： Bootstrap 表单 CSS

本文链接：https://blog.csdn.net/lfdfhl/article/details/102626555

版权

讲给后台程序员看的前端系列教程专栏收录该内容

63 篇文章 45 订阅

订阅专栏

推翻自己和过往——自定义View系列教程(10篇)

走出思维困境，踏上精进之路——Android开发进阶精华录

讲给Android程序员看的前端系列教程(40集免费视频教程+源码)

版权声明

本文原创作者：谷哥的小弟
作者博客地址：http://blog.csdn.net/lfdfhl

在本节教程中，我们重点关注Bootstrap提供的与表单相关的CSS样式。在Bootstrap中有三种常见的表单：垂直表单，内联表单、水平表单；在此，我们对其一一介绍。

基本步骤

Bootstrap中创建表单的基本步骤如下：

1、为每个表单控件(例如：input、textarea和select等)添加类选择器form-control，使得该控件可独占一行
2、把成对的label和表单控件包裹在类选择器为form-group的div中以获得更好的表现效果
3、将类选择器为form-group的div置于form中
4、可使用col-设备代号-格子数指定表单的宽度

垂直表单

垂直表单是Bootstrap的默认表单样式。

<!DOCTYPE html>
<!-- 本文作者：谷哥的小弟-->
<!-- 博客地址：https://blog.csdn.net/lfdfhl-->
<html>
	<head>
		<!-- 以下3个meta标签必须置于head标签的最前位置 -->
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>表单</title>
		<!-- 引入Bootstrap的css文件 -->
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<!-- 引入jQuery文件 -->
		<script src="js/jquery-3.2.1.min.js"></script>
		<!-- 引入Bootstrap的JavaScript -->
		<script src="js/bootstrap.min.js"></script>

	</head>
	<body>
		<!-- 垂直表单 -->
		<form class="col-lg-3">
			<div class="form-group">
				<label for="exampleInputEmail1">Email address</label>
				<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
			</div>
			<div class="form-group">
				<label for="exampleInputPassword1">Password</label>
				<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
			</div>
			<div class="form-group">
				<label for="exampleInputFile">File input</label>
				<input type="file" id="exampleInputFile">
				<p class="help-block">Example block-level help text here.</p>
			</div>
			<div class="checkbox">
				<label>
					<input type="checkbox"> Check me out
				</label>
			</div>
			<button type="submit" class="btn btn-default">Submit</button>
		</form>
	</body>
</html>

在这里插入图片描述

内联表单

为form添加类选择器form-inline，可将表单设置为内联表单。在内联表单中每个控件不再独占一行，所有的控件在同一行显示。

<!DOCTYPE html>
<!-- 本文作者：谷哥的小弟-->
<!-- 博客地址：https://blog.csdn.net/lfdfhl-->
<html>
	<head>
		<!-- 以下3个meta标签必须置于head标签的最前位置 -->
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>表单</title>
		<!-- 引入Bootstrap的css文件 -->
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<!-- 引入jQuery文件 -->
		<script src="js/jquery-3.2.1.min.js"></script>
		<!-- 引入Bootstrap的JavaScript -->
		<script src="js/bootstrap.min.js"></script>

	</head>
	<body>
		<!-- 内联表单 -->
		<form class="form-inline">
			<div class="form-group">
				<label for="exampleInputName2">Name</label>
				<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
			</div>
			<div class="form-group">
				<label for="exampleInputEmail2">Email</label>
				<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
			</div>
			<button type="submit" class="btn btn-default">Submit</button>
		</form>
	</body>
</html>

在这里插入图片描述

水平表单

为form添加类选择器form-horizontal，可将表单设置为水平表单。

<!DOCTYPE html>
<!-- 本文作者：谷哥的小弟-->
<!-- 博客地址：https://blog.csdn.net/lfdfhl-->
<html>
	<head>
		<!-- 以下3个meta标签必须置于head标签的最前位置 -->
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>表单</title>
		<!-- 引入Bootstrap的css文件 -->
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<!-- 引入jQuery文件 -->
		<script src="js/jquery-3.2.1.min.js"></script>
		<!-- 引入Bootstrap的JavaScript -->
		<script src="js/bootstrap.min.js"></script>
	</head>
	<body>
		<!-- 水平表单 -->
		<form class="form-horizontal">
			<div class="form-group">
				<label for="inputEmail3" class="text-center col-sm-2 control-label">Email</label>
				<div class="col-sm-10">
					<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
				</div>
			</div>
			<div class="form-group">
				<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
				<div class="col-sm-10">
					<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10">
					<div class="checkbox">
						<label>
							<input type="checkbox"> Remember me
						</label>
					</div>
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10">
					<button type="submit" class="btn btn-default">Sign in</button>
				</div>
			</div>
		</form>
	</body>
</html>

在这里插入图片描述

谷哥的小弟

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
讲给后台程序员看的前端系列教程(49)——Bootstrap全局CSS样式(3)

在本节教程中，我们重点关注Bootstrap提供的与表单相关的CSS样式。在Bootstrap中有三种常见的表单：垂直表单，内联表单、水平表单；在此，我们对其一一介绍。
复制链接

扫一扫