留坑待用
二、表单
文本输入框
下拉选择框
单选按钮
文本域和按钮
<form role="form" class="form-horizontal">
<div class="form-group">
<label for="exampleInputEmail1">邮箱：</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入您的邮箱地址">
</div>
<div class="form-group">
<label for="exampleInputPassword1">密码：</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入您的邮箱密码">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 记住密码
</label>
</div>
<button type="submit" class="btn btn-default">进入邮箱</button>
</form>
| 属性 | 属性值 | 作用标签 | 说明 |
|---|---|---|---|
| role= | “form” | <form> |
告诉辅助设备（如屏幕阅读器）这个元素所扮演的角色是个表单 |
| class= | “form-control” | <input> <select> <textarea> |
1、宽度变成了100% 2、设置了一个浅灰色（#ccc）的边框 3、具有4px的圆角 4、设置阴影效果，并且元素得到焦点之时，阴影和边框效果会有所变化 5、设置了placeholder的颜色为#999 |
| for= | “male” | <label> |
for 属性规定 label 与哪个表单元素绑定。 |
1.水平表单内联表单
| 属性 | 属性值 | 作用标签 | 说明 |
|---|---|---|---|
| class= | “form-horizontal” | <form> |
标签居左，表单控件居右 |
| class= | “form-inline” | <form> |
将表单的控件都在一行内显示 |
| class= | “sr-only” | <label> |
在label标签运用了一个类名“sr-only”，标签没显示就是这个样式将标签隐藏了。 |
如果你要在input前面添加一个label标签时，会导致input换行显示。如果你必须添加这样的一个label标签，并且不想让input换行，你需要将label标签也放在容器“form-group”中，如：
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
</div>
<div class="form-group">
<inputtype="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
</div>2.表单控件
| 表单控件 | type= |
|---|---|
输入<input> |
“email”“password”等 复选框 "checkbox"单选 "radio" |
下拉<select> |
multiple 下拉展开了 |
文本域<textarea> |
文本域和原始使用方法一样，设置rows可定义其高度，设置cols可以设置其宽度。 但如果textarea元素中添加了类名“form-control”类名，则无需设置cols属性。 因为Bootstrap框架中的“form-control”样式的表单控件宽度为100%或auto。 |
2.1复选框和单选按钮水平排列
<label class="checkbox-inline"> 水平排列
<label class="radio-inline">水平排列
<form role="form">
<div class="form-group">
<label class="checkbox-inline"> //checkbox-inline 水平排列
<input type="checkbox" value="option1">游戏
</label>
<label class="checkbox-inline">
<input type="checkbox" value="option2">摄影
</label>
<label class="checkbox-inline">
<input type="checkbox" value="option3">旅游
</label>
</div>
<div class="form-group">
<label class="radio-inline">//radio-inline 水平排列
<input type="radio" value="option1" name="sex">男性
</label>
<label class="radio-inline">
<input type="radio" value="option2" name="sex">女性
</label>
<label class="radio-inline">
<input type="radio" value="option3" name="sex">中性
</label>
</div>
</form><form role="form">
<div class="form-group">
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</form>
3.按钮
链接按钮 btn btn-link
多标签支持
<button class="btn btn-default" type="button">button标签按钮</button>
<input type="submit" class="btn btn-default" value="input标签按钮"/>
<a href="##" class="btn btn-default">a标签按钮</a>
<span class="btn btn-default">span标签按钮</span>
<div class="btn btn-default">div标签按钮</div>为了避免浏览器兼容性问题，个人强烈建议使用button或a标签来制作按钮。
button大小
大型|btn-lg
小型|btn-sm
超小|btn-xs
块状按钮 btn-block
禁用按钮
<button class="btn btn-primary btn-lg btn-block" type="button" disabled="disabled">通过disabled属性禁用按钮</button>
<button class="btn btn-primary btn-block disabled" type="button">通过添加类名disabled禁用按钮</button>4.表单控件大小
<div class="col-xs-4">
<input class="form-control input-lg" type="text" placeholder=".col-xs-4">//以下控制大小
</div>
5.表单控件状态
1.焦点状态
焦点状态是通过伪类“:focus”来实现。
Bootstrap框架中表单控件的焦点状态删除了outline的默认样式，重新添加阴影效果。
2.禁用状态
2.1只需要在需要禁用的表单控件上加上“disabled”即可：
<input class="form-control" type="text" placeholder="表单已禁用，不能输入" disabled>2.2如果fieldset设置了disabled属性，整个域都将处于被禁用状态。
<form role="form">
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput">禁用的输入框</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入">
</div>
<div class="form-group">
<label for="disabledSelect">禁用的下拉框</label>
<select id="disabledSelect" class="form-control">
<option>不可选择</option>
</select>
</div>
<div class="checkbox">
<label>
<input type="checkbox">无法选择
</label>
</div>
<button type="submit" class="btnbtn-primary">提交</button>
</fieldset>
</form>
2.3如果legend中有输入框的话，这个输入框是无法被禁用的
<form role="form">
<fieldset disabled>
<legend><input type="text" class="form-control" placeholder="显然我颜色变灰了，但是我没被禁用，不信？单击试一下" /></legend>
…
</fieldset>
</form>3.验证状态
<form role="form">
<div class="form-group has-success">
<label class="control-label" for="inputSuccess1">成功状态</label>
<input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
</div>
</form>从代码中可知has-success control-label
另外还有 has-warning has-error
带有icon
<form role="form">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess1">成功状态</label>
<input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
<span class="glyphiconglyphicon-ok form-control-feedback"></span>
</div>
</form>从代码中可知has-success has-feedback``control-label
<span class="glyphiconglyphicon-ok form-control-feedback"></span>成功
另外还有 has-warning has-error
<span class="glyphicon glyphicon-remove form-control-feedback"></span>错误
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>警告
6.表单提示信息
<form role="form">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess1">成功状态</label>
<input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
<span class="help-block">你输入的信息是正确的</span>
<span class="glyphiconglyphicon-ok form-control-feedback"></span>
</div>
…
</form>
从代码中可知多了一个<span class="help-block">
7.图像
1、img-responsive：响应式图片，主要针对于响应式设计
2、img-rounded：圆角图片
3、img-circle：圆形图片
4、img-thumbnail：缩略图片
8.图标
<span class="glyphicon glyphicon-search"></span>
<span class="glyphicon glyphicon-asterisk"></span>
<span class="glyphicon glyphicon-plus"></span>
<span class="glyphicon glyphicon-cloud"></span>