bootstrap

3-1 基础表单

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

　　在Bootstrap框架中，通过定制了一个类名`form-control`，也就是说，如果这几个元素使用了类名“form-control”，将会实现一些设计上的定制效果。　　

　　1、宽度变成了100%

　　2、设置了一个浅灰色（#ccc）的边框

　　3、具有4px的圆角

　　4、设置阴影效果，并且元素得到焦点之时，阴影和边框效果会有所变化

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

3-2内联表单

　　在Bootstrap框架中实现内联表单,只需要在<form>元素中添加类名“form-inline”即可。如果你要在input前面添加一个label标签时，会导致input换行显示。如果你必须添加这样的一个label标签，并且不想让input换行，你需要将label标签也放在容器“form-group”中.

3-3表单控件(输入框input)

　　每一个表单都是由表单控件组成。离开了控件，表单就失去了意义。在Bootstrap中使用input时也必须添加type类型，如果没有指定type类型，将无法得到正确的样式，因为Bootstrap框架都是通过input[type=“?”](其中?号代表type类型，比如说text类型，对应的是input[type=“text”])的形式来定义样式的。

 3-4表单控件(复选框和单选框按钮水平排列)

　　复选框和单选按钮有时需要水平排列:

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

*要让控件在焦点状态下有样式效果，需要给控件添加类名“form-control”

3-5表单控件状态(禁用状态)

 　　Bootstrap框架的表单控件的禁用状态和普通的表单禁用状态实现方法是一样的，在相应的表单控件上添加属性“disabled”。Bootstrap框架做了一些样式风格的处理：使用方法为：只需要在需要禁用的表单控件上加上“disabled”即可

3-6 form-group的作用

基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤：

• 向父 <form> 元素添加 role="form"。
• 把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
• 向所有的文本元素 <input>、<textarea> 和 <select> 添加 class ="form-control" 。
• 3-7 control-label的作用
  

• col-sm-2指的是12栅格系统中在小屏幕下占两列， control-label则指的是控制标签(label)样式的一个类，一般用于控制表单控件里的样式

  例如这个代码：

  <form class="form-horizontal" role="form">

      <div class="form-group">

              <label for="password" class="col-sm-2 control-label">密码</label>

              <div class="col-sm-10">

                      <input type="password" class="form-control" id="pwd" placeholder="请输入你的密码“>
  

              </div>
  

      </div>
  

  </form>

  意思就是密码这两个字占两列，密码输入框占10列，一共占12列。如果不加control-label，这两个元素就总是对不齐

  
  

•