Bootstrap Wells

Bootstrap：模拟内嵌效果 (Well Effects)

内嵌内容样式（原 Well 效果）

Bootstrap 较旧版本中用于创建内容内嵌效果的 .well 类已在 Bootstrap 4 中被弃用，并在 Bootstrap 5 中移除。然而，你可以使用 Bootstrap 的工具类 (utility classes) 来实现类似的视觉样式，涉及背景、内边距 (padding)、边框 (borders) 和阴影。

基本内嵌式样示例：

以下是如何使用 Bootstrap 5 工具类创建类似效果：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <title>Simulating Wells</title>
</head>
<body>
  <div class="container mt-3">
    <div class="p-3 mb-2 bg-light border rounded">
      This content has a light background, padding, a border, and rounded corners, similar to a basic well.
    </div>
  </div>
</body>
</html>

在此示例中： .p-3 添加内边距 (padding)。 .mb-2 添加外边距 (margin) 到元素底部。 .bg-light 提供浅灰色背景。 .border 添加默认边框。 .rounded 添加圆角 (rounded corners)。

改变外观

你可以通过使用不同的背景颜色工具类（例如 .bg-body-secondary）、内边距工具类（.p-1 到 .p-5）和边框工具类来进一步定制外观。

不同内边距和背景的示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-3">
    <div class="p-4 mb-3 bg-body-secondary border rounded-3">
      Larger padding, different background, and more pronounced rounding.
    </div>

    <div class="p-2 mb-3 bg-dark text-white border border-secondary rounded-0">
      Dark background, smaller padding, and no rounded corners.
    </div>
  </div>
</body>
</html>

	提示：Bootstrap 5 鼓励使用工具类来实现灵活和自定义的样式，而不是像 well 这样预定义的组件。卡片 (Cards) 是另一种用于分组内容的现代替代方案。