Bootstrap内联表单

有时候我们需要将表单的控件都在一行内显示,就需要将表单控件设置成内联块元素(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框架另一个优点之处,为残障人员进行了一定的考虑。

时间: 2024-10-09 02:23:22

Bootstrap内联表单的相关文章

bootstrap: 内联表单;

<form class="form-inline"> <div class="form-group"> <label for="time">Time</label> <input type="text" class="form-control" placeholder="time"> </div> <div c

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

<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="dist/css/bootstrap.css"> </head> <body> <p c

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

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 内联表单</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css&q

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

一.表单 基本格式 注:只有正确设置了输入框的 type 类型,才能被赋予正确的样式. 支持的输入框控件 包括:text.password.datetime.datetime-local.date.month.time.week. number.email.url.search.tel 和 color. <form> <div class="form-group"> <label>电子邮件</label> <input type=&

bootstrap-为水平排列的表单和内联表单设置可选的图标

说明 为水平排列的表单和内联表单设置可选的图标 示例 <!DOCTYPE html> <html lang="zh-CN">    <head>      <meta charset="utf-8">      <meta http-equiv="X-UA-Compatible" content="IE=edge">      <meta name="

Bootstrap系列 -- 13. 内联表单

有时候我们需要将表单的控件都在一行内显示.在Bootstrap框架中实现这样的表单效果是轻而易举的,你只需要在<form>元素中添加类名“form-inline”即可 如果你要在input前面添加一个label标签时,会导致input换行显示.如果你必须添加这样的一个label标签,并且不想让input换行,你需要将label标签也放在容器“form-group”中 <form class="form-inline" role="form">

Bootstrap学习(2)--表单

Bootstrap里的role属性,增强标签的语义化,提高识别力,  如:<form role="form"> input.select.textarea等元素,在Bootstrap框架中,通过定制了一个类名`form-control`,也就是说,如果这几个元素使用了类名“form-control”,将会实现一些设计上的定制效果. 1.宽度变成了100% 2.设置了一个浅灰色(#ccc)的边框 3.具有4px的圆角 4.设置阴影效果,并且元素得到焦点之时,阴影和边框效果会有

bootstrap19-内联表单

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>内联表单</title> <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> </he

BootStrap学习之表单

本文和大家分享的主要是BootStrap的表单相关内容,一起来看看吧,希望对大家学习BootStrap有所帮助. 单独的表单控件会被自动赋予一些全局样式.所有设置了 .form-control 类的 <input> . <textarea> 和 <select>元素都将被默认设置宽度属性为 width: 100% ;. 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列. 基本实例: <div class='container