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