Bootstrap每天必学之表单(3)

　　可将鼠标移到各个控件上进行查看效果。
校验状态
Bootstrap对表单控件的校验状态，如error、warning和success状态，都定义了样式。使用时，添加.has-warning、.has-error或.has-success到这些控件的父元素即可。任何包含在此元素之内的.control-label、.form-control和.help-block都将接受这些校验状态的样式。

<div> <label for="inputSuccess">Input with success</label> <input type="text"> </div> <div> <label for="inputWarning">Input with warning</label> <input type="text"> </div> <div> <label for="inputError">Input with error</label> <input type="text"> </div>

控件尺寸
通过.input-lg之类的class可以为控件设置高度，通过.col-lg-*之类的class可以为控件设置宽度。
高度尺寸
创建大一些或小一些的表单控件以匹配按钮尺寸。

<input type="text" placeholder=".input-lg"> <input type="text" placeholder="Default input"> <input type="text" placeholder=".input-sm"> <select>...</select> <select>...</select> <select>...</select>

 

调整列尺寸
用栅格系统中的列包裹input或其任何父元素，都可很容易的为其设置宽度。

<div> <div> <input type="text" placeholder=".col-xs-2"> </div> <div> <input type="text" placeholder=".col-xs-3"> </div> <div> <input type="text" placeholder=".col-xs-4"> </div> </div>

帮助文本
 用于表单控件的块级帮助文本。

复制代码 代码如下:

<span>自己独占一行或多行的块级帮助文本。</span>

 本篇文章主要讲解表单中各种控件的样式控制，其中也有看到按钮的简单样式使用，下一篇文章将重点来讲解按钮的样式。

详细内容可以参考：

全面解析Bootstrap表单使用方法（表单样式）

全面解析Bootstrap表单使用方法（表单控件）

全面解析Bootstrap表单使用方法（表单控件状态）

全面解析Bootstrap表单使用方法（表单按钮）

如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程 Bootstrap实战教程