按照布局的不同，分为三类表单：
垂直表单(默认)，内联表单和水平表单
垂直表单：
垂直表单又称基本表单，制作步骤如下
1.向父form标签添加role="form"
2.把标签和控件放在一个类名为form-group的div中，获得最佳间距
3.向所有的文本标签input,textarea,select添加.form-control类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible"content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基本表单</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
<form role="form">
<div class="form-group">
<label for="name">名称</label>
<input type="text" class="form-control" id="name" placeholder="请输入名称">
</div>
<div class="form-group">
<label for="inputfile">文件输入</label>
<input type="file" id="inputfile">
<p class="help-block">这里是块级帮助文本的实例</p>
</div>
<div class="checkbox">
<label for="">
<input type="checkbox">记住我
</label>
</div>
<button class="btn btn-default" type="submit">提交</button>
</form>
</body>
<script src="jquery/jquery-1.11.0.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</html>
内联表单：
1.创建内联表单，只需在垂直表单的基础上，为form标签添加类.form-inline
2.内联表单的所有元素都是内联的，向左对齐，标签并排
3.Bootstrap中的input,select,tetarea标签有100%的宽度，
4.可以使用类.sr-only隐藏内联表单的某个元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible"content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内联表单</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
<form role="form" class="form-inline">
<div class="form-group">
<label for="name">名称</label>
<input type="text" class="form-control" id="name" placeholder="请输入名称" width="50px">
</div>
<div class="form-group">
<label for="inputfile">文件输入</label>
<input type="file" id="inputfile">
<p class="help-block">这里是块级帮助文本的实例</p>
</div>
<div class="checkbox">
<label for="">
<input type="checkbox" class="sr-only">记住我
</label>
</div>
<button class="btn btn-default" type="submit">提交</button>
</form>
</body>
<script src="jquery/jquery-1.11.0.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</html>
水平表单：
创建水平表单的步骤：
1.向父标签添加类.form-horizontal，改变.form-group的行为，并使用Bootstrap预置的栅格class将label和控件组水平并排布局
2.把标签和控件放在一个带有.form-group类的div中
3.向标签添加.control-label类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible"content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>水平表单</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="name" class="col-sm-2 control-label" >用户名</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" placeholder="请输入用户名">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label" >密码</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password" placeholder="请输入密码">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label for="">
<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>
<script src="jquery/jquery-1.11.0.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</html>
改变表单控件的样式：
1.使用.input-lg和.input-sm为控件设置高度
2.通过.col-lg-*为控件设置宽度
3.通过覆盖.form-control的样式来改变控件的样式
4.类col-lg-*需要在div标签上使用才能生效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible"content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>水平表单</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<style>
.form-control{
background-color: pink;
}
</style>
<body>
<form class="form-horizontal" role="form">
<input type="text" class="form-control input-lg" placeholder=".input-lg">
<input type="text" class="form-control" placeholder="Defaultinput">
<div class="col-lg-3">
<input type="text" class="form-control input-lg" placeholder="input-lg col-lg-3">
</div>
<input type="text" class="form-control input-sm" placeholder="input-sm">
</form>
</body>
<script src="jquery/jquery-1.11.0.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</html>
