复选框
复选框组
将一组复选框或单选按钮组合成一组并排放置的Bootstrap按钮
bootstrap.min.cssjquery.min.jsbootstrap.min.jsdiv.btn-group[data-toggle=buttons]label.btn.btn-default.activeinput[type=checkbox]{Option 1｝label.btn.btn-defaultinput[type=checkbox]{Option 2}label.btn.btn-defaultinput[type=checkbox]{Option 3}------------lable 里面 有个 input checkboxdata-toggle=buttons 用来切换复选框样式类active checkbox 预选
表单布局
垂直表单
水平表单
内联表单
垂直表单 (在顶部以左对齐标签堆叠)
div.bs-exampleformdiv.form-grouplabel[for=inputEmail]{Email}input#inputEmail.form-control[type=email][placeholder=Email]div.form-grouplabel[for=inputPassword]{Password}input#inputPassword.form-control[type=password][placeholder="password"]div.checkboxlabelinput[type=checkbox]Remember mebutton.btn.btn-primary[type=submit]{Login}
----------------------
placeholder='Email' 框里面的提示信息 'Email'
autocomplete='off' 关闭(存储填写记录)
.form-control 默认宽度是100%；全角元素？
.form-group 标签和对应的输入 需要一个这个div 类？
```$(".myDropdownHandle").dropdown('toggle'); //???
form.form
div.form-group
label[for=nameField]{Name}
input#nameField.form-control[type=text][placeholder=Your Name]
div.form-group
label[for=emailField]{Email}
input#emailField.form-control[type=email][placeholder=Your Email]
div.form-group
label[for=phoneField]{Phone}
input#phoneField.form-control[type=text][placeholder=Your Phone Number]
div.form-group
lable[for=descField]{Dedcription}
input#descField.form-control[type=text][placeholder=Your Comments]
button.btn.btn-primary[type=submit]{submit}
button.btn.btn-default[type=reset]{Reset}
##### 水平表单
<img src="//tva3.sinaimg.cn/large/005zbIM7ly1g0uc3qi2zoj30i607qaa7.jpg" alt="img">
$(".myDropdownHandle").dropdown('toggle'); //?/?
div.bs-example
form.form-horizontal
div.form-group
label.col-xs-2[for=nameField]{Name}
div.col.xs-10
input#nameField.form-control[placeholder=Your Name][type=text]
div.form-group
同上
div.form-group
同上
div.form-group
同上
button 同上
button
与垂直表单相比，多了
form.form-horizontal
label.col-xs-2 div.col.xs-10
##### 内联表单 Δ
<img src="//tva3.sinaimg.cn/large/005zbIM7ly1g0uc55kjdbj30mp02vaa0.jpg" alt="img">
<img src="//tva3.sinaimg.cn/large/005zbIM7ly1g0uc5m7cr8j30jg06umx8.jpg" alt="img">
$('.myDropdownHandle').dropdown('toggle') //?????
div.well.well-sm
form.form-inline
div.form-group
input#emailField.form-control[placeholder=Enter email[type=email]
div.form-group
input#passwordField.form-control[placeholder=Password][type=password]
div.checkbox
label
input[type=checkbox]Rember me
button.btn.btn-primary[type=submit]{Sigb in}
与垂直表单的区别：
div.well.well-sm 引起内容凹陷的容器
form.form-inline 表单所有元素是内联的，向左对齐的，标签是并排的
#### 表单控件尺寸
##### 高度输入与选择框 `input-xx`
form
div.row
div.col-xs-6
input.form-control.input-lg[type=text][placeholder=Larger input]
div.col-xs-6
select.form-control.input-lg
option{Larger select}
br
div.row
input-lg input input-sm
<img src="//tva3.sinaimg.cn/mw690/005zbIM7ly1g113587spwj30tr04o74b.jpg" alt="img">##### 尺寸与网格列尺寸相匹配
form
div.row
div.col-xs-3
input.form-control[type=text]
div.col-xs-4
input.form-control[type=text]
div.col-xs-5
input.form-control[type=text]
div.row
textarea....
div.row
select.form-control
option{Select}
<img src="//tva3.sinaimg.cn/mw690/005zbIM7ly1g113nemba9j30jv05b0sm.jpg" alt="img">##### 输入组的高度 `input-group-xx`
css js
div.row
div.col-xs-4
div.input-group.input-group-lg
span.input-group-addon
span.glyphicon.glyphicon-user
input.form-control[type=text]
div.col-xs-4
div.input-group.input-group-lg
span.input-group-addon
input[type=checkbox]
input.form-control[type=text]
div.col-xs-4
div.input-group.input-group-lg
div.input-group-btn
button.btn.btn-default[tabindex=-1]{Action}
button.btn.btn-default.dropdown-toggle[data-toggle=dropdown]
span.caret
span.sr-only{Toggle Dropdown}
ul.dropdown-menu
li>a[href=#]{Action}
li>a[href="#"{Another action]
li.divider
li>a[href=#]{Separated link}
input.form-control[type=text]
div.col-xs-4
...
...
<img src="//tva3.sinaimg.cn/large/005zbIM7ly1g11533yrd8j30m304z0ss.jpg" alt="img">#### 表单禁用和只读
##### 禁用表单控件
body
input.form-control[type=text][placeholder=Disabled input here...][disabled]
disabled
<img src="//tva3.sinaimg.cn/large/005zbIM7ly1g115dejtb5j305500ra9t.jpg" alt="img">
##### 禁用字段集
通过向 <fieldset> 元素中添加 disabled 属性来禁用字段集中的所有表单控件
form.form-horizontal
fieldset[disabled=disabled]
div.form-group
label.control-label.col-xs-2[for=inputEmail]{Email}
div.col-xs-10
input#inputEmail.form-control[type=email][placeholder=Email]
div.form-group
label.control-label.colxs-2[for=inputPassword]{password}
div.col-xs-10
input#inputPassword.form-control[type=password][placeholder=Passowrd]
div.form-group
div.col-xs-offset-2.col-xs-10
div.checkbox
lable>input[type=checkbox]^{Rember me}
div.form-group
div.col-xs-offset-2.col-xs-10
button.btn.btn-primay[type=submit}{Login}
<img src="//tva3.sinaimg.cn/large/005zbIM7ly1g115frk7yij30ke055dfs.jpg" alt="img">##### 只读
div.bs-example
form
input.form-control[placeholder="Readonly input"][readonly=readonly]
<img src="//tva3.sinaimg.cn/large/005zbIM7ly1g1177wkwplj308d01ht8h.jpg" alt="img">#### 表单帮助
##### helper类
用户在输入字段中输入无效值时候显示一些自定义文本。(使用带help-block类的span元素)
form
input.form-control[type=text]
span.help-block{A block of text that ...}
不知道有什么作用
<img src="//tva3.sinaimg.cn/mw690/005zbIM7ly1g117fcab07j30do02ja9x.jpg" alt="img">##### 表单静态控件
在水平表单布局中的表单标签旁放置纯文本，请在\<p>元素上使用 `.form-control-static`
form.form-horizontal
div.form-group
label.control-label.col-xs-2[for=inputEmail]{Email}
div.col-xs-10
p.form-control-static{harrypotter@mail.com}
div.form-group
label.control-label.col-xs-2[for=inputPassword]{Password}
div.col-xs-10
p#inputPassword.form-control[type=password][placeholder=Password]
div.form-group
div.col-xs-offset-2.col-xs-10
label>input[type=checkbox]^{Remember me}
div.form-group
div.col-xs-offset-2.col-xs-10
button.btn.btn-primary[type=submit]{Login}
<img src="//tva3.sinaimg.cn/large/005zbIM7ly1g117gspzutj30hp05amx5.jpg" alt="img">#### 表单验证
##### 三个验证状态
- `has-success`将使标签文本和边框字段的颜色变为绿色
- `has-error`将使用棕色
- `has-warning`将使用深红色
- 会将颜色应用与`form-control`,`control-label`和`help-block`类元素。
form.form-horizontal
div.form-group.has-success
label.col-xs-2.control-label[for=inputSuccess]{Username}
div.col-xs-10
input#inputSuccess.form-control[placeholder=Input with success][type=text]
span.help-block{Username is available}
div.form-group.has-worning
...
div.form-group.has-error
...
<img src="//tva3.sinaimg.cn/large/005zbIM7ly1g123aagvwxj30kv06zwen.jpg" alt="img">##### feedback图标
在`.form-group`和`glyphicon`上使用类 `.has-feedback`
form.form-horizontal
div.form-group.has-success.has-feedback
label.control-label.col-xs-2[for=inputSuccess]{Usrname}
div.col-xs-10
input#[inputSuccess].form-control[placeholder=input with success][type=text]
span.glyphicon.glyphicon-ok.formcontrol-feedback
span.help-block{Username is availabel}
div.form-group.haswarning-has-feedback
...
span.glyphicon.glyphicon-warning-sign.form-control-feedback
...
idv.form-group.has-error.has-feedback
...
span.glyphicon.glyphicon-remove.form-control-feedback
...
<img src="//tva3.sinaimg.cn/large/005zbIM7ly1g123laem2aj30io06udg0.jpg" alt="img">#### 单选按钮
一组按钮仅一个可选
script ..attr('checked')=> undefind
('input').map(function(){if((this).is(':checked')){
alert($(this).attr('id'));
}
});
css js
div.btn-group.data-toggle=buttons
label.btn.btn-info.active
input[type=radio][name=options][cehcked=checked]{Option 1}
label.btn.btn-info
input[type=radio][name=options]{Option 2}
label.btn.btn-info
input[type=radio][name=options]{Option 3}
点击一个按钮后，不可取消，只能切换
data-toggle=buttons active checked
[`data-toggle`属性](http://www.runoob.com/bootstrap/bootstrap-button-plugin.html)</br>
<img src="//tva3.sinaimg.cn/large/005zbIM7ly1g1243akm53j307801lq2s.jpg" alt="img">
