Bootstrap学习笔记—关于表单
2016-04-05 16:50
621 查看
Bootstrap学习笔记—关于表单
1、水平表单效果
Bootstrap框架默认的表单是垂直显示风格,如果想要实现水平表单风格,需要满足两个条件:
(1)在元素是使用类名“form-horizontal”;
(2)配合Bootstrap框架的网格系统。
在元素上使用类名“form-horizontal”主要有以下几个作用:
(1)设置表单控件padding和margin值;
(2)改变“form-group”的表现形式,类似于网格系统的“row”。
举例:
2、内联表单
将表单的控件都在一行内显示,需要将表单控件设置成内联块元素(display:inline-block),在元素中添加类名”form-inline”。
举例:
注:因为在label标签中运用了一个类名”sr-only”(关于该样式的修饰在bootstrap.css中)将标签隐藏起来了,所以label标签没有显示出来。
3、表单控件
(1)输入框input(在Bootstrap中使用input时必须添加type类型)
单行输入框,常见的文本输入框,input的type属性值为text
为了让控件在各种表单风格中样式不出错,需要添加类名”form-control”
举例:
(2)下拉选择框select(Bootstrap框架的下拉选择框使用与原始一致)
多行选择设置multiple属性值为multiple
举例:
(3)文本域textarea(Bootstrap框架的文本域使用与原始一致)
设置rows定义高度
设置cols设置宽度
如果textarea元素中添加类名”form-control”类名,则无需设置cols属性(Bootstrap框架中的”form-control”样式表单控件宽度为100%或auto)
举例:
(4)复选框checkbox与单选择按钮radio
<1>checkbox与radio使用label包起来
<2>checkbox连同label标签放置在一个名为“.checkbox”的容器内
<3>radio连同label标签放置在一个名为“.radio”的容器内
在Bootstrap框架中,主要借助“.checkbox”和“.radio”样式,来处理复选框、单选按钮与标签的对齐方式。
举例:
(5)复选框和单选按钮水平排列
<1>如果checkbox需要水平排列,只需要在label标签上添加类名“checkbox-inline”
<2>如果radio需要水平排列,只需要在label标签上添加类名“radio-inline”
举例:
(6)按钮(在Bootstrap框架中按钮都采用实现)
通常使用以下代码:
(7)控件的大小
可以通过设置控件的height,line-height,padding和font-size等属性来实现控件的高度设置。
Bootstrap框架还提供了两个不同的类名,用来控制表单控件的高度。这两个类名是:
<1>input-sm:让控件比正常大小更小
<2>input-lg:让控件比正常大小更大
这两个类适用于表单中的input,textarea和select控件,具体使用如下:
不管是“input-sm”还是“input-lg”仅对控件高度做了处理。如果想要对控件宽度做一定的变化处理,要借住Bootstrap框架的网格系统。
要控制表单宽度,可以像下面这样使用:
(8)控件的状态(焦点状态)
表单状态的作用(每一种状态都能给用户传递不同的信息):
<1>禁用状态可以告诉用户不可以输入或选择东西(在相应的表单控件上添加属性”disabled”)。如果控件中不使用类名“form-control”,禁用的控件只会有一个不准输入的手型出来。
在Bootstrap框架中,如果fieldset设置了disabled属性,整个域都将处于被禁用状态(对于整个禁用的域中,如果legend中有输入框的话,这个输入框虽然颜色变灰了,但是没被禁用)。
<2>表单控件验证状态,可以告诉用户的操作是否正确等。
在Bootstrap框架中提供以下几种验证状态效果:
[1].has-warning:警告状态(黄色)
[2].has-error:错误状态(红色)
[3].has-success:成功状态(绿色)
使用的时候只需要在form-group容器上对应添加状态类名。
举例:
在表单验证时,不同的状态会提供不同的 icon,比如成功是一个对号(√),错误是一个叉号(×)等。在Bootstrap框中也提供了这样的效果。如果你想让表单在对应的状态下显示 icon 出来,只需要在对应的状态下添加类名“has-feedback”。请注意,此类名要与“has-error”、“has-warning”和“has-success”在一起。
举例:
<3>焦点状态,通过伪类“:focus”来实现。
Bootstrap框架中表单控件的焦点状态删除了outline的默认样式,重新添加阴影效果。要让控件在焦点状态下有样式效果,需要给控件添加类名“form-control”。
<4>提示信息
使用了一个”help-block”样式,将提示信息以块状显示,并且显示在控件底部。
在Bootstrap V2.x版本中提供了一个行内提示信息,其使用了类名“help-inline”。一般让提示信息显示在控件的后面,也就是同一水平显示。
如果觉得表单效果并非所需,可以通过forms.less或者_forms.scss文件进行定制,然后重新编译即可得到需要的表单效果。
1、水平表单效果
Bootstrap框架默认的表单是垂直显示风格,如果想要实现水平表单风格,需要满足两个条件:
(1)在元素是使用类名“form-horizontal”;
(2)配合Bootstrap框架的网格系统。
在元素上使用类名“form-horizontal”主要有以下几个作用:
(1)设置表单控件padding和margin值;
(2)改变“form-group”的表现形式,类似于网格系统的“row”。
举例:
<form class="form-horizontal" role="form"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">用户名</label> <div class="col-sm-10"> <input type="email" class="form-control" id="inputEmail3" placeholder="请输入您的邮箱地址"> </div> </div> </form>
2、内联表单
将表单的控件都在一行内显示,需要将表单控件设置成内联块元素(display:inline-block),在元素中添加类名”form-inline”。
举例:
<form class="form-inline" role="form"> <div class="form-group"> <label class="sr-only" for="exampleInputEmail2">邮箱 </label> <input type="email" class="form-control" id="exampleInputEmail2" placeholder="请输入你的邮箱地址"> </div> <div class="form-group"> <label class="sr-only" for="exampleInputPassword2">密码</label> <input type="password" class="form-control" id="exampleInputPassword2" placeholder="请输入你的邮箱密码"> </div> <div class="checkbox"> <label> <input type="checkbox">记住密码 </label> </div> <button type="submit" class="btnbtn-default">进入邮箱 </button> </form>
注:因为在label标签中运用了一个类名”sr-only”(关于该样式的修饰在bootstrap.css中)将标签隐藏起来了,所以label标签没有显示出来。
3、表单控件
(1)输入框input(在Bootstrap中使用input时必须添加type类型)
单行输入框,常见的文本输入框,input的type属性值为text
为了让控件在各种表单风格中样式不出错,需要添加类名”form-control”
举例:
<form role="form"> <div class="form-group"> <input type="text" class="form-control" placeholder="Please input the name"> </div> </form>
(2)下拉选择框select(Bootstrap框架的下拉选择框使用与原始一致)
多行选择设置multiple属性值为multiple
举例:
<form role="form"> <div class="form-group"> <select class="form-control"> <!-- 单选 --> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> <div class="form-group"> <select multiple class="form-control"> <!-- 多选 --> <option>football</option> <option>swimming</option> <option>running</option> <option>dance</option> </select> </div> </form>
(3)文本域textarea(Bootstrap框架的文本域使用与原始一致)
设置rows定义高度
设置cols设置宽度
如果textarea元素中添加类名”form-control”类名,则无需设置cols属性(Bootstrap框架中的”form-control”样式表单控件宽度为100%或auto)
举例:
<form role="form"> <div class="form-group"> <textarea class="form-control" rows="3"></textarea> </div> </form>
(4)复选框checkbox与单选择按钮radio
<1>checkbox与radio使用label包起来
<2>checkbox连同label标签放置在一个名为“.checkbox”的容器内
<3>radio连同label标签放置在一个名为“.radio”的容器内
在Bootstrap框架中,主要借助“.checkbox”和“.radio”样式,来处理复选框、单选按钮与标签的对齐方式。
举例:
<form role="form"> <div class="checkbox"> <label> <input type="checkbox" value=""> 记住密码 </label> </div> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked> 喜欢 </label> </div> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios2" value="hate"> 不喜欢 </label> </div> </form>
(5)复选框和单选按钮水平排列
<1>如果checkbox需要水平排列,只需要在label标签上添加类名“checkbox-inline”
<2>如果radio需要水平排列,只需要在label标签上添加类名“radio-inline”
举例:
<form role="form"> <div class="form-group"> <label class="radio-inline"> <input type="radio" value="option1" name="sex"> 男性 </label> <label class="radio-inline"> <input type="radio" value="optio21" name="sex"> 女性 </label> <label class="radio-inline"> <input type="radio" value="option3" name="sex"> 中性 </label> </div> </form>
(6)按钮(在Bootstrap框架中按钮都采用实现)
通常使用以下代码:
input[type=“submit”] input[type=“button”] input[type=“reset”] <button>
(7)控件的大小
可以通过设置控件的height,line-height,padding和font-size等属性来实现控件的高度设置。
Bootstrap框架还提供了两个不同的类名,用来控制表单控件的高度。这两个类名是:
<1>input-sm:让控件比正常大小更小
<2>input-lg:让控件比正常大小更大
这两个类适用于表单中的input,textarea和select控件,具体使用如下:
<form role="form"> <div class="form-group"> <label class="control-label">控件变大</label> <input class="form-control input-lg" type="text" placeholder="添加.input-lg,控件变大"> </div> <div class="form-group"> <label class="control-label">正常大小</label> <input class="form-control" type="text" placeholder="正常大小"> </div> <div class="form-group"> <label class="control-label">控件变小</label> <input class="form-control input-sm" type="text" placeholder="添加.input-sm,控件变小"> </div> </form>
不管是“input-sm”还是“input-lg”仅对控件高度做了处理。如果想要对控件宽度做一定的变化处理,要借住Bootstrap框架的网格系统。
要控制表单宽度,可以像下面这样使用:
<form role="form" class="form-horizontal"> <div class="form-group"> <div class="col-xs-4"> <input class="form-control input-lg" type="text" placeholder=".col-xs-4"> </div> <div class="col-xs-4"> <input class="form-control input-lg" type="text" placeholder=".col-xs-4"> </div> <div class="col-xs-4"> <input class="form-control input-lg" type="text" placeholder=".col-xs-4"> </div> </div> <div class="form-group"> <div class="col-xs-6"><input class="form-control" type="text" placeholder=".col-xs-6"></div> <div class="col-xs-6"><input class="form-control" type="text" placeholder=".col-xs-6"></div> </div> <div class="form-group"> <div class="col-xs-5"> <input class="form-control input-sm" type="text" placeholder=".col-xs-5"> </div> <div class="col-xs-7"> <input class="form-control input-sm" type="text" placeholder=".col-xs-7"> </div> </div> </form>
(8)控件的状态(焦点状态)
表单状态的作用(每一种状态都能给用户传递不同的信息):
<1>禁用状态可以告诉用户不可以输入或选择东西(在相应的表单控件上添加属性”disabled”)。如果控件中不使用类名“form-control”,禁用的控件只会有一个不准输入的手型出来。
在Bootstrap框架中,如果fieldset设置了disabled属性,整个域都将处于被禁用状态(对于整个禁用的域中,如果legend中有输入框的话,这个输入框虽然颜色变灰了,但是没被禁用)。
<label for="disabledTextInput">禁用的输入框</label>
<fieldset disabled>
<2>表单控件验证状态,可以告诉用户的操作是否正确等。
在Bootstrap框架中提供以下几种验证状态效果:
[1].has-warning:警告状态(黄色)
[2].has-error:错误状态(红色)
[3].has-success:成功状态(绿色)
使用的时候只需要在form-group容器上对应添加状态类名。
举例:
<div class="form-group has-success"> <label class="control-label" for="inputSuccess1"> 成功状态 </label> <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" > </div>
在表单验证时,不同的状态会提供不同的 icon,比如成功是一个对号(√),错误是一个叉号(×)等。在Bootstrap框中也提供了这样的效果。如果你想让表单在对应的状态下显示 icon 出来,只需要在对应的状态下添加类名“has-feedback”。请注意,此类名要与“has-error”、“has-warning”和“has-success”在一起。
举例:
<div class="form-group has-success has-feedback"> <label class="control-label" for="inputSuccess1"> 成功状态 </label> <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" > <span class="glyphiconglyphicon-ok form-control-feedback"></span> </div>
<3>焦点状态,通过伪类“:focus”来实现。
Bootstrap框架中表单控件的焦点状态删除了outline的默认样式,重新添加阴影效果。要让控件在焦点状态下有样式效果,需要给控件添加类名“form-control”。
<4>提示信息
使用了一个”help-block”样式,将提示信息以块状显示,并且显示在控件底部。
在Bootstrap V2.x版本中提供了一个行内提示信息,其使用了类名“help-inline”。一般让提示信息显示在控件的后面,也就是同一水平显示。
如果觉得表单效果并非所需,可以通过forms.less或者_forms.scss文件进行定制,然后重新编译即可得到需要的表单效果。
相关文章推荐
- bootstrap初试进度条
- Bootstrap 3.3.4 发布,Web 前端 UI 框架
- angular 指令简述
- 在线用表单建立文件夹
- Jquery 表单取值赋值的一些基本操作
- javascript 表单的友好用户体现
- js 提交和设置表单的值
- 攻克CakePHP系列二 表单数据显示
- JavaScript获取页面中表单(form)数量的方法
- 网页中表单按回车就自动提交的问题的解决方案
- 分享纯手写漂亮的表单验证
- Bootstrap每天必学之前端开发框架
- Bootstrap 粘页脚效果
- 超实用的JavaScript表单代码段
- JS组件中bootstrap multiselect两大组件较量
- 基于Bootstrap的网页设计实例
- BootStrap实用代码片段之一
- js实现不提交表单获取单选按钮值的方法
- js实现文件上传表单域美化特效
- JS组件Bootstrap Select2使用方法详解