深入学习Bootstrap表单

1.垂直表单(默认)

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

<form action="#" role="form"> <div> <lable>姓名:<input type="text"/></lable> <lable>性别:<input type="text"/></lable> </div> </form>

2.内联表单

向 <form> 标签添加 class .form-inline;       
默认情况下,Bootstrap 中的 input、select 和 textarea 有 100% 宽度。在使用内联表单时,您需要在表单控件上设置一个宽度。
使用 class .sr-only,您可以隐藏内联表单的标签。

 3.水平表单        

向父 <form> 元素添加 class .form-horizontal。       
    把标签和控件放在一个带有 class .form-group 的 <div> 中。       
    向标签添加 class .control-label。

<form action="#" role="form"> <div> <lable>姓名:</lable> <div><input type="text"/></div> <lable>性别:</lable> <div><input type="text"/></div> </div> </form>

 二、支持的表单控件

1.输入框(Input)

<lable>姓名:<input type="text"/></lable> 

2.文本框(Textarea)  可改变 rows 属性

<div> <textarea rows="8"> </textarea> </div>

3.复选框(Checkbox)和单选框(Radio)        
    当创建表单时,如果您想让用户从列表中选择若干个选项时,请使用 checkbox。如果您限制用户只能选择一个选项,请使用 radio。       
    对一系列复选框和单选框使用 .checkbox-inline 或 .radio-inline class,控制它们显示在同一行上。

<div> <lable><input type="checkbox"/>篮球</lable> </div> <div> <lable><input type="checkbox"/>音乐</lable> </div> <div> <lable><input type="checkbox"/>绘画</lable> </div> <div> <lable><input type="radio"/>男</lable> </div> <div> <lable><input type="radio"/>女</lable> </div>

 4.选择框(Select)        

使用 <select> 展示列表选项,通常是那些用户很熟悉的选择列表,比如州或者数字。       
    使用 multiple="multiple" 允许用户选择多个选项。

<div> <select multiple> <option value="">1</option> <option value="">1</option> <option value="">1</option> <option value="">1</option> <option value="">1</option> </select> </div>

 5.静态控件        

当您需要在一个水平表单内的表单标签后放置纯文本时,请在 <p> 上使用 class .form-control-static。

<div> <label>Email</label> <div> <p>email@example.com</p> </div> </div>

三、表单控件状态

1.输入框焦点        

当输入框 input 接收到 :focus 时,输入框的轮廓会被移除,同时应用 box-shadow。   

2.禁用的输入框 input        

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

<div> <lable>姓名:<input type="text" disabled/></lable> </div>

3.禁用的字段集 fieldset        

对 <fieldset> 添加 disabled 属性来禁用 <fieldset> 内的所有控件。

4.验证状态        

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

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