Bootstrap5 表单输入输入组（带复选框、带单选按钮、带按钮、带下拉按钮）

听海边涛声

于 2024-09-02 09:11:19 发布

阅读量43

点赞数

文章标签： ecmascript bootstrap 前端

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

版权

带复选框的表单输入组

<!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">
        <div class="input-group-text">
          <input type="checkbox">
        </div>
        <input type="text" class="form-control" placeholder="这是输入的内容">
      </div>
    </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="input-group">
        <div class="input-group-text">
          <input type="radio">
        </div>
        <input type="text" class="form-control" placeholder="这是输入的内容">
      </div>
    </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="input-group">
        <input type="text" class="form-control" placeholder="这是输入的内容">
        <button type="button" class="btn btn-primary">确定</button>
      </div>
    </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="input-group">
        <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"></button>
        <ul class="dropdown-menu">
          <li><a href="#" class="dropdown-item">链接1</a></li>
          <li><a href="#" class="dropdown-item">链接2</a></li>
          <li><a href="#" class="dropdown-item">链接3</a></li>
        </ul>
        <input type="text" class="form-control" placeholder="这是输入的内容">
      </div>
    </form>
  </div>

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

</html>