Bootstrap入门（五）表单
先引入本地的CSS文件
<link href="css/bootstrap.min.css" rel="stylesheet">
一.内联表单
单独的表单控件会被自动赋予一些全局样式。所有设置了
.form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。而内联表单，要为
<form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。需要手动设置宽度:
在 Bootstrap 中，输入框和单选/多选框控件默认被设置为
width: 100%; 宽度。在内联表单，我们将这些元素的宽度设置为 width: auto;，因此，多个控件可以排列在同一行。根据你的布局需求，可能需要一些额外的定制化组件。一定要添加
label 标签:如果你没有为每个输入控件设置
label 标签，屏幕阅读器将无法正确识别。对于这些内联表单，你可以通过为label 设置 .sr-only 类将其隐藏。代码操作（在chrome中运行，不同浏览器效果可能不同）：
先创建一个表单
<form role="form" class="form-inline">
...
</form>
在表单中，可以有文本，输入框，选择文件，button按钮等，
1.日期。
先创建一个div，class为"form-group"，尝试日期的选择：
<div class="form-group">
<label>日期</label>
<input type="date" class="form-control">
</div>
点击右侧按钮，效果：
2.输入框
（placeholder =X，X为提示内容；type= Y，Y为输入框应遵守的约束）：
设置两个输入框，一个是输入邮箱，一个输入密码，一个提示“email ”，另一个提示“password ”
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" placeholder="email">
<label>Password</label>
<input type="password" class="form-control" placeholder="password">
</div>
提示效果：
输入时遵守约束/违反约束时的效果（type="email" 的输入框提示需要@符号，type="password" 的输入框输入内容变成点号）：
3.选择文件
<div class="form-group">
<label>选择</label>
<input type="file">
<p class="help-block">选择文件</p>
</div>
效果：
点击“选择文件”，选择任意文件后，效果：
4.单选/多选框：
（不同的是，他的class是radio/checkbox）
<div class="radio">
<label>
<input type="radio"> Check me out 1
</label>
<label>
<input type="radio"> Check me out2
</label>
<label>
<input type="radio"> Check me out3
</label>
</div>
<br>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out 1
</label>
<label>
<input type="checkbox"> Check me out2
</label>
<label>
<input type="checkbox"> Check me out3
</label>
</div>
效果：
选择后效果：
二.水平表单
通过为表单添加
.form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。代码操作：
先创建一个class为“form-horizontal”的表单
<form class="form-horizontal">
...
</form>
添加第一个内容
<div class="form-group">
<label>email</label>
<input type='email' placeholder="email">
</div> <div class="form-group">
<label>password</label>
<input type='password' placeholder="password">
</div>
但是发现效果有点不对，部分内容被覆盖掉了，如图：
我们可以使用栅格来解决这个问题（Bootstrap入门（二）栅格 ），修改代码为
<div class="form-group">
<label class="col-sm-2 control-label">email</label>
<div class="col-sm-10">
<input type='email' 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' placeholder="password">
</div>
</div>
得到的效果是：
同样，可以对单/多选框，按钮等都可以这样进行处理，添加代码：
<div class="form-group">
<div class='col-sm-offset-2 col-sm-10'>
<div class='checkbox'>
<label>
<input type='checkbox'>test
</label>
</div>
</div>
</div> <div class='form-group'>
<div class='col-sm-offset-2 col-sm-10'>
<button type='submit' class="btn btn-default">test</button>
</div>
</div>
得到
三.表单中的一些处理
有时候，我们希望禁止使用一些输入框，可以添加“disabled ”
<input type="text" class='form-control' placeholder="asd">
<input type="text" class='form-control' placeholder="asd" disabled>
<textarea class="form-control" rows='5'>ASD</textarea>
对比看到第二行变蓝，无法再里面进行编辑，还有一个5行的文本框：
四.表单输入框颜色
新建一个表单
<form role="form">
...
</form>
先新建几个输入框
<form role="form">
<div class="form-group">
<label>test</label>
<input class="form-control" type="text">
</div>
<div class="form-group">
<label>test</label>
<input class="form-control" type="text">
</div>
<div class="form-group">
<label>test</label>
<input class="form-control" type="text">
</div>
</form>
效果：
修改/添加输入框的class（添加has-warning /has-success/has-error 等）
<form role="form">
<div class="form-group has-warning">
<label>test</label>
<input class="form-control" type="text">
</div>
<div class="form-group has-success">
<label>test</label>
<input class="form-control" type="text">
</div>
<div class="form-group has-error">
<label>test</label>
<input class="form-control" type="text">
</div>
</form>
根据不同情况，输入框有了不同的颜色效果：
如果想使用一些图标，比如：
就要先把本地的css文件改为网络地址
<link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
新添加一个<span>来承载这个图标，把class改为图标的名字就行，比如：
<div class="form-group has-warning has-feedback">
<label>test</label>
<input class="form-control" type="text">
<span class="glyphicon glyphicon-ok form-control-feedback" ></span>
</div>
效果
组合其他
<div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>
效果