前端Wiki/CSS 框架/进阶/Bootstrap 常用组件

卡片与列表组

卡片（card）是内容聚合容器，结构分层清晰：card 外框 → card-img-top 顶部图片（自动贴合圆角）→ card-body 内容区（内含 card-title、card-text、按钮）。配合栅格就是商品列表、文章列表的万能方案。

列表组（list-group）是干净的垂直列表：list-group 容器 + list-group-item 每一项，支持 active 高亮、disabled 置灰。配合 flex 工具类可以做「左文字右徽章」的消息列表——d-flex justify-content-between 两端对齐。

组件组合是 Bootstrap 的精髓：卡片包列表组（如订单详情）、卡片头（card-header）放标题、卡片脚（card-footer）放操作按钮。不需要自己发明容器样式，把官方积木拼起来即可。

本节要点card 结构：card → card-img-top → card-body（title/text）；list-group 垂直列表支持 active/disabled；d-flex justify-content-between 实现两端对齐。

代码

<!-- 卡片：图 + 标题 + 摘要 + 按钮 -->
<div class="card" style="width: 18rem;">
  <img src="pic.jpg" class="card-img-top" alt="封面">
  <div class="card-body">
    <h5 class="card-title">文章标题</h5>
    <p class="card-text">摘要文字……</p>
    <a href="#" class="btn btn-primary">阅读全文</a>
  </div>
</div>

<!-- 列表组：干净的垂直列表 -->
<ul class="list-group">
  <li class="list-group-item active">当前选中项</li>
  <li class="list-group-item">普通项</li>
  <li class="list-group-item disabled">禁用项</li>
</ul>

<!-- 列表项 + 徽章：两端对齐的消息列表 -->
<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between">
    未读消息
    <span class="badge text-bg-primary">3</span>
  </li>
</ul>

🔗 相关词条justify-content Bootstrap flex 工具类圆角列表组件栅格

📚 推荐阅读

Element Plus v2.2 组件库教程万象云档

来自万象云档的免费在线书籍，点击封面直接阅读