Bootstrap3实用教程
2.6.2 行内表单
阅读(

Bootstrap基础

Bootstrap全局样式

概述

栅格系统

排版

源代码

表格

表单

基本表单

行内表单

<form>元素添加.form-inline类,就可以创建一个表现为inline-block的行内表单。行内表单采用紧凑布局,它的所有控件都在一行内显示,标签和输入框使用左对齐方式。如:

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

在 Bootstrap 中,输入框和单选/多选框控件默认被设置为width: 100%;,但在行内表单中,这些元素的宽度被设置为width: auto;,因此,多个控件可以排列在同一行。效果如图 2‑49所示:

行内表单
图2-49 行内表单

如果你没有为每个输入控件设置label标签,屏幕阅读器将无法正确识别。对于这些内联表单,你可以通过为label设置.sr-only类将其隐藏。还有一些辅助技术提供label标签的替代方案,比如aria-labelaria-labelledbytitle属性。如果这些都不存在,屏幕阅读器可能会采取使用placeholder属性,如果存在的话,使用占位符来替代其他的标记,但要注意,这种方法是不妥当的。如:

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="email3">Email address</label>
    <input type="email" class="form-control" id="email3" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="password3">Password</label>
    <input type="password" class="form-control" id="assword3">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

效果如图 2‑50所示:

行内表单
图2-50 行内表单

注意:行内表单只适用于视口(viewport)至少在 768px 宽度时,视口宽度再小的话,表单控件就可能会换行而堆叠排列。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验