<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/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<div class="container">

  <h2>链接的多种颜色列表项</h2>

  <div class="list-group">

    <a href="#" class="list-group-item list-group-item-action">激活列表项</a>

    <a href="#" class="list-group-item list-group-item-success">成功列表项</a>

    <a href="#" class="list-group-item list-group-item-secondary">次要列表项</a>

    <a href="#" class="list-group-item list-group-item-info">信息列表项</a>

    <a href="#" class="list-group-item list-group-item-warning">警告列表项</a>

    <a href="#" class="list-group-item list-group-item-danger">危险列表项</a>

    <a href="#" class="list-group-item list-group-item-primary">主要列表项</a>

    <a href="#" class="list-group-item list-group-item-dark">深灰色列表项</a>

    <a href="#" class="list-group-item list-group-item-light">浅色列表项</a>

</div>

</div>