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 小输入框 测试一下