Bootstrap CSS 表单参考
Bootstrap 表单的默认设置
使用 Bootstrap 时，单个表单控件会自动接收一些全局样式。
所有带有 class="form-control" 的文本 <input>, <textarea>, 和 <select> 元素都默认设置为 width: 100%; 。
所有三种表单布局的标准规则:
- 在
<div class="form-group">中包装标签和表单控件（需要最佳间距） - 将类
.form-control添加到所有文本<input>,<textarea>, 和<select>元素
以下示例创建一个简单的 Bootstrap 表单，其中包含两个输入字段、一个复选框和一个提交按钮:
Bootstrap Form 表单实例
<form>
<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>
亲自试一试 »
Form 表单类
| 类 | 描述 | 实例 |
|---|---|---|
| .form-inline | 使 <form> 与内联块控件左对齐（这仅适用于视口中至少 768px 宽的表单） | 测试一下 |
| .form-horizontal | 在水平布局中对齐标签和表单控件组 | 测试一下 |
| .form-control | 用于输入、文本区域和选择元素以跨越页面的整个宽度并使其具有响应性 | 测试一下 |
| .form-control-feedback | 表单验证类 | 测试一下 |
| .form-control-static | 在水平表单中的表单标签旁边添加纯文本 | 测试一下 |
| .form-group | 表单输入和标签的容器 | 测试一下 |
Input 输入类
| 类 | 描述 | 实例 |
|---|---|---|
| .input-group | 通过在其前面或后面添加图标、文本或按钮作为"帮助文本"来增强输入的容器 | 测试一下 |
| .input-group-lg | 大输入组 | 测试一下 |
| .input-group-sm | 小输入组 | 测试一下 |
| .input-group-addon | 与 .input-group 类一起，该类可以在输入字段旁边添加图标或帮助文本 | 测试一下 |
| .input-group-btn | 与 .input-group 类一起，该类在输入旁边附加了一个按钮。 通常用作搜索栏 | 测试一下 |
| .input-lg | 大输入框 | 测试一下 |
| .input-sm | 小输入框 | 测试一下 |
