Bootstrap 表单

Bootstrap 的表单（Forms）是其 CSS 框架的重要组成部分，提供了一套样式和工具类，用于创建美观、响应式且用户友好的表单。Bootstrap 表单支持输入框、选择框、复选框、单选按钮、文本区域等元素，并内置了验证样式和布局选项。以下是对 Bootstrap 表单的中文讲解，涵盖核心功能、类名、用法和示例，基于最新版本 Bootstrap 5.3.3（截至 2025 年 10 月 11 日）。

1. Bootstrap 表单概述

Bootstrap 的表单系统旨在简化表单设计，提供一致的样式和交互体验。其主要特点包括：

统一外观：为表单控件提供标准化的样式、间距和字体。
响应式布局：支持网格系统和工具类，适配不同设备。
验证支持：内置客户端验证样式，显示成功、错误等状态。
可访问性：优化了屏幕阅读器支持和键盘导航。
可定制：通过 Sass 变量调整样式，满足项目需求。

2. 核心表单控件

Bootstrap 提供了多种表单控件的样式，以下是主要类和用法：

(1) 输入框（Input）

使用 .form-control 类为 <input> 元素添加统一的样式，支持 text、email、password 等类型。

用法：

  <input type="text" class="form-control" placeholder="请输入姓名">

效果：输入框具有圆角边框、适当内边距和占位符样式。
尺寸：
.form-control-lg：大尺寸输入框。
.form-control-sm：小尺寸输入框。

  <input type="text" class="form-control form-control-lg" placeholder="大输入框">

只读和禁用：
readonly：只读输入框。
disabled：禁用输入框。

  <input type="text" class="form-control" readonly value="只读内容">
  <input type="text" class="form-control" disabled value="禁用内容">

(2) 文本区域（Textarea）

使用 .form-control 为 <textarea> 添加样式。

用法：

  <textarea class="form-control" rows="4" placeholder="请输入备注"></textarea>

(3) 选择框（Select）

使用 .form-select 为 <select> 添加样式，支持单选和多选。

用法：

  <select class="form-select">
    <option selected>选择一项</option>
    <option value="1">选项 1</option>
    <option value="2">选项 2</option>
  </select>

尺寸：.form-select-lg、.form-select-sm。

(4) 复选框和单选按钮（Checkbox & Radio）

复选框：使用 .form-check 和 .form-check-input、.form-check-label。

  <div class="form-check">
    <input class="form-check-input" type="checkbox" id="check1">
    <label class="form-check-label" for="check1">复选框</label>
  </div>

单选按钮：

  <div class="form-check">
    <input class="form-check-input" type="radio" name="radioGroup" id="radio1">
    <label class="form-check-label" for="radio1">单选 1</label>
  </div>

内联布局：使用 .form-check-inline 使复选框或单选按钮水平排列。

  <div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineCheck1">
    <label class="form-check-label" for="inlineCheck1">选项 1</label>
  </div>

(5) 开关（Switch）

使用 .form-switch 将复选框样式改为开关样式。

用法：

  <div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" id="switch1">
    <label class="form-check-label" for="switch1">开关</label>
  </div>

(6) 文件上传（File Input）

使用 .form-control 为 <input type="file"> 添加样式。

用法：

  <input type="file" class="form-control">

(7) 范围滑块（Range）

使用 .form-range 为 <input type="range"> 添加样式。

用法：

  <input type="range" class="form-range" min="0" max="100">

3. 表单布局

Bootstrap 提供多种方式组织表单布局：

(1) 表单组（Form Group）

通过 <div> 或 .mb-3（外边距）组织表单控件和标签。

用法：

  <div class="mb-3">
    <label for="name" class="form-label">姓名</label>
    <input type="text" class="form-control" id="name" placeholder="请输入姓名">
  </div>

(2) 网格布局

结合 Bootstrap 网格系统（如 .row 和 .col）实现复杂布局。

用法：

  <div class="row">
    <div class="col-md-6 mb-3">
      <label for="firstName" class="form-label">名字</label>
      <input type="text" class="form-control" id="firstName">
    </div>
    <div class="col-md-6 mb-3">
      <label for="lastName" class="form-label">姓氏</label>
      <input type="text" class="form-control" id="lastName">
    </div>
  </div>

(3) 内联表单

使用 .row 和 .g-2（间距）创建水平排列的表单。

用法：

  <form class="row g-2">
    <div class="col-auto">
      <input type="text" class="form-control" placeholder="搜索">
    </div>
    <div class="col-auto">
      <button type="submit" class="btn btn-primary">提交</button>
    </div>
  </form>

(4) 浮动标签

使用 .form-floating 创建标签浮动在输入框内的效果。

用法：

  <div class="form-floating mb-3">
    <input type="text" class="form-control" id="floatingInput" placeholder="姓名">
    <label for="floatingInput">姓名</label>
  </div>

4. 表单验证

Bootstrap 提供客户端验证样式，支持成功、错误等状态。

验证类：
.is-valid：成功状态（绿色边框）。
.is-invalid：错误状态（红色边框）。
反馈文本：使用 .valid-feedback 或 .invalid-feedback 显示提示。
用法：

  <div class="mb-3">
    <label for="email" class="form-label">邮箱</label>
    <input type="email" class="form-control is-invalid" id="email" required>
    <div class="invalid-feedback">请输入有效的邮箱地址。</div>
  </div>

JavaScript 验证：结合 HTML5 验证属性（如 required）或自定义 JavaScript 触发验证样式。

5. 定制表单样式

Bootstrap 的表单样式基于 Sass 变量，可通过以下方式定制：

字体大小：$input-font-size。
边框颜色：$input-border-color。
背景颜色：$input-bg。
验证颜色：$form-feedback-valid-color、$form-feedback-invalid-color。

定制示例：

// custom.scss
$input-border-color: #007bff;
$input-font-size: 1.1rem;
$form-feedback-invalid-color: #ff3333;

@import "node_modules/bootstrap/scss/bootstrap";

编译后引入：

<link href="custom.css" rel="stylesheet">

6. 完整示例

以下是一个综合展示表单功能的示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 表单示例</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container my-4">
    <h2 class="text-center">Bootstrap 表单示例</h2>
    <form>
      <!-- 输入框 -->
      <div class="mb-3">
        <label for="name" class="form-label">姓名</label>
        <input type="text" class="form-control" id="name" placeholder="请输入姓名">
      </div>

      <!-- 浮动标签 -->
      <div class="form-floating mb-3">
        <input type="email" class="form-control is-valid" id="email" placeholder="邮箱">
        <label for="email">邮箱</label>
        <div class="valid-feedback">邮箱格式正确！</div>
      </div>

      <!-- 选择框 -->
      <div class="mb-3">
        <label for="city" class="form-label">城市</label>
        <select class="form-select" id="city">
          <option selected>选择城市</option>
          <option value="1">北京</option>
          <option value="2">上海</option>
        </select>
      </div>

      <!-- 复选框和开关 -->
      <div class="mb-3">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="agree">
          <label class="form-check-label" for="agree">同意条款</label>
        </div>
        <div class="form-check form-switch">
          <input class="form-check-input" type="checkbox" id="notify">
          <label class="form-check-label" for="notify">开启通知</label>
        </div>
      </div>

      <!-- 文本区域 -->
      <div class="mb-3">
        <label for="comments" class="form-label">备注</label>
        <textarea class="form-control" id="comments" rows="4"></textarea>
      </div>

      <!-- 提交按钮 -->
      <button type="submit" class="btn btn-primary">提交</button>
    </form>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

7. 注意事项

语义化：使用 <label> 和 for 属性关联控件，提高可访问性。
验证逻辑：Bootstrap 仅提供验证样式，需结合 JavaScript 或 HTML5 实现逻辑。
响应式测试：在不同屏幕尺寸下检查表单布局和输入体验。
文件上传：文件输入框样式有限，需额外 CSS 增强。
可访问性：确保表单控件有适当的 aria-* 属性（如 aria-describedby）。

8. 学习资源

官方文档：https://getbootstrap.com/docs/5.3/forms/overview/
中文教程：https://www.bootcss.com/（非官方）
X 平台：搜索“Bootstrap 表单”或“Bootstrap Forms”，查看社区分享的表单设计技巧。

如果你需要更详细的表单功能讲解（例如复杂验证、动态表单）或实现特定表单效果的代码，请告诉我，我可以提供进一步的指导或示例！

1. Bootstrap 表单概述

2. 核心表单控件

(1) 输入框（Input）

(2) 文本区域（Textarea）

(3) 选择框（Select）

(4) 复选框和单选按钮（Checkbox & Radio）

(5) 开关（Switch）

(6) 文件上传（File Input）

(7) 范围滑块（Range）

3. 表单布局

(1) 表单组（Form Group）

(2) 网格布局

(3) 内联表单

(4) 浮动标签

4. 表单验证

5. 定制表单样式

6. 完整示例

7. 注意事项

8. 学习资源

Bootstrap 列表组

Bootstrap 警告（Alerts）

Bootstrap 排版

Bootstrap 导航栏

Bootstrap CSS 概览

Bootstrap 分页

发表回复取消回复

1. Bootstrap 表单概述

2. 核心表单控件

(1) 输入框（Input）

(2) 文本区域（Textarea）

(3) 选择框（Select）

(4) 复选框和单选按钮（Checkbox & Radio）

(5) 开关（Switch）

(6) 文件上传（File Input）

(7) 范围滑块（Range）

3. 表单布局

(1) 表单组（Form Group）

(2) 网格布局

(3) 内联表单

(4) 浮动标签

4. 表单验证

5. 定制表单样式

6. 完整示例

7. 注意事项

8. 学习资源

类似文章

发表回复 取消回复

发表回复取消回复