如何通过css框架Bootstrap制作表单样式-css教程-PHP中文网

如何通过css框架Bootstrap制作表单样式

P粉602998670

发布： 2025-09-16 21:39:01

原创

973人浏览过

Bootstrap通过预定义类快速构建响应式表单，需引入CSS文件，使用.form-group、.form-control等类包裹元素，结合栅格系统布局，支持浮动标签和辅助文本，并可通过自定义CSS或Sass变量调整样式。

如何通过css框架bootstrap制作表单样式

Bootstrap 框架通过预定义的 CSS 类，可以快速、高效地创建美观且响应式的表单。它简化了表单样式设计的复杂性，让开发者能更专注于业务逻辑。

使用 Bootstrap 制作表单样式，主要涉及以下几个步骤：

引入 Bootstrap CSS： 首先，确保你的项目中引入了 Bootstrap 的 CSS 文件。可以通过 CDN 链接或下载 Bootstrap 文件到本地引入。
使用
.form-group
登录后复制
类：将表单中的每个标签和输入框包裹在一个具有
```
.form-group
```
登录后复制
类的
```
div
```
登录后复制
元素中。这可以为每个表单控件提供适当的间距和结构。
使用
.form-control
登录后复制
类：将
```
.form-control
```
登录后复制
类添加到表单输入框、文本域和选择框中。这个类会应用 Bootstrap 的默认表单样式，包括边框、内边距和焦点样式。
使用
.form-label
登录后复制
类（可选）：可以使用
```
.form-label
```
登录后复制
类来设置表单标签的样式。
利用栅格系统进行布局： Bootstrap 的栅格系统可以用于创建复杂的表单布局。例如，可以使用
```
.col-md-*
```
登录后复制
类将表单控件放置在不同的列中。
使用表单控件特有的类： Bootstrap 提供了一些针对特定表单控件的类，例如
```
.form-check
```
登录后复制
用于复选框和单选按钮，
```
.form-select
```
登录后复制
用于选择框。

代码示例：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="container">
  <form>
    <div class="mb-3">
      <label for="exampleInputEmail1" class="form-label">邮箱地址</label>
      <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
      <div id="emailHelp" class="form-text">我们绝不会与任何人分享您的邮箱。</div>
    </div>
    <div class="mb-3">
      <label for="exampleInputPassword1" class="form-label">密码</label>
      <input type="password" class="form-control" id="exampleInputPassword1">
    </div>
    <div class="mb-3 form-check">
      <input type="checkbox" class="form-check-input" id="exampleCheck1">
      <label class="form-check-label" for="exampleCheck1">记住我</label>
    </div>
    <button type="submit" class="btn btn-primary">提交</button>
  </form>
</div>

登录后复制

Bootstrap 表单样式能快速实现一个美观的表单，但有时也需要根据项目需求进行定制，例如修改颜色、字体等。

立即学习“前端免费学习笔记（深入）”；

如何让 Bootstrap 表单更具响应式？

Bootstrap 的栅格系统是实现响应式表单的关键。通过使用不同的列类（如

.col-sm-*

登录后复制

.col-md-*

登录后复制

.col-lg-*

登录后复制

）可以控制表单控件在不同屏幕尺寸下的布局。例如，在小屏幕上，可以将表单控件堆叠显示，而在大屏幕上，可以将它们并排显示。此外，还可以使用 Bootstrap 的隐藏和显示类（如

.d-none

登录后复制

.d-md-block

登录后复制

）来控制某些表单元素在特定屏幕尺寸下的可见性。

例如：

<div class="row">
  <div class="col-sm-6">
    <label for="firstName" class="form-label">名</label>
    <input type="text" class="form-control" id="firstName">
  </div>
  <div class="col-sm-6">
    <label for="lastName" class="form-label">姓</label>
    <input type="text" class="form-control" id="lastName">
  </div>
</div>

登录后复制

这段代码会在中等及以上屏幕尺寸上将“名”和“姓”这两个输入框并排显示，而在小屏幕上则会堆叠显示。

如何自定义 Bootstrap 表单样式？

酷表ChatExcel

北大团队开发的通过聊天来操作Excel表格的AI工具

查看详情

虽然 Bootstrap 提供了默认的表单样式，但在实际项目中，往往需要根据品牌风格进行定制。自定义 Bootstrap 表单样式的方法有很多：

覆盖 Bootstrap 的 CSS 类： 这是最简单的方法。可以在自己的 CSS 文件中覆盖 Bootstrap 的 CSS 类，例如修改
```
.form-control
```
登录后复制
的背景颜色、边框样式等。但需要注意 CSS 样式的优先级问题，确保自己的样式能够覆盖 Bootstrap 的默认样式。
使用 Bootstrap 的 Sass 变量： Bootstrap 使用 Sass 作为 CSS 预处理器。可以通过修改 Bootstrap 的 Sass 变量来定制表单样式。例如，可以修改
```
$input-bg
```
登录后复制
变量来改变输入框的背景颜色。这种方法需要使用 Sass 编译器将 Sass 文件编译成 CSS 文件。
创建自定义的 CSS 类： 可以在自己的 CSS 文件中创建自定义的 CSS 类，并将其添加到表单控件中。这种方法可以避免直接覆盖 Bootstrap 的 CSS 类，从而降低代码的维护成本。

如何验证 Bootstrap 表单？

Bootstrap 本身并不提供表单验证功能，但可以与 JavaScript 库（如 jQuery Validation Plugin）结合使用，实现客户端表单验证。也可以使用 HTML5 的表单验证属性（如

required

登录后复制

pattern

登录后复制

min

登录后复制

max

登录后复制

）进行简单的表单验证。

Bootstrap 5 引入了新的浮动标签表单，应该如何使用？

Bootstrap 5 引入了浮动标签表单，这是一种新的表单样式，标签默认显示在输入框内部，当输入框获得焦点或有值时，标签会浮动到输入框上方。要使用浮动标签表单，需要将表单控件包裹在一个具有

.form-floating

登录后复制

类的

div

登录后复制

元素中。然后，将

.form-control

登录后复制

类添加到输入框中，并将

.form-label

登录后复制

类添加到标签中。确保标签的

for

登录后复制

属性与输入框的

id

登录后复制

属性相匹配。

<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
  <label for="floatingInput">邮箱地址</label>
</div>
<div class="form-floating">
  <input type="password" class="form-control" id="floatingPassword" placeholder="密码">
  <label for="floatingPassword">密码</label>
</div>

登录后复制

浮动标签表单可以使表单更加简洁美观，但需要注意浏览器兼容性问题。

如何处理 Bootstrap 表单中的辅助文本？

Bootstrap 提供了

.form-text

登录后复制

类，用于在表单控件下方显示辅助文本。辅助文本可以用于提供表单控件的说明、提示或错误信息。可以将辅助文本包裹在一个具有

.form-text

登录后复制

类的

div

登录后复制

元素中，并将其放置在表单控件下方。

<div class="mb-3">
  <label for="exampleInputEmail1" class="form-label">邮箱地址</label>
  <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
  <div id="emailHelp" class="form-text">我们绝不会与任何人分享您的邮箱。</div>
</div>

登录后复制

辅助文本可以帮助用户更好地理解表单控件的用途，并提供必要的指导。

以上就是如何通过css框架Bootstrap制作表单样式的详细内容，更多请关注php中文网其它相关文章！