Bootstrap 表单
Bootstrap 的默认设置
使用 Bootstrap,文本控件会自动应用一些全局样式。
所有文本 <input>
, <textarea>
, 和 <select>
元素,类名为 .form-control
,宽度为 100%。
Bootstrap 表单布局
Bootstrap 提供三种表单布局:
- 垂直表单(这是默认的)
- 水平表单
- 行内表单
所有三种表单布局的标准规则:
- 将标签和表单控件包裹在
<div class="form-group">
中(这是为了最佳间距所必需的) - 为所有文本
<input>
,<textarea>
, 和<select>
元素添加类名.form-control
Bootstrap 垂直表单(默认)
下面的示例创建了一个垂直表单,包含两个输入字段、一个复选框和一个提交按钮。
示例
<form action="/action_page.php">
<div class="form-group">
<label for="email">电子邮件地址:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">密码:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> 记住我</label>
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
自己动手试一试 »
Bootstrap 行内表单
在行内表单中,所有元素都是行内元素,左对齐,并且标签与控件并行。
注意:这只适用于视口宽度至少为 768px 的表单!
行内表单的附加规则:
- 为
<form>
元素添加类名.form-inline
。
下面的示例创建了一个行内表单,包含两个输入字段、一个复选框和一个提交按钮。
示例
<form class="form-inline" action="/action_page.php">
<div class="form-group">
<label for="email">电子邮件地址:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">密码:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> 记住我</label>
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
自己动手试一试 »
提示: 如果您没有为每个输入包含标签,屏幕阅读器将难以识别您的表单。您可以使用 .sr-only
类来隐藏除屏幕阅读器外的所有设备的标签。
示例
<form class="form-inline" action="/action_page.php">
<div class="form-group">
<label class="sr-only" for="email">邮箱地址:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label class="sr-only" for="pwd">密码:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> 记住我</label>
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
自己动手试一试 »
Bootstrap 水平表单
水平表单意味着标签与输入字段并行(水平)对齐,适用于大屏幕和中等屏幕。在小屏幕(767px 及以下)上,它将转换为垂直表单(标签放置在每个输入字段的上方)。
水平表单的附加规则:
- 为
<form>
元素添加类名.form-horizontal
。 - 为所有
<label>
元素添加类名.control-label
。
提示: 使用 Bootstrap 的预定义网格类来将标签和表单控件组对齐到水平布局中。
下面的示例创建了一个水平表单,包含两个输入字段、一个复选框和一个提交按钮。
示例
<form class="form-horizontal" action="/action_page.php">
<div class="form-group">
<label class="control-label col-sm-2" for="email">邮箱:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="输入邮箱">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">密码:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="pwd" placeholder="输入密码">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label><input type="checkbox"> 记住我</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">提交</button>
</div>
</div>
</form>
自己动手试一试 »