正文

bootstrap中让表单居中显示图片的技巧解析

/0 浏览量
0406

在Bootstrap框架中，实现表单居中显示图片是一个常见的需求。Bootstrap提供了丰富的类和工具来帮助我们快速搭建响应式布局。下面，我将详细解析如何在Bootstrap中实现表单居中显示图片的技巧。

1. 准备工作

首先，确保你的项目中已经引入了Bootstrap CSS和JS文件。你可以从Bootstrap官网下载最新版本的文件，或者使用CDN链接。

<!-- 引入Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">

<!-- 引入Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

2. 创建基本表单

接下来，创建一个基本的表单结构。这里我们使用Bootstrap的表单组件。

<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>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

3. 居中显示图片

为了让图片在表单中居中显示，我们可以使用Bootstrap的响应式工具类。这里，我们使用d-flex justify-content-center align-items-center类来实现。

<div class="d-flex justify-content-center align-items-center h-100">
  <form>
    <!-- ... 表单内容 ... -->
  </form>
</div>

这样，图片就会在表单上方居中显示。

4. 添加图片

现在，我们添加一个图片元素，并使用img-fluid类使其具有响应式特性。

<div class="d-flex justify-content-center align-items-center h-100">
  <img src="your-image.jpg" alt="图片" class="img-fluid">
  <form>
    <!-- ... 表单内容 ... -->
  </form>
</div>

5. 调整高度

为了使图片和表单在视口中垂直居中，我们可以设置容器的最小高度为100%。

<div class="d-flex justify-content-center align-items-center h-100">
  <img src="your-image.jpg" alt="图片" class="img-fluid">
  <form>
    <!-- ... 表单内容 ... -->
  </form>
</div>

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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
</head>
<body>
  <div class="d-flex justify-content-center align-items-center h-100">
    <img src="your-image.jpg" alt="图片" class="img-fluid">
    <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>
      <button type="submit" class="btn btn-primary">提交</button>
    </form>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

通过以上步骤，你可以在Bootstrap中实现表单居中显示图片的效果。希望这篇文章能帮助你更好地理解Bootstrap的布局技巧。

-- 展开阅读全文 --