bootstrap对表单元素的修改

对于基础表单，Bootstrap并未对其做太多的定制性效果设计，仅仅对表单内的fieldset、legend、label标签进行了定制；主要将这些元素的margin、padding和border等进行了细化设置。

基础表单样式

(1)form-control 类名  #在input、select、textarea等元素中设置
    宽度变成了100%
    设置了一个浅灰色（#ccc）的边框，具有6px的圆角
    设置阴影效果，并且元素得到焦点之时，阴影和边框效果会有所变化
    设置了placeholder的颜色为#999
(2)role 属性  #在form中设置
    role=“form”        #告诉辅助设备（如屏幕阅读器）这个元素所扮演的角色是个表单
    role=“button”        #告诉设备，这是个按钮,可以点击
    本质上是增强语义性，增强组件的可访问性、可用性
(3)form-group  类名
    就是一个产生margin-bottom:15px的效果

input样式

（1）必须带有type，多使用form-control类（效果见上）
        input-sm:让控件比正常大小更小
        input-lg:让控件比正常大小更大
        不设置就是正常大小
（2）禁用属性：disabled
（3）默认内容属性： placeholder

select样式

(1)默认选择一个选项，多使用form-control（效果见上）
(2)多行选择的话 设置multiple属性
        <select multiple class=“form-control”> 

textarea样式

(1)设置rows="number"规定文本区域的高度（以行数计）
(2)设置cols=    "number"    规定文本区域的宽度（以平均字符宽度计）。默认值是20。
(3)如果textarea元素中添加了类名“form-control”类名，则无需设置cols属性

单选框、多选框样式

控件与文字对齐问题：
（1）如果checkbox需要水平排列，只需要在label标签上添加类名“checkbox-inline”
（2）如果radio需要水平排列，只需要在label标签上添加类名“radio-inline

1
2
3
4
5

<div class=“checkbox”>		#书写格式
    <label>
      <input type=“checkbox” value=“”>记住密码
    </label>
</div>

按钮样式

1.按钮的基础类名

(1)Bootstrap框架首先通过基础类名“.btn”定义了一个基础的按钮风格
        然后通过“.btn-default”定义了一个默认的按钮风格。
(2)默认按钮的风格就是在基础按钮的风格的基础上修改了按钮的背景颜色、边框颜色和文本颜色。
(3)在Bootstrap框架中的按钮都是采用\<button\>来实现
(4).btn类还支持a标签，type-submit的input标签
格式：    
<button class=“btn btn-default” type=“button”>默认按钮</button

2.按钮的扩展类名

（1）颜色等改变
    btn-primary：    主要按钮
    btn-success：    成功按钮
    btn-warning：    警告按钮
    btn-danger：    危险按钮
    btn-link：    链接按钮

（2）大小改变
    bth-lg：大型按钮
    btn-sm：    小型按钮
    btn-xs：    超小型按钮    
    btn-block：块状按钮 #转换为了块标签

表单类别

（1）水平表单
    在Bootstrap框架中要实现水平表单效果，必须满足以下两个条件
    1.在<form>元素是使用类名“form-horizontal”
    2.配合Bootstrap框架的网格系统。（网格布局会在以后的章节中详细讲解）
（2）内联表单    
    只需要在<form>元素中添加类名“form-inline”即可
（3）label标签会导致input换行显示，解决方案就是给label添加一个类名“sr-only”，标签将隐藏。

如果没有为输入控件设置label标签，屏幕阅读器将无法正确识别。这也是Bootstrap框架另一个优点之处，为残障人员进行了一定的考虑。