Boostrap入门+样式学习--叁--

11. 基础表单

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

• 类名 form-horizontal
  水平表单风格（标签居左，表单控件居右）

• 类名form-inline
  将表单的控件都在一行内显示

• 表单控件(输入框input)
  单行输入框，常见的文本输入框，也就是input的type属性值为text。在Bootstrap中使用input时也必须添加type类型，如果没有指定type类型，将无法得到正确的样式，因为Bootstrap框架都是通过input[type=“?”](其中?号代表type类型，比如说text类型，对应的是input[type=“text”])的形式来定义样式的。为了让控件在各种表单风格中样式不出错，需要添加类名“form-control”

• 表单控件(下拉选择框select)
  多行选择设置multiple属性的值为multiple<select multiple class="form-control">

• 表单控件(文本域textarea)
  文本域和原始使用方法一样，设置rows可定义其高度，设置cols可以设置其宽度。但如果textarea元素中添加了类名“form-control”类名，则无需设置cols属性。因为Bootstrap框架中的“form-control”样式的表单控件宽度为100%或auto。

<form role="form">
  <div class="form-group">
    <textarea class="form-control" rows="3"></textarea>
  </div>
</form>

• 表单控件(复选框checkbox和单选择按钮radio)
  1、不管是checkbox还是radio都使用label包起来了
  2、checkbox连同label标签放置在一个名为“.checkbox”的容器内
  3、radio连同label标签放置在一个名为“.radio”的容器内
  在Bootstrap框架中，主要借助“.checkbox”和“.radio”样式，来处理复选框、单选按钮与标签的对齐方式。

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

• 表单控件(按钮)
  

• 表单控件大小
  1、input-sm:让控件比正常大小更小
  2、input-lg:让控件比正常大小更大
  这两个类适用于表单中的input，textarea和select控件，具体使用如下：

<input class="form-control input-lg" type="text" placeholder="添加.input-lg，控件变大">
<input class="form-control" type="text" placeholder="正常大小">
<input class="form-control input-sm" type="text" placeholder="添加.input-sm，控件变小">

• 表单控件状态(焦点状态)
  焦点状态是通过伪类“:focus”来实现

• 表单控件状态(禁用状态)
  只需要在需要禁用的表单控件上加上“disabled”即可

<input class="form-control" type="text" placeholder="表单已禁用，不能输入" disabled>

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

• 表单控件状态(验证状态)
  1、.has-warning:警告状态（黄色）
  2、.has-error：错误状态（红色）
  3、.has-success：成功状态（绿色）
  使用的时候只需要在form-group容器上对应添加状态类名。
  很多时候，在表单验证的时候，不同的状态会提供不同的 icon，比如成功是一个对号（√），错误是一个叉号（×）等。在Bootstrap框中也提供了这样的效果。如果你想让表单在对应的状态下显示 icon 出来，只需要在对应的状态下添加类名“has-feedback”。请注意，此类名要与“has-error”、“has-warning”和“has-success”在一起：

<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="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" id="inputWarning1" placeholder="警告状态">
    <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
  </div>
  <div class="form-group has-error has-feedback">
    <label class="control-label" for="inputError1">错误状态</label>
    <input type="text" class="form-control" id="inputError1" placeholder="错误状态">
    <span class="glyphicon glyphicon-remove form-control-feedback"></span>  
  </div>

   <div class="form-group has-error has-feedback">
    <label class="control-label" for="inputError1">email地址</label>
    <input type="text" class="form-control" id="inputError1" placeholder="错误状态">
    <span class="glyphicon glyphicon-remove form-control-feedback"></span>  
  </div>

</form>

在 Bootstrap 的小图标都是使用@font-face来制作（后面的内容中将会着重用一节内容来介绍）。而且必须在表单中添加了一个 span 元素

• 表单提示信息
  平常在制作表单验证时，要提供不同的提示信息。在Bootstrap框架中也提供了这样的效果。使用了一个help-block样式，将提示信息以块状显示，并且显示在控件底部。help-inline让提示信息显示在控件的后面，也就是同一水平显示

  12.按钮

 <button class="btn" type="button">基础按钮.btn</button>  
   <button class="btn btn-default" type="button">默认按钮.btn-default</button> 
   <button class="btn btn-primary" type="button">主要按钮.btn-primary</button> 
   <button class="btn btn-success" type="button">成功按钮.btn-success</button> 
   <button class="btn btn-info" type="button">信息按钮.btn-info</button> 
   <button class="btn btn-warning" type="button">警告按钮.btn-warning</button> 
   <button class="btn btn-danger" type="button">危险按钮.btn-danger</button> 
   <button class="btn btn-link" type="button">链接按钮.btn-link</button> 

- 按钮大小

• 块状按钮
  Bootstrap框架中提供了一个类名“btn-block”。按钮使用这个类名就可以让按钮充满整个容器，并且这个按钮不会有任何的padding和margin值。在实际当中，常把这种按钮称为块状按钮。

• 按钮状态——禁用状态
  方法1：在标签中添加disabled属性
  方法2：在元素标签中添加类名“disabled”

<button class="btnbtn-primary btn-lgbtn-block" type="button" disabled="disabled">通过disabled属性禁用按钮</button>
<button class="btnbtn-primary btn-block disabled" type="button">通过添加类名disabled禁用按钮</button>
<button class="btnbtn-primary btn-smbtn-block" type="button">未禁用的按钮</button>