Bootstrap表单使用方法详解(2)

(2)禁用的输入框 input
如果您想要禁用一个输入框 input,只需要简单地添加 disabled 属性,这不仅会禁用输入框,还会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式。

(3)禁用的字段集 fieldset
对 <fieldset> 添加 disabled 属性来禁用 <fieldset> 内的所有控件。

(4)验证状态
Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的 class(.has-warning、 .has-error 或 .has-success)即可使用验证状态。

<form role="form"> <div> <label>聚焦</label> <div> <input type="text" value="该输入框获得焦点..."> </div> </div> <div> <label for="inputPassword">禁用</label> <div> <input type="text" placeholder="该输入框禁止输入..." disabled> </div> </div> <fieldset disabled> <div> <label for="disabledTextInput">禁用输入(Fieldset disabled)</label> <div> <input type="text" placeholder="禁止输入"> </div> </div> <div> <label for="disabledSelect">禁用选择菜单(Fieldset disabled)</label> <div> <select> <option>禁止选择</option> </select> </div> </div> </fieldset> <div> <label for="inputSuccess">输入成功</label> <div> <input type="text"> </div> </div> <div> <label for="inputWarning">输入警告</label> <div> <input type="text"> </div> </div> <div> <label for="inputError">输入错误</label> <div> <input type="text"> </div> </div> </form>

Bootstrap表单使用方法详解

五、表单控件大小
您可以分别使用 class .input-lg 和 .col-lg-* 来设置表单的高度和宽度。

<form role="form"> <div> <input type="text" placeholder=".input-lg"> </div> <div> <input type="text" placeholder="默认输入"> </div> <div> <input type="text" placeholder=".input-sm"> </div> <div></div> <div> <select> <option value="">.input-lg</option> </select> </div> <div> <select> <option value="">默认选择</option> </select> </div> <div> <select> <option value="">.input-sm</option> </select> </div> <div> <div> <input type="text" placeholder=".col-lg-2"> </div> <div> <input type="text" placeholder=".col-lg-3"> </div> <div> <input type="text" placeholder=".col-lg-4"> </div> </div> </form>

Bootstrap表单使用方法详解

六、表单帮助文本

Bootstrap 表单控件可以在输入框 input 上有一个块级帮助文本。为了添加一个占用整个宽度的内容块,请在 <input> 后使用 .help-block。

<form role="form"> <span>帮助文本实例</span> <input type="text" placeholder=""> <span>一个较长的帮助文本块,超过一行, 需要扩展到下一行。本实例中的帮助文本总共有两行。</span> </form>

Bootstrap表单使用方法详解

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwgyyj.html