Bootstrap5 创建基础表单

听海边涛声

已于 2024-09-01 19:04:53 修改

阅读量96

点赞数 1

文章标签： bootstrap 前端

于 2024-09-01 19:03:07 首次发布

本文链接：https://blog.csdn.net/panghuangang/article/details/141787398

版权

注意：已弃用特定于表单的布局类：.form-group, .form-row, .form-inline.
https://getbootstrap.com/docs/5.3/migration/#forms-1
在这里插入图片描述

创建垂直表单

https://getbootstrap.com/docs/5.3/forms/overview/

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>

<body>
  <div class="container">
    <form action="">
      <div>
        <label for="" class="form-label">用户名:</label>
        <input type="text" class="form-control">
      </div>
      <div>
        <label for="" class="form-label">密码:</label>
        <input type="password" class="form-control">
      </div>
    </form>
  </div>

  <script src="bootstrap5/js/bootstrap.bundle.min.js"></script>
</body>

</html>

在这里插入图片描述

创建内联表单

https://getbootstrap.com/docs/5.3/forms/layout/#inline-forms

表单元素并排显示，可以使用.row 和 .col 类。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>

<body>
  <div class="container">
    <form action="">
      <div class="row">
        <div class="col">
          <input type="text" class="form-control" placeholder="请输入用户名">
        </div>
        <div class="col">
          <input type="password" class="form-control" placeholder="请输入密码">
        </div>
      </div>
    </form>
  </div>

  <script src="bootstrap5/js/bootstrap.bundle.min.js"></script>
</body>

</html>

在这里插入图片描述

表单控件尺寸

https://getbootstrap.com/docs/5.3/forms/form-control/#sizing

利用.form-control-lg 或.form-control-sm类来设置表单控件的高度。

例如：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>

<body>
  <div class="container">
    <form action="">
      <input type="password" class="form-control form-control-lg" placeholder="请输入密码">
      <input type="password" class="form-control form-control-sm" placeholder="请输入密码">
    </form>
  </div>

  <script src="bootstrap5/js/bootstrap.bundle.min.js"></script>
</body>

</html>

在这里插入图片描述

向表单控件添加帮助文本

在这里插入图片描述

完整示例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>

<body>
  <div class="container">
    <form action="">
      <div class="row">
        <div class="col-auto">
          <label for="" class="form-label">密码:</label>
        </div>
        <div class="col-auto">
          <input type="text" class="form-control" placeholder="请输入密码">
        </div>
        <div class="col-auto">
          <span class="form-text">必须8-20个字符长</span>
        </div>
      </div>
    </form>
  </div>

  <script src="bootstrap5/js/bootstrap.bundle.min.js"></script>
</body>

</html>