Bootstrap5 表单输入组

最新推荐文章于 2024-09-02 09:11:19 发布

听海边涛声

最新推荐文章于 2024-09-02 09:11:19 发布

阅读量116

点赞数 4

文章标签： bootstrap 前端

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

版权

表单输入组

https://getbootstrap.com/docs/5.3/forms/input-group/

.input-group 类是一种容器，通过在输入字段的前面或后面添加图标、文字或按钮作为“帮助文本”来增强输入。
.input-group-text 类指定帮助文本的样式。

例如：

<!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="input-group">
        <input type="text" class="form-control" placeholder="请输入邮箱">
        <span class="input-group-text">@yeah.net</span>
      </div>
    </form>
  </div>

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

</html>

在这里插入图片描述

输入组的大小

https://getbootstrap.com/docs/5.3/forms/input-group/#sizing

.input-group-sm用于小型输入组，.input-group-lg用于大型输入组。

例如：

<!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="input-group">
        <input type="text" class="form-control" placeholder="请输入邮箱">
        <span class="input-group-text">@yeah.net</span>
      </div>
      <div class="input-group input-group-sm">
        <input type="text" class="form-control" placeholder="请输入邮箱">
        <span class="input-group-text">@yeah.net</span>
      </div>
      <div class="input-group input-group-lg">
        <input type="text" class="form-control" placeholder="请输入邮箱">
        <span class="input-group-text">@yeah.net</span>
      </div>
    </form>
  </div>

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

</html>

在这里插入图片描述

多个输入

https://getbootstrap.com/docs/5.3/forms/input-group/#multiple-inputs

尽管系统在视觉上能够处理多个<input>元素，但是验证样式功能仅限于那些包含单一<input>元素的输入组。

例如：

<!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="input-group">
        <span class="input-group-text">请输入姓名:</span>
        <input type="text" class="form-control" placeholder="姓">
        <input type="text" class="form-control" placeholder="名">
      </div>
    </form>
  </div>

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

</html>