3. 表单

1.  基础表单

      表单中常见的元素主要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。

• 仅对表单内的fieldset、legend、label标签进行了定制   bootstrap.css文件第1631行~第1652行
• 给input,select等元素添加类：.form-control 会实现以下功能：

          1、宽度变成了100%　
          2、设置了一个浅灰色（#ccc）的边框       
          3、具有4px的圆角
          4、设置阴影效果，并且元素得到焦点之时，阴影和边框效果会有所变化

          5、设置了placeholder的颜色为#999

2.  水平表单（ .form-horizontal ）

    Bootstrap框架默认的表单是垂直显示风格，但很多时候我们需要的水平表单风格（标签label居左，表单控件居右）

  使用方法：  1、在<form>元素是使用类名“form-horizontal”。
                      2、配合Bootstrap框架的网格系统。

  实现效果： 1、设置表单控件padding和margin值。
                     2、改变“form-group”的表现形式，类似于网格系统的“row”。

<!-- 需在大屏幕下才会水平显示，<768px时，会成垂直排列 -->
<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="请输入您的邮箱地址">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="请输入您的邮箱密码">
    </div>
  </div>
</form>

3.  内联表单（ .form-inline ）

      将表单的控件都在一行内显示。 （在宽屏下看效果）

<form class="form-inline" role="form">
  <div class="form-group"> 
<!-- sr-only：隐藏样式
   这里输入控件设置label标签，是为了屏幕阅读器将正确识别，方便残障人员 -->
    <label class="sr-only" for="exampleInputEmail2">邮箱</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="请输入你的邮箱地址">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword2">密码</label>
    <input type="password" class="form-control" id="exampleInputPassword2" placeholder="请输入你的邮箱密码">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> 记住密码
    </label>
  </div>
  <button type="submit" class="btn btn-default">进入邮箱</button>
</form> 

济：如果你要在input前面添加一个label标签时，会导致input换行显示。
如果你必须添加这样的一个label标签，并且不想让input换行，你需要将label标签也放在容器“form-group”中

4.  表单控件（一般控件都要加上类： .form-conrol）

•  单行输入框input   添加.form-control类 来保证控件风格样式
• 下拉选择框select   同原始用法一样，可设置multiple属性值为multiple，实现多选（按住ctrl 可多选）
• 文本域         有.form-control类名的话，就可以不用再使用cols属性，但可以使用rows(多行)设置高度
• 复选框checkbox / 单选择按钮radio          分别用“.checkbox”和“.radio”样式的div容器把label和input包起来，以解决对齐问题   
  

<form role="form">
  <h3>案例1</h3>
  <div class="checkbox">
  <!-- 用label标签包住，可以在选择文字时也勾选中勾选框 -->
    <label>
      <input type="checkbox" value="">记住密码
    </label>
  </div>
  <div class="radio">
      <input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>喜欢
    </label>
  </div>
    <div class="radio">
    <label>
      <input type="radio" name="optionsRadios" id="optionsRadios2" value="hate">不喜欢
    </label>
  </div>
</form>

复选框和单选按钮水平排列
      1、如果checkbox需要水平排列，只需要在label标签上添加类名“checkbox-inline”
      2、如果radio需要水平排列，只需要在label标签上添加类名“radio-inline”

<form role="form">
    <div class="form-group">
        <label class="radio-inline">
            <input type="radio" name="sex" />日语
        </label>
        <label class="radio-inline">
            <input type="radio" name="sex" />英语
        </label>
        <label class="radio-inline">
            <input type="radio" name="sex" />西班牙语
        </label>
    </div>
</form>

5  表单控件(按钮)

制作按钮通常使用下面代码来实现
  ☑  input[type="submit"]
  ☑  input[type="button"]
  ☑  input[type="reset"]
  ☑  <button>
在Bootstrap框架中的按钮都是采用<button>来实现。

6.  表单控件大小

 通过以下两个类名控制表单控件高度 （适用于input，textarea和select控件）

1、input-sm:      让控件比正常大小更小
2、input-lg:        让控件比正常大小更大

上述类名只能控制控件高度，还想改变宽度时，可结合网格系统一起用。

<!-- 在使用了form-horizontal时，它会改变form-group的表现形式为类似风格的row -->
<!-- role的功能相当于语义化：如<div role="button"> 浏览器就认得这就是个按钮了 -->
<form role="form" class="form-horizontal">
	<div class="form-group">
	<!-- form-group 表示一组按钮，可以调整表单控件之间的距离 -->
	    <div class="col-xs-6"><input class="form-control" type="text" placeholder=".col-xs-6"></div>
	    <div class="col-xs-6"><input class="form-control" type="text" placeholder=".col-xs-6"></div>
	</div>
</form>

7.  表单控件状态(焦点状态)

 必须 给控件加上类 .form-control 才有:focus效果了。

8. 表单控件状态(禁用状态)

 在相应的表单控件上添加属性“disabled”

 如果fieldset设置了disabled属性，整个域都将处于被禁用状态。
 对于整个禁用的域中，如果legend中有输入框的话，这个输入框是无法被禁用的。

<form role="form">
  <fieldset disabled>
    <legend><input type="text" class="form-control" placeholder="显然我颜色变灰了，但是我没被禁用，不信？单击试一下" /></legend>
    <!-- 一个fieldset控件下只能有一个legend可以编辑-->
    <legend><input type="text" class="form-control" placeholder="legend是为 fieldset 中的标题定义对齐方式" /></legend>
    <legend><input type="text" class="form-control" placeholder="html4中已被废弃，且html5已经不支持" /></legend>
    <div class="form-group">
   <!--for是为了标明label所对应的哪个input，例如点击label可以让焦点跳到input上-->
      <label for="disabledTextInput">禁用的输入框</label>
      <input type="text" class="form-control" placeholder="禁止输入">
    </div>
  </fieldset>
</form>  

9.  表单验证的状态样式
1、.has-warning:警告状态（黄色）
2、.has-error：错误状态（红色）
3、.has-success：成功状态（绿色）
使用的时候只需要在form-group容器上对应添加状态类名。
想要结合icon一起表示状态时，只需在对应状态下添加类名 “has-feedback”. 请注意，此类名要与“has-error”、“has-warning”和“has-success”在一起

<form role="form">
  <div class="form-group has-success has-feedback">
  <!--源代码中有给<strong>has-success .control-label</strong>的类设置了颜色，所以label的字体颜色也变了.其它状态同理-->
    <label class="control-label" for="inputSuccess1">成功状态</label>
    <input type="text" class="form-control" placeholder="成功状态" >
    <!-- 还必须在表单加一个span标签放icon -->
    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
  </div>
  <div class="form-group has-warning has-feedback">
    <label class="control-label" for="inputWarning1">警告状态</label>
    <input type="text" class="form-control" placeholder="警告状态">
    <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
  </div>
 </form>

10.  表单提示信息
 制作表单验证时，用来提供不同的提示信息。
 使用一个"help-block"样式，将提示信息以块状显示，并且显示在控件底部。
 Bootstrap版本2中有个"help-inline"类，版本3则需要自己加，或者也可以借助网格系统实现

 <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="glyphicon glyphicon-ok form-control-feedback"></span>
  </div>
 </form>
<!-- 实现一行显示 -->
 <form role="form">
  <div class="form-group">
    <label class="control-label" for="inputSuccess1">成功状态</label>
    <div class="row">
      <div class="col-xs-6">
        <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
      </div>
       <span class="col-xs-6 help-block">你输入的信息是正确的</span>
    </div>  
 </form>

11.  按钮 ( <button>)

•  基本按钮  .btn 类
  
•  默认按钮  .btn-default　在基础按钮的风格的基础上做了些修改

12. 多标签支持

     可以通过给其它标签加上 .btn的类来制作按钮。 因浏览器兼容性问题，不推荐。

<a href="javascript:;" class="btn btn-default" >a标签的按钮</a> 

13.  按钮风格（定制风格）

  几种风格不同之处就是颜色不同，跟前面的表单验证状态样式有点类似。

 使用方法：只需要在基础按钮“.btn”基础上追加对应的类名即可实现。

14.  按钮大小
  类似于input一样，通过在基础按钮“.btn”的基础上追加类名来控制按钮的大小。
  另外，也可以和上面的风格样式搭配使用，但不能缺少.btn 样式

15.  块状按钮
 之前的是依靠按钮文本和padding的值来决定，或想让按钮占满整个父级宽度时，可以用 .btn-block来实现。包括其它标签制件出来的按钮。

    <button class="btn btn-block btn-primary btn-lg" type="button">大型按钮.btn-lg</button> 
    <div role="button" class="btn btn-success btn-block">div下的button</div>

16.  按钮状态——活动状态
 悬浮状态(:hover)，点击状态(:active)和焦点状态（:focus）
另：当按钮处理正在点击状态（也就是鼠标按下的未松开的状态），对于<button>元素是通过“:active”伪类实现(即不用特意加这个类名)，而对于<a>这样的标签元素则是通过添加类名“.active”来实现。

<a class="btn btn-default active" href="javascript:;">a标签</a>

17. 按钮状态——禁用状态

Bootstrap中禁用按钮的两种方式：

  方法1：在标签中添加disabled属性
  方法2：在元素标签中添加类名“disabled”

两者的主要区别是：

“.disabled”样式不会禁止按钮的默认行为，比如说提交和重置行为等。如果想要让这样的禁用按钮也能禁止按钮的默认行为，则需要通过JavaScript这样的语言来处理。对于<a>标签也存在类似问题，如果通过类名“.disable”来禁用按钮，其链接行为是无法禁止。而在元素标签中添加“disabled”属性的方法是可以禁止元素的默认行为的。（我用火狐49.0.1测试类名貌似也阻止了默认行为）

18.  图像

  图像样式风格
1、img-responsive：响应式图片，主要针对于响应式设计
2、img-rounded：圆角图片
3、img-circle：圆形图片
4、img-thumbnail：缩略图片

使用方法：只需要在<img>标签上添加对应的类名
设置图片大小：
 样式没有大小的设置，可通过控件窗口大小来实现。

 注意：
对于圆角图片和圆形图片效果，因为是使用了CSS3的圆角样式来实现的，所以注意对于IE8以及其以下版本不支持，是没有圆角效果的。

19.图标
原理：使用CSS3的@font-face属性配合字体来实现的icon效果。
用法：通过给元素添加“glyphicon”类名，再加上相应的图标样式“ .glyphicon-* ”即可实现。
  如果需要自己制作图标也是可以的，制作方法可以百度。