欢迎光临
我们一直在努力

Bootstrap教程:内联表单

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框架另一个优点之处,为残障人员进行了一定的考虑。

赞(0) 打赏
未经允许不得转载:新起点博客 » Bootstrap教程:内联表单

评论 抢沙发

评论前必须登录!