Bootstrap 5 保姆级教程（八）：卡片 & 下拉菜单-阿里云开发者社区

一、卡片

1.1 简单的卡片

我们可以通过 Bootstrap5 的 .card 与 .card-body 类来创建一个简单的卡片，卡片可以包含头部、内容、底部以及各种颜色设置，实例如下:

<div class="container mt-3">
  <h2>简单的卡片</h2>
  <div class="card">
    <div class="card-body">简单的卡片</div>
  </div>
</div>

1.2 头部和底部

.card-header类用于创建卡片的头部样式， .card-footer 类用于创建卡片的底部样式：

<div class="container mt-3">
  <h2>卡片头部和底部</h2>
  <div class="card">
    <div class="card-header">头部</div>
    <div class="card-body">内容</div> 
    <div class="card-footer">底部</div>
  </div>
</div>

1.3 多种颜色卡片

Bootstrap 5 提供了多种卡片的背景颜色类： .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light。

<div class="container mt-3">
  <h2>多种颜色卡片</h2>
  <div class="card">
    <div class="card-body">基础卡片</div>
  </div>
  <br>
  <div class="card bg-primary text-white">
    <div class="card-body">主要卡片</div>
  </div>
  <br>
  <div class="card bg-success text-white">
    <div class="card-body">成功卡片</div>
  </div>
  <br>
  <div class="card bg-info text-white">
    <div class="card-body">信息卡片</div>
  </div>
  <br>
  <div class="card bg-warning text-white">
    <div class="card-body">警告卡片</div>
  </div>
  <br>
  <div class="card bg-danger text-white">
    <div class="card-body">危险卡片</div>
  </div>
  <br>
  <div class="card bg-secondary text-white">
    <div class="card-body">次要卡片</div>
  </div>
  <br>
  <div class="card bg-dark text-white">
    <div class="card-body">黑色卡片</div>
  </div>
  <br>
  <div class="card bg-light text-dark">
    <div class="card-body">浅色卡片</div>
  </div>
</div>

1.4 标题、文本和链接

我们可以在头部元素上使用 .card-title 类来设置卡片的标题。 .card-body 类用于设置卡片正文的内容。.card-text 类用于设置卡 .card-body 类中的

标签，如果说最后一行可以移除底部边

距。 .card-link 类用于给链接设置颜色。

<div class="container mt-3">
  <h2>标题、文本和链接</h2>
  <div class="card">
    <div class="card-body">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">Some example text. Some example text.</p>
      <a href="#" class="card-link">Card link</a>
      <a href="#" class="card-link">Another link</a>
    </div>
  </div>
</div>

1.5 图片卡片

我们可以给添加 .card-img-top（图片在文字上方）或 .card-img-bottom（图片在文字下方来设置图片卡片：

<div class="container mt-3">
  <h2>图片卡片</h2>
  <p>图片在头部 (card-img-top):</p>
  <div class="card" style="width:400px">
    <img class="card-img-top" src="https://static.jyshare.com/images/mix/img_avatar.png" alt="Card image" style="width:100%">
    <div class="card-body">
      <h4 class="card-title">John Doe</h4>
      <p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>
      <a href="#" class="btn btn-primary">See Profile</a>
    </div>
  </div>
  <br>
  
  <p>图片在底部(card-img-bottom):</p>
  <div class="card" style="width:400px">
    <div class="card-body">
      <h4 class="card-title">Jane Doe</h4>
      <p class="card-text">Some example text some example text. Jane Doe is an architect and engineer</p>
      <a href="#" class="btn btn-primary">See Profile</a>
    </div>
    <img class="card-img-bottom" src="https://static.jyshare.com/images/mix/img_avatar.png" alt="Card image" style="width:100%">
  </div>
</div>

如果图片要设置为背景，可以使用 .card-img-overlay 类:

<div class="container mt-3">
  <h2>文字覆盖图片</h2>
  <p>如果图片要设置为背景，可以使用 .card-img-overlay 类:</p>
  <div class="card img-fluid" style="width:500px">
    <img class="card-img-top" src="./img/bootstrap.png" alt="Card image" style="width:100%">
    <div class="card-img-overlay">
      <h4 class="card-title">John Doe</h4>
      <p class="card-text">Some example text some example text. Some example text some example text. Some example text some example text. Some example text some example text.</p>
      <a href="#" class="btn btn-primary">See Profile</a>
    </div>
  </div>
</div>

二、下拉菜单

2.1 创建下拉菜单

下拉菜单是可切换的，是以列表格式显示链接的上下文菜单

<div class="container mt-3">
  <h2>Dropdowns</h2>
  <p>.dropdown 类用来指定一个下拉菜单。</p>
  <p>.dropdown-menu 类来设置实际下拉菜单。</p>
  <p>我们可以使用一个按钮或链接来打开下拉菜单， 按钮或链接需要添加 .dropdown-toggle 和 data-toggle="dropdown" 属性。</p>                                          
  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
      下拉菜单按钮
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">链接 1</a></li>
      <li><a class="dropdown-item" href="#">链接 2</a></li>
      <li><a class="dropdown-item" href="#">链接 3</a></li>
    </ul>
  </div>
</div>

2.2 下拉菜单中的分割线

.dropdown-divider 类用于在下拉菜单中创建一个水平的分割线：

<div class="container mt-3">
  <h2>下拉菜单中的分割线</h2>
  <p>.dropdown-divider 类用于在下拉菜单中创建一个水平的分割线：</p>                   
  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
      下拉菜单按钮
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">链接 1</a></li>
      <li><a class="dropdown-item" href="#">链接 2</a></li>
      <li><a class="dropdown-item" href="#">链接 3</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">链接 4</a></li>
    </ul>
  </div>
</div>

2.3 下拉菜单中的标题

.dropdown-header 类用于在下拉菜单中添加标题：

<div class="container mt-3">
  <h2>下拉菜单</h2>
  <p>.dropdown-header 类用于在下拉菜单中添加标题：</p>
 
  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
      下拉菜单按钮
    </button>
    <ul class="dropdown-menu">
      <li><h5 class="dropdown-header">标题 1</h5></li>
      <li><a class="dropdown-item" href="#">链接 1</a></li>
      <li><a class="dropdown-item" href="#">链接 2</a></li>
      <li><a class="dropdown-item" href="#">链接 3</a></li>
      <li><h5 class="dropdown-header">标题 2</h5></li>
      <li><a class="dropdown-item" href="#">链接 4</a></li>
    </ul>
  </div>
</div>

2.4 下拉菜单中的可用项与禁用项

.active 类会让下拉菜单的选项高亮显示 (添加蓝色背景)。

如果要禁用下拉菜单的选项，可以使用.disabled 类。

<div class="container mt-3">
  <h2>下拉菜单</h2>
  <p>.active 类会让下拉菜单的选项高亮显示 (添加蓝色背景)。</p>
  <p>如果要禁用下拉菜单的选项，可以使用.disabled 类。</p>
  
  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
      下拉菜单
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">常规项</a></li>
      <li><a class="dropdown-item active" href="#">激活项</a></li>
      <li><a class="dropdown-item disabled" href="#">禁用项</a></li>
    </ul>
  </div>
</div>

2.5 下拉菜单的定位

如果我们想让下拉菜单右对齐，可以在元素上的 .dropdown 类后添加 .dropend 或 .dropstart 类。

.dropend 是右对齐， .dropstart 是左对齐。

<div class="container mt-3">
  <h2>下拉菜单</h2>
  <p>如果我们想让下拉菜单右对齐，可以在元素上的 .dropdown 类后添加 .dropend 类。</p>
 
  <div class="dropdown dropend">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
      右边显示菜单
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">常规项</a></li>
      <li><a class="dropdown-item active" href="#">激活项</a></li>
      <li><a class="dropdown-item disabled" href="#">禁用项</a></li>
    </ul>
  </div>
  
  <p>如果我们想让下拉菜单左边对齐，可以在元素上的 .dropdown 类后添加 .dropstart 类，同时我们将整个下拉菜单向右浮动。</p>
 
  <div class="dropdown dropstart text-end">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
      左边显示菜单
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">常规项</a></li>
      <li><a class="dropdown-item active" href="#">激活项</a></li>
      <li><a class="dropdown-item disabled" href="#">禁用项</a></li>
    </ul>
  </div>
</div>

2.6 下拉菜单弹出方向设置

下拉菜单弹出方向默认为向下，当然我们也可以设置不同的方向。

2.6.1 指定向右弹出的下拉菜单

如果你希望下拉菜单向右下方弹出，可以在 div 元素上添加 .dropdown-menu-end 类:

<div class="container mt-3">
  <h2>下拉菜单</h2>
  <p>在 .dropdown-menu 类后面添加 .dropdown-menu-end 类，让下拉菜单向右下方弹出：</p>
                                    
  <div class="dropdown dropdown-menu-end">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
      下拉菜单右下方弹出
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">链接 1</a></li>
      <li><a class="dropdown-item" href="#">链接 2</a></li>
      <li><a class="dropdown-item" href="#">链接 3</a></li>
    </ul>
  </div>
</div>

2.6.2 指定向上弹出的上拉菜单

如果你希望上拉菜单向上弹出，可以在 div 元素上添加 "dropup" 类:

<div class="container mt-3">
  <h2>下拉菜单</h2>
  <p> .dropup 类让下拉菜单向上弹出</p>
  <p>添加一些内容，用于测试向上弹出效果。</p> 
  <p>添加一些内容，用于测试向上弹出效果。</p>
  <div class="dropup">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
      下拉菜单
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">链接 1</a></li>
      <li><a class="dropdown-item" href="#">链接 2</a></li>
      <li><a class="dropdown-item" href="#">链接 3</a></li>
    </ul>
  </div>
</div>

2.7 按钮组中设置下拉菜单

我们可以在按钮中添加下拉菜单：

<div class="container mt-3">
  <h2>内嵌按钮组</h2>
  <p>内嵌按钮组创建下拉菜单:</p>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <div class="btn-group">
      <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Sony</button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Tablet</a></li>
        <li><a class="dropdown-item" href="#">Smartphone</a></li>
      </ul>
    </div>
  </div>
</div>

垂直按钮组带下拉菜单：

<div class="container mt-3">
  <h2>垂直方向内嵌按钮组</h2>
  <p>垂直方向内嵌按钮组创建下拉菜单:</p>
  <div class="btn-group-vertical">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <div class="btn-group">
      <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Sony</button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Tablet</a></li>
        <li><a class="dropdown-item" href="#">Smartphone</a></li>
      </ul>
    </div>
  </div>
</div>

Bootstrap 5 保姆级教程（八）：卡片 & 下拉菜单