行内表单
为<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-label
、aria-labelledby
或title
属性。如果这些都不存在,屏幕阅读器可能会采取使用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 上开源。