在网页设计中，表单最常用到在登录，注册页面。也是我们必须掌握的知识点！！！
一、Bootstrap中的form的表单
主要分三种：1、垂直表单（默认）
2、内联表单（直接在form中添加 class="form-inline"就变成了内联表单）
3、水平表单（比较常用）：
<form> 元素添加 class .form-horizontal。
标签和控件放在一个带有 class .form-group 的 <div> 中
标签添加 class .control-label。
一般使用网格系统布局
.form-group ——设置表单之间的间距 form-control 设置<input>、<textarea> 和 <select>的样式
给大家看下form-control 设置了哪些属性及样式
垂直表单：
——直接在下面form标签中加入 class="form-inline"，就变成了内联
<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>
<input type="checkbox">请打勾
</label>
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
——水平表单：
<form> 元素添加 class .form-horizontal。 标签和控件放在一个带有 class .form-group 的 <div> 中
标签添加 class .control-label。
<form class="form-horizontal">
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">名字</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="firstname" placeholder="请输入名字">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">姓</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="lastname" placeholder="请输入姓">
</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>
二、表单元素-单选和多选框：
.radio .checkbox 垂直布局 .radio-inline .checkbox-inline水平布局
<label for="name">默认的复选框和单选按钮的实例</label>
<div class="checkbox">
<label><input type="checkbox" value="">爱好：听音乐</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">爱好：写代码</label>
</div>
<div class="radio">
<label><input type="radio" name="optionsRadios" value="option1" checked> 性别：男</label>
</div>
<div class="radio">
<label><input type="radio" name="optionsRadios" value="option2">性别：女</label>
</div>
<label for="name">内联的复选框和单选按钮的实例</label>
<div>
<label class="checkbox-inline"><input type="checkbox" id="inlineCheckbox1" value="篮球">篮球</label>
<label class="checkbox-inline"><input type="checkbox" id="inlineCheckbox2" value="足球">足球</label>
<label class="checkbox-inline"><input type="checkbox" id="inlineCheckbox3" value="乒乓球">乒乓球</label>
<label class="radio-inline"><input type="radio" name="optionsRadiosinline" value="男" checked>性别：男</label>
<label class="radio-inline"><input type="radio" name="optionsRadiosinline" value="女">性别：女</label>
</div>
三、表单元素-输入控件尺寸：
.input-lg 最大 input-sm 较小 form-group-lg 最大 form-group-sm 较小
四、表单元素-输入框组
.input-group输入框组，在<div>上 input-group-addon 输入框插件，在<span>元素上
把该 <span> 放置在 <input> 元素的前面或者后面。 输入框尺寸 input-group-*(lg 、sm)
<div style="padding: 100px 100px 10px;">
<form class="bs-example bs-example-form" role="form">
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="twitterhandle">
</div>
<br>
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
</div>
<br>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
</div>
</form>
</div>
五、表单元素-按钮
.btn 表示按钮样式，用于<a>、<input>或<button>，考虑兼容性问题，推荐应用到<button>元素
.btn-default 默认样式(很少用) .btn-info 一般信息（少用） .btn-warning 警告信息(少用)
.btn-success 成功(常用，用于完成某个操作，例如：保存) .btn-danger 危险（常用，用于删除）
.btn-primary 首先样式（常用，用于一般性动作，例如：登录、注册） .btn-link 链接（几乎不用）
.btn-lg 大按钮/ sm 小按钮/xs 超小按钮 .btn-block 100%填充
<div class="btn-group"> 包裹按钮，形成一组 按钮组大小， .btn-group-* (lg、sm、xs)
data-loading-text="加载时的信息" button("loading") 加载状态 button('reset') 状态重置
复选框组：
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="checkbox"> 选项 1
</label>
<label class="btn btn-primary">
<input type="checkbox"> 选项 2
</label>
<label class="btn btn-primary">
<input type="checkbox"> 选项 3
</label>
</div>
单选按钮组：
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="options" id="option1"> 选项 1
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2"> 选项 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3"> 选项 3
</label>
</div>
自定义复选框和单选按钮组样式：
<style type="text/css">
.btn-primary {
color: #666 !important;
background-color: #fff !important;
border-color: #555 !important;
outline: none !important;
box-shadow: none !important;
transition: all .6s ease-in-out;
}
.btn {
border-radius: 0;
outline: none;
，
}
.btn-primary.active {
color: #f44336!important;
background-color: #fff!important;
border-color: #f44336!important;
box-shadow: none!important;
outline: none!important;
}
</style>