Bootstrap 表单
Bootstrap 的默认设置
表单控件会自动接收一些带有 Bootstrap 的全局样式:
具有 .form-control 类的所有文本 <input>, <textarea>, 和
<select> 元素的宽度均为 100%。
Bootstrap 表单布局
Bootstrap 提供三种表单布局:
- 垂直表单（默认值）
- 水平表单
- 内联表单
所有三种表单布局的标准规则:
- 在
<div class="form-group">中包装标签和表单控件（需要最佳间距） - 将
.form-control类添加到所有文本<input>,<textarea>, 和<select>元素中
Bootstrap 垂直表单（默认值）
以下示例创建了一个垂直表单，其中包含两个输入字段、一个复选框和一个提交按钮:
实例
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
亲自试一试 »
Bootstrap 内联表单
在内联表单中，所有元素都是内联的、左对齐的，标签是并排的。
注意:这只适用于小于 768px 的视口中的表单！
内联表单的附加规则:
- 将
.form-inline类添加到<form>元素中
以下示例创建了一个包含两个输入字段、一个复选框和一个提交按钮的内联表单:
实例
<form class="form-inline" action="/action_page.php">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
亲自试一试 »
提示: 如果你没有为每一个输入都添加标签，屏幕阅读器就会对你的表单产生问题。通过使用 .sr-only 类，可以隐藏除屏幕阅读器以外的所有设备的标签:
实例
<form class="form-inline" action="/action_page.php">
<div class="form-group">
<label class="sr-only" for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label class="sr-only" for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
亲自试一试 »
Bootstrap 水平表单
水平表单意味着标签与大屏幕和中屏幕上的输入字段（水平）对齐。在小屏幕（767px 及以下）上，它将转换为垂直表单（标签放置在每个输入的顶部）。
水平表单的附加规则:
- 将
.form-horizontal类添加到<form>元素中 - 将类
.control-label添加到所有<label>元素
提示: 使用 Bootstrap 的预定义网格类在水平布局中对齐标签和表单控件组。
下面的示例创建了一个带有两个输入字段、一个复选框和一个提交按钮的水平表单。
实例
<form class="form-horizontal" action="/action_page.php">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
亲自试一试 »
