bootstrap 基础知识（表单）

六：表单

1、input输入框（type=text/password/email）

2、input选择框（type=“checkbox/radio”）

在Bootstrap框架中，主要借助“.checkbox”和“.radio”样式，来处理复选框、单选按钮与标签的对齐方式。

注：

1、不管是checkbox还是radio都使用label包起来了
2、checkbox连同label标签放置在一个名为“.checkbox”的容器内
3、radio连同label标签放置在一个名为“.radio”的容器内

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

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

    

3、input（type=select/textarea）

   注：multiple表多行选择

     

4、按钮

.btn 是基本的按钮样式

.btn-default 是默认的按钮样式（实际只修改了按钮的背景、边框等颜色）

注意：虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格，但个人并不建议这样使用，为了避免浏览器兼容性问题强烈建议使用button或a标签来制作按钮。

但有时候在制作按钮的时候需要按钮宽度充满整个父容器（width:100%）

使用方法和前面的类似，只需要在原按钮类名上添加“.btn-block”类名，当然“.btn”类名是不可或缺的：

按钮大小

按钮的状态

在Bootstrap框架中，要禁用按钮有两种实现方式：（2030行～第2039）

方法1：在标签中添加disabled属性

方法2：在元素标签中添加类名“disabled”，其中添加类名的disabled只是在样式上显示为禁止，行为上并没有真正禁止

5、其他

   =>控件大小

   =》控件状态

1）表单的禁用状态

添加disabled属性即可

在Bootstrap框架中，如果fieldset设置了disabled属性，整个域都将处于被禁用状态。

如果legend中有输入框的话，这个输入框是无法被禁用的。

2）表单的验证状态（使用的时候只需要在form-group容器上对应添加状态类名）

.has-warning:警告状态（黄色）
.has-error：错误状态（红色）
.has-success：成功状态（绿色）

如果你想让表单在对应的状态下显示 icon 出来，只需要在对应的状态下添加类名“has-feedback”。请注意，此类名要与“has-error”、“has-warning”和“has-success”在一起：

、

若想信息在输入框之后，利用网格结构（在Bootstrap V2.x版本中有help-inline的类名）

.help-inline{   display:inline-block;   padding-left:5px;   color: #737373; }

   =》实现水平表单效果（文字与文本框水平），必须满足以下两个条件：
        1）在

元素是使用类名“form-horizontal”。
        2）配合Bootstrap框架的网格系统。

   =》实现内联表单效果（所有控件水平）