有时候我们需要将表单的控件都在一行内显示,就需要将表单控件设置成内联块元素(display:inline-block)。

在Bootstrap框架中实现这样的表单效果是轻而易举的,你只需要在<form>元素中添加类名“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标签,而且没有放置在”form-group”这样的容器中,input也不会换行;还有label标签怎么没显示出来。如果你仔细看,在label标签运用了一个类名“sr-only”,标签没显示就是这个样式将标签隐藏了。

那么Bootstrap为什么要这么做呢?这样不是多此一举吗?其实不是的,如果没有为输入控件设置label标签,屏幕阅读器将无法正确识别。这也是Bootstrap框架另一个优点之处,为残障人员进行了一定的考虑。

Bootstrap内联表单的更多相关文章

  1. bootstrap: 内联表单;

    <form class="form-inline"> <div class="form-group"> <label for=&q ...

  2. bootstrap 基础表单 内联表单 横向表单

    bootstrap 基础表单 内联表单 横向表单 <!DOCTYPE html> <html> <head> <title></title> ...

  3. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单:内联表单

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. Bootstrap 表单和图片 (内联表单,表单合组,水平排列,复选框和单选框,下拉列表,校验状态,添加额外的图标,控制尺寸,图片)

    一.表单 基本格式 注:只有正确设置了输入框的 type 类型,才能被赋予正确的样式. 支持的输入框控件 包括:text.password.datetime.datetime-local.date.m ...

  5. Bootstrap3 表单-输出内联表单

    为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件.只适用于视口(viewport)至少在 768px 宽度时(视口宽 ...

  6. Bootstrap系列 -- 13. 内联表单

    有时候我们需要将表单的控件都在一行内显示.在Bootstrap框架中实现这样的表单效果是轻而易举的,你只需要在<form>元素中添加类名“form-inline”即可 如果你要在input ...

  7. Bootstrap学习(2)--表单

    Bootstrap里的role属性,增强标签的语义化,提高识别力,  如:<form role="form"> input.select.textarea等元素,在Bo ...

  8. Bootstrap<基础六> 表单

    Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单. 表单布局 Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 垂直或基本表单 ...

  9. bootstrap 列表 表格 表单 复选 单选 多选 输入框组

    一.列表 ul li 二.表格 table  (http://www.runoob.com/bootstrap/bootstrap-tables.html) 1. 基本表格 <table cla ...

随机推荐

  1. Spring+Mybatis之登录功能demo

    其实工作之后就没有用过Spring+Mybatis的框架了,因为公司有一个自己开发的框架,讲道理,其实这个与Spring+Mybatis整合很是神似.当然性能上还是比不上Spring+Mybatis所 ...

  2. PCB 线路板人生

    由此开端,增加PCB人生分类栏,后续在此分享PCB 非工作方面所思所想,由于文笔不好,请指正.

  3. 此文章介绍vue-cli脚手架config目录下index.js配置文件

    此配置文件是用来定义开发环境和生产环境中所需要的参数 关于注释 当涉及到较复杂的解释我将通过标识的方式(如(1))将解释写到单独的注释模块,请自行查看 上代码 // see http://vuejs- ...

  4. Gym - 101981G The 2018 ICPC Asia Nanjing Regional Contest G.Pyramid 找规律

    题面 题意:数一个n阶三角形中,有多少个全等三角形,n<=1e9 题解:拿到题想找规律,手画开始一直数漏....,最后还是打了个表 (打表就是随便定个点为(0,0),然后(2,0),(4,0), ...

  5. [Luogu 1850] noip16 换教室

    [Luogu 1850] noip16 换教室 好久没有更博客了,先唠嗑一会,花了两天的空闲时间大致做完了昨年的noip真题 虽然在经过思考大部分题目都可出解(天天爱跑步除外),但是并不知道考试时候造 ...

  6. Redis学习笔记(三)-数据类型之string类型

    string是redis最基本的类型,而且string类型是二进制安全的.意思是redis的string可以包含任何数据.比如jpg图片或者序列化的对象.从内部实现来看其实string可以看作byte ...

  7. css3动画之1--animation小例子

    1.首先看效果 2.代码及分析 <style type="text/css"> #div1 { margin:100px; position: absolute; te ...

  8. 实例化vue发生了什么(详解vue生命周期)

    const app = new Vue({ el:"#app', data:{ message:'hello,lifePeriod' }, methods:{ init(){ console ...

  9. winxp精简版没有IIS的解决办法

    首先在“开始”菜单的“运行”中输入“c:\Windows\inf\sysoc.inf”,系统会自动使用记事本打开sysoc.inf这个文件.在sysoc.inf中找到“[Components]”这一段 ...

  10. DeltaFish 校园物资共享平台 第二次小组会议

    软工第二周小组会议 会议地点:三教讨论区 会议时间:9:00 ~ 10:00 与会人员:软工小组成员 请假人员:刘鼎乾 整理人:艾寅中 会议记录 一.小组分工 在经过一周的调研后,组长根据调研结果和对 ...