bootstrap表单学习笔记3-3
2015-12-17 16:17
746 查看
有时候我们需要将表单的控件都在一行内显示,类似这样的:
在Bootstrap框架中实现这样的表单效果是轻而易举的,你只需要在<form>元素中添加类名“form-inline”即可。
内联表单实现原理非常简单,欲将表单控件在一行显示,就需要将表单控件设置成内联块元素(display:inline-block)。
/*源码请查阅bootstrap.css文件第1928行~第1962行*/
如果你要在input前面添加一个label标签时,会导致input换行显示。如果你必须添加这样的一个label标签,并且不想让input换行,你需
要将label标签也放在容器“form-group”中,如:
接下来,我们还是以实例说话:
运行效果如下或查看右侧结果窗口:(查看效果需要把结果窗口设置为全屏)
回过头来看示例,你或许会问,为什么添加了label标签,而且没有放置在”form-group”这样的容器中,input也不会换行;还有label标签怎么没显示出
来。如果你仔细看,在label标签运用了一个类名“sr-only”,标签没显示就是这个样式将标签隐藏了。
/*源码请查阅bootstrap.css文件第342行~第350行*/
注意:那么Bootstrap为什么要这么做呢?这样不是多此一举吗?其实不是的,如果没有为输入控件设置label标签,屏幕阅读器将无法正确识别。这也
是Bootstrap框架另一个优点之处,为残障人员进行了一定的考虑。
在Bootstrap框架中实现这样的表单效果是轻而易举的,你只需要在<form>元素中添加类名“form-inline”即可。
内联表单实现原理非常简单,欲将表单控件在一行显示,就需要将表单控件设置成内联块元素(display:inline-block)。
/*源码请查阅bootstrap.css文件第1928行~第1962行*/
如果你要在input前面添加一个label标签时,会导致input换行显示。如果你必须添加这样的一个label标签,并且不想让input换行,你需
要将label标签也放在容器“form-group”中,如:
<div class="form-group"> <label class="sr-only" for="exampleInputEmail2">Email address</label> </div> <div class="form-group"> <inputtype="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email"> </div>
接下来,我们还是以实例说话:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>内联表单</title> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> </head> <body> <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="btn btn-default">进入邮箱</button> </form> </body> </html>
运行效果如下或查看右侧结果窗口:(查看效果需要把结果窗口设置为全屏)
回过头来看示例,你或许会问,为什么添加了label标签,而且没有放置在”form-group”这样的容器中,input也不会换行;还有label标签怎么没显示出
来。如果你仔细看,在label标签运用了一个类名“sr-only”,标签没显示就是这个样式将标签隐藏了。
/*源码请查阅bootstrap.css文件第342行~第350行*/
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
注意:那么Bootstrap为什么要这么做呢?这样不是多此一举吗?其实不是的,如果没有为输入控件设置label标签,屏幕阅读器将无法正确识别。这也
是Bootstrap框架另一个优点之处,为残障人员进行了一定的考虑。
相关文章推荐
- bootstrap表单学习笔记3-2
- bootstrap表单学习笔记3-1
- Bootstrap Tooltip显示换行和左对齐
- bootstrap菜单、按钮及导航学习笔记5-3
- datetimepicker-bootstrap默认年份1899修改问题
- bootstrap菜单、按钮及导航学习笔记5-2
- bootstrap菜单、按钮及导航学习笔记5-1
- 【Boots学习笔记】Bootstrap学习
- bootstrap ace admin 整合java HTML5 全新高大尚后台框架
- bootstrap学习笔记-列偏移
- Angular - - angular.bind、angular.bootstrap、angular.copy
- 【SSM框架 SSM项目源码 SSM源码 下载】java框架整合Springmvc+mybatis+shiro+bootstrap
- bootstrap栅格系统学习笔记
- angular bootstrap
- 真当程序猿眼中只有美女和高薪?
- dart web 模板 ( 一 ) [基于 SB Admin2 Bootstrap]
- Bootstrap 笔记
- Stucts应用引起的OutOfMemoryError
- Bootstrap响应式图片的进一步处理
- Bootstrap Glyphicons 图标