当前位置: 首页 > 编程笔记 >

向Bootstrap 4卡添加浅灰色背景色

林英武
2023-03-14
本文向大家介绍向Bootstrap 4卡添加浅灰色背景色,包括了向Bootstrap 4卡添加浅灰色背景色的使用技巧和注意事项,需要的朋友参考一下

要将浅灰色背景色添加到Bootstrap中的卡,请使用bg-light上下文类和卡类。

要设置浅灰色背景,请将其添加到<div>类中-

<div class="card bg-light text-dark">
  <div class="card-body">Reduce size of images</div>
</div>

您可以尝试运行以下代码以在Bootstrap 4中为卡添加亮灰色背景色-

示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  </head>

<body>
  <div class="container">
    <h2>Optimization</h2>
    <div class="card bg-light text-dark">
      <div class="card-body">Reduce size of images</div>
    </div>
    <div class="card bg-light text-dark">
      <div class="card-body">Clear Cache</div>
    </div>
    <div class="card bg-light text-dark">
      <div class="card-body">Use CDN</div>
    </div>
  </div>

</body>
</html>
 类似资料:
  • 本文向大家介绍向Bootstrap 4卡添加灰色背景色,包括了向Bootstrap 4卡添加灰色背景色的使用技巧和注意事项,需要的朋友参考一下 要为Bootstrap 4卡添加灰色背景色,请将该卡类与bg-dark上下文类一起使用- 将卡主体设置在相同的<div>类中- 让我们看看完整的示例,向Bootstrap卡添加灰色背景色- 示例

  • 本文向大家介绍使用CSS向表单输入添加背景色,包括了使用CSS向表单输入添加背景色的使用技巧和注意事项,需要的朋友参考一下 要将背景色添加到表单输入中,请使用 background-color属性。 您可以尝试运行以下代码以实现背景颜色属性以形成 示例

  • 本文向大家介绍在默认的Bootstrap导航栏中为活动链接添加灰色背景色,包括了在默认的Bootstrap导航栏中为活动链接添加灰色背景色的使用技巧和注意事项,需要的朋友参考一下 要将灰色背景色添加到活动链接,请使用Bootstrap中的.active类。 您可以尝试运行以下代码来实现.active类- 示例

  • 通常情况下,当您使用或时,JTextField的背景/前景色会变成“灰色”。但是,如果之前使用设置了背景色(例如),那么调用或将不再影响背景色。相反,它会被先前设置的颜色覆盖。 在WinForms(.NET)中,这可以通过将背景颜色“重置”为非覆盖默认值来解决,即。这将导致文本框恢复标准行为。然而,我还没有为JTextField找到类似的“默认值”。当JTextField被禁用或设置为只读时,如何

  • 本文向大家介绍向Bootstrap列表组中的活动列表项添加背景色,包括了向Bootstrap列表组中的活动列表项添加背景色的使用技巧和注意事项,需要的朋友参考一下 使用.active类将灰色背景色添加到Bootstrap列表组中的活动列表项中。 您可以尝试运行以下代码将背景色添加到活动列表项中- 示例