首页 | 简单教程,简单编程

代码编辑器：

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/static/lib/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="/static/lib/jquery/3.3.1/jquery.min.js"></script>
<script src="/static/lib/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="/static/lib/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="container">
  <h1>多种颜色卡片</h1>
  <p>可以在 .card 元素上添加以下 CSS 类来设置卡片的颜色</p>
    <div class="card">
      <div class="card-body">Basic card</div>
    </div>
    <br>
    <div class="card bg-primary text-white">
      <div class="card-body">Primary card</div>
    </div>
    <br>
    <div class="card bg-success text-white">
      <div class="card-body">Success card</div>
    </div>
    <br>
    <div class="card bg-info text-white">
      <div class="card-body">Info card</div>
    </div>
    <br>
    <div class="card bg-warning text-white">
      <div class="card-body">Warning card</div>
    </div>
    <br>
    <div class="card bg-danger text-white">
      <div class="card-body">Danger card</div>
    </div>
    <br>
    <div class="card bg-secondary text-white">
      <div class="card-body">Secondary card</div>
    </div>
    <br>
    <div class="card bg-dark text-white">
      <div class="card-body">Dark card</div>
    </div>
    <br>
    <div class="card bg-light text-dark">
      <div class="card-body">Light card</div>
    </div>
</div>

运行结果：