Bootstrap 表单
Bootstrap 的默认设置
表单控件会自动接收一些 Bootstrap 的全局样式。
所有带 .form-control 类的文本 <input>、<textarea> 和 <select> 元素宽度为 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>
自己尝试 »
