Bootstrap CSS 表单参考
Bootstrap 的默认设置
单个表单控件会自动使用 Bootstrap 的一些全局样式。
所有带有 class="form-control" 的文本 <input>、<textarea> 和 <select> 元素默认设置为 width: 100%;。
所有三种表单布局的标准规则
- 将标签和表单控件包装在
<div class="form-group">中（为了最佳间距而需要） - 将 class
.form-control添加到所有文本<input>、<textarea>和<select>元素
以下示例创建了一个简单的 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 | 用于输入、文本区域和选择元素，以跨越页面的整个宽度并使其响应式 | 试试看 |
| .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 | 小型输入字段 | 试试看 |
