CSS 在Bootstrap 4中，’.well’等效类是什么

在本文中，我们将介绍Bootstrap 4中的’.well’等效类是什么以及它的用法和示例。

阅读更多：CSS 教程

什么是’.well’等效类？

在Bootstrap 3中，’.well’是一个非常常用的类，它可以用来创建一个有边框和背景色的容器。它被广泛用于显示浅色的背景容器，以便突出显示内容。但是，在Bootstrap 4中，’.well’类已被移除，用其他等效类代替。因此，我们需要找到在Bootstrap 4中替代’.well’类的方法。

替代’.well’等效类的方法

在Bootstrap 4中，可以使用以下方法来替代’.well’等效类：

1. 使用.card类

.card类是Bootstrap 4中替代’.well’等效类的一种方法。它可以用来创建一个具有圆角和投影效果的容器。可以使用.card类来创建一个与’.well’相似的容器。

例如，使用.card类创建一个具有大背景色的容器：

<div class="card bg-primary">
  <div class="card-body">
    This is a primary card.
  </div>
</div>

2. 使用.bg-*类

在Bootstrap 4中，.bg-类可以用来添加背景颜色到任意HTML元素中。可以使用.bg-类来创建一个与’.well’相似的背景容器。

例如，使用.bg-light类创建一个具有浅色背景的容器：

<div class="bg-light p-3">
  This is a light background container.
</div>

3. 使用.border类

可以使用.border类为任意HTML元素添加边框。可以使用.border类来创建一个与’.well’相似的带有边框的容器。

例如，使用.border类创建一个具有边框的容器：

<div class="border p-3">
  This is a bordered container.
</div>

4. 使用其他自定义类

除了上述方法外，还可以使用自定义类来替代’.well’等效类。可以根据自己的需求定义一个新的类并将样式应用到其中。

例如，创建一个自定义类.my-well来替代’.well’等效类：

<style>
  .my-well {
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 3px;
  }
</style>

<div class="my-well">
  This is a custom well container.
</div>

使用上述方法中的任一种，我们可以在Bootstrap 4中替代’.well’等效类并创建具有类似效果的容器。

请注意，这些替代方法只是为了让我们在Bootstrap 4中创建与’.well’类似的效果。具体的样式和效果可以根据自己的需求进行修改和定制。

总结

通过本文，我们了解了在Bootstrap 4中，’.well’等效类已经被废除，但是我们可以使用其他等效类来替代它。我们可以使用.card类，.bg-*类，.border类或者自定义类来创建具有类似效果的容器。这些方法可以帮助我们在Bootstrap 4中创建具有边框和背景色的容器。希望本文对你有所帮助！