bootstrap丰富的html标签和css类(二)表单、按钮、图片和其他辅助类

一、表单

1.1 垂直表单

1. 将form标签的role属性值设置成form。
2. form内部的每一对标签（label）和控件（input、textarea、select）都需要放在一个继承了form-group这个类的class里面以获取最佳间距。
3. 所有的input、textarea、select都需继承form-control这个类以获得更加美化的控件。
4. 其他可以继承的类：help-block、checkbox、btn-default

<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>
      <input type="checkbox">请打勾
    </label>
  </div>
  <button type="submit" class="btn btn-default">提交</button>
</form>

效果如下：

1.2 内联表单

其他步骤同上，但是form标签需要继承form-inline这个类，效果如下：

label标签继承.sr-only类可以隐藏标签名。

1.3 水平表单

1. ** form标签继承form-horizontal类。**
2. form内部的每一对标签和空间需要放到一个继承了from-group的div中。
3. 所有的input、textarea、select都需继承form-control这个类以获得更加美化的控件。
4. ** 除此之外，label标签还需要继承control-label这个类。**
   

1.4 支持的表单控件

1. 输入框（input）

• 输入框的type有很多种：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel、color
• 都需要继承form-control这个类。

2. 文本框（Textarea）

• 常用于多行输入
• 可以通过改变row属性来设置高度,例如<textarea class="form-control" rows=3></textarea>。

3. 单选框（Checkbox）和复选框（Radio）

• 他们本质上都是input标签，只不过是将type属性分别改成了checkbox和radio
• 通常作为单选框或者复选框的input标签是放在label标签内，例如：

<div class="checkbox">
	<label>
		<input type="checkbox" value="">选项一</input>
	</label>
	<label>
		<input type="checkbox" value="">选项二</input>
	</label>
</div>

若需要获得内联复选框或者单选框

<div class="checkbox">
	<label class="checkbox-inline">
		<input type="checkbox" value="">选项一</input>
	</label>
	<label class="checkbox-inline">
		<input type="checkbox" value="">选项二</input>
	</label>
</div>

4. 选择框

• 通过select标签实现，而每一个选择的标签是option。
• 同时，选择框作为空间之一，select标签也需要继承form-control这个类。
• 若允许用户选择多个选项，则可以为select标签设置multiple="multiple"。

5. 静态控件
   静态控件是用于作为某一个label的示例的，需要继承form-control-static这个类而不是from-control。

6. 表单控件的状态

• 焦点状态，当输入框 input 接收到 :focus 时，输入框的轮廓会被移除，同时应用 box-shadow。
• 禁用的输入框：通过在input上架disabled属性实现，例如<input class="form-control disabled>"。
• 禁用的字段集：通过对field添加disabled属性禁用fieldset内的所有控件。
• 通过每一对标签和空间的父div继承has-warning、has-error或 has-success来实现，例如：

<form role="role">
	<div class="form-group has-error">
		<label class="control-label">有错误</label>
		<div class="col-sm-10">
			<input type="text" class="form-control">
		</div>
	</div>
<form>

7. 表单控件的尺寸

• 高度：各种控件都可以通过继承input-lg、input-sm来控制。
• 宽度：各种控件都可以通过继承col-lg-*类似的类来控制。

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>

8. 表单组的尺寸

• 包含一对标签和空间的div称为表单组。
• form标签继承了form-horizontal之后表单组内的元素是水平呈现。
• 为表单组的div继承form-group-lg或form-group-sm来调整表单组的尺寸。

9. 列的宽度

<div class="row">
  <div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
</div>

10. 表单帮助文档
    通过继承了help-block类的span来实现

二、按钮

2.1 基本样式

任何继承了btn类的a、button或者input标签都会继承圆角灰色按钮的默认外观。
还有大量的可继承的其他样式

类	描述
btn	添加基本样式
btn-default	默认按钮
btn-primary	原始按钮样式
btn-success	成功操作的样式
btn-info	点击按钮后会弹出提示信息
btn-waring	需要谨慎操作的按钮
btn-danger	是一个危险动作的按钮
btn-link	按钮看起来是一个连接，但是仍有按钮的特性
btn-lg	大按钮
btn-sm	小按钮
btn-xs	超小按钮
btn-block	块级按钮（拉伸至父元素100%的宽度）
active	按钮被点击
disabled	禁用按钮

例如：

<!-- 标准的按钮 -->
<button type="button" class="btn btn-default">默认按钮</button>
<!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
<button type="button" class="btn btn-primary">原始按钮</button>
<!-- 表示一个成功的或积极的动作 -->
<button type="button" class="btn btn-success">成功按钮</button>
<!-- 信息警告消息的上下文按钮 -->
<button type="button" class="btn btn-info">信息按钮</button>
<!-- 表示应谨慎采取的动作 -->
<button type="button" class="btn btn-warning">警告按钮</button>
<!-- 表示一个危险的或潜在的负面动作 -->
<button type="button" class="btn btn-danger">危险按钮</button>
<!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 -->
<button type="button" class="btn btn-link">链接按钮</button>

2.2 按钮大小

任何继承了btn类的a、button或者input标签都会继承圆角灰色按钮的默认外观。还可以通过如下的类来控制按钮的大小。

类	描述
btn-lg	大按钮
btn-sm	小按钮
btn-xs	超小按钮
btn-block	块级按钮（拉伸至父元素100%的宽度）

<p>
  <button type="button" class="btn btn-primary btn-lg">大的原始按钮</button>
  <button type="button" class="btn btn-default btn-lg">大的按钮</button>
</p>
<p>
  <button type="button" class="btn btn-primary">默认大小的原始按钮</button>
  <button type="button" class="btn btn-default">默认大小的按钮</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">小的原始按钮</button>
  <button type="button" class="btn btn-default btn-sm">小的按钮</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">特别小的原始按钮</button>
  <button type="button" class="btn btn-default btn-xs">特别小的按钮</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-lg btn-block">块级的原始按钮</button>
  <button type="button" class="btn btn-default btn-lg btn-block">块级的按钮</button>

2.3 按钮状态

可以通过继承active来设置当前按钮的状态是**状态（按压状态）；可以通过input的disabled属性和a标签继承disabled类来设置当前按钮是禁用状态。

<p>
   	<button type="button" class="btn btn-primary btn-lg ">原始按钮</button>
   	<button type="button" class="btn btn-primary btn-lg active">**的原始按钮</button>
	<button type="button" class="btn btn-primary btn-lg" disabled="disabled">禁用的原始按钮</button>
</p>
<p>
  <a href="#" class="btn btn-default btn-lg" role="button">链接</a>
  <a href="#" class="btn btn-default btn-lg disabled" role="button">禁用链接</a>
</p>

2.4 多样化的按钮标签

可以将a、button、input都设置为按钮，只需要让标签继承btn和其他样式类

2.5 按钮组

通过一个继承了btn-group的div将多个继承了btn类的button包在一起，按钮会更加紧凑。Alt text
外层div还可以继承btn-group-lg|sm|xs来控制按钮组的大小。

若需要垂直的按钮组，只需让最外层的div继承btn-group-vertical即可。

若需要按钮组适应任何分辨率的屏幕，最外层div只需要再额外继承btn-group-justified即可。若div内部的不是a标签按钮而是button标签按钮，每一个button标签需要被一个继承了btn-group的div包起来。

<div class="btn-group btn-group-justified">
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Apple</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Samsung</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Sony</button>
  </div>
</div>

若需要有下拉菜单的按钮组，则button需要继承dropdown-toggle类，并设置data-toggle为dropdown。后面加上继承了dropdown-menu的ul标签和它包住的li标签即可。

<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
	<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
	<li><a href="#">Tablet</a></li>
    <li><a href="#">Smartphone</a></li>
</ul>

三、图片

可以用来继承的类：

1. img-rounded:圆角图片，实际上应用了border-radius:6px。
2. img-circle:圆形图片，实际上应用了border-radius:50%。
3. img-thumbnail:相框图片，实际上应用了padding和灰色边框。
4. img-responsive：响应式图片，不论如何变化屏幕分辨率，图片都能很好扩展到父元素。实际上是应用了max-width:100%和height:auto。

四、其他的辅助类