异常教程

Bootstrap 清单组/价格表（长文解析）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

在 Web 开发中，清晰展示信息和定价策略是提升用户体验的关键。Bootstrap 清单组/价格表作为前端框架中实用的组件组合，能够帮助开发者快速构建结构化列表与视觉吸引的定价方案。无论是展示产品功能、服务套餐，还是创建导航菜单，这些组件都能通过简洁的代码实现专业效果。本文将从基础到进阶，结合实际案例，带你掌握如何用 Bootstrap 打造高效、美观的清单与价格表。

一、Bootstrap 清单组：基础与核心功能

1.1 清单组的基本结构

清单组（List Group）是 Bootstrap 中用于展示列表项的组件，其核心是将无序列表（<ul>）转换为更现代、交互友好的卡片式布局。基本语法如下：

<ul class="list-group">  
  <li class="list-group-item">列表项 1</li>  
  <li class="list-group-item">列表项 2</li>  
</ul>

通过添加 list-group 类到 <ul> 标签，再为每个列表项包裹 list-group-item 类，即可快速生成一个垂直排列的列表。

比喻理解

想象清单组像一本书籍的目录：每个章节标题以卡片形式展示，用户能直观看到内容结构。

1.2 样式增强与交互功能

清单组支持多种样式和交互效果，例如：

  • 可点击项：添加 list-group-item-action 类，使列表项可点击并触发事件。
  • 活动状态：通过 active 类高亮当前选中的项。
  • 禁用项：使用 disabled 类让列表项不可交互。

示例代码：

<ul class="list-group">  
  <li class="list-group-item active">活动项</li>  
  <li class="list-group-item list-group-item-action" onclick="alert('点击了')">可点击项</li>  
  <li class="list-group-item disabled">不可用项</li>  
</ul>

1.3 自定义内容与嵌套

清单组支持嵌套列表和复杂内容，例如：

<ul class="list-group">  
  <li class="list-group-item">  
    <h5>主标题</h5>  
    <p>描述文字</p>  
  </li>  
  <li class="list-group-item">  
    <div class="d-flex justify-content-between">  
      <span>二级标题</span>  
      <span>价格：$99</span>  
    </div>  
  </li>  
</ul>

通过嵌套 HTML 元素，可以灵活设计列表项的内容结构。

二、构建价格表：从组件到完整方案

2.1 价格表的核心设计原则

价格表通常包含以下元素：

  • 标题：套餐名称（如“基础版”“高级版”）。
  • 价格：核心价格信息（如 $29/月）。
  • 功能列表：用清单组展示套餐包含的功能。
  • 行动按钮：引导用户购买或注册。

Bootstrap 没有内置的价格表组件，但可通过 卡片（Card） 和 清单组 组合实现。

2.2 基础价格表结构

以下是一个简单的价格表示例：

<div class="card" style="width: 18rem;">  
  <div class="card-header">基础版</div>  
  <div class="card-body">  
    <h5 class="card-title">$29/月</h5>  
    <ul class="list-group">  
      <li class="list-group-item">基础功能</li>  
      <li class="list-group-item">10GB 存储</li>  
      <li class="list-group-item">客服支持</li>  
    </ul>  
    <a href="#" class="btn btn-primary mt-3">立即购买</a>  
  </div>  
</div>

通过卡片组件包裹清单组，可以快速搭建基础价格表。

2.3 多列布局与响应式设计

实际项目中，价格表通常以多列形式展示多个套餐。使用 Bootstrap 的栅格系统（container 和 row）实现：

<div class="container">  
  <div class="row justify-content-center">  
    <div class="col-md-4">  
      <!-- 基础版卡片内容 -->  
    </div>  
    <div class="col-md-4">  
      <!-- 高级版卡片内容 -->  
    </div>  
  </div>  
</div>

通过 col-md-4 类，卡片在中等屏幕及以上会并排显示，小屏幕则堆叠。

三、进阶技巧：定制化与交互优化

3.1 自定义样式：颜色与边框

通过覆盖 Bootstrap 默认样式，可以为价格表添加个性化设计：

/* 使卡片背景更浅 */  
.custom-card {  
  background-color: #f8f9fa;  
  border: 1px solid #dee2e6;  
}  

/* 高亮活动状态的列表项 */  
.list-group-item.active {  
  background-color: #0d6efd;  
  color: white;  
}

将样式类添加到 HTML 中即可应用效果。

3.2 动态交互：悬停效果与按钮状态

使用 CSS 的 :hover 伪类和 JavaScript 增强交互：

<!-- 悬停时显示更多描述 -->  
<ul class="list-group">  
  <li class="list-group-item">  
    基础功能  
    <span class="d-none">包含基础工具集</span>  
  </li>  
</ul>  

<style>  
.list-group-item:hover .d-none {  
  display: inline;  
}  
</style>

3.3 响应式价格表优化

对于移动端，可以隐藏部分细节：

<ul class="list-group">  
  <li class="list-group-item d-none d-md-block">仅在中等及以上屏幕显示</li>  
</ul>

通过 d-none 和 d-md-block 控制元素的显示条件。

四、实战案例：构建专业级价格表

4.1 案例目标

设计一个包含三列价格表的页面，满足以下需求：

  • 每列展示不同套餐名称、价格、功能列表和按钮。
  • 高级版有更醒目的背景色。
  • 移动端自动堆叠为单列。

4.2 完整代码实现

<!DOCTYPE html>  
<html>  
<head>  
  <title>Bootstrap 价格表示例</title>  
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">  
  <style>  
    /* 自定义样式 */  
    .highlight-bg {  
      background-color: #e2e3e5;  
    }  
    .premium-card {  
      background-color: #e8f0fe;  
      border: 1px solid #b8daff;  
    }  
  </style>  
</head>  
<body>  
  <div class="container mt-5">  
    <div class="row justify-content-center gap-4">  
      <!-- 基础版 -->  
      <div class="col-md-4">  
        <div class="card highlight-bg">  
          <div class="card-header">基础版</div>  
          <div class="card-body">  
            <h5 class="card-title">$29/月</h5>  
            <ul class="list-group">  
              <li class="list-group-item">基础功能</li>  
              <li class="list-group-item">10GB 存储</li>  
              <li class="list-group-item">客服支持</li>  
            </ul>  
            <a href="#" class="btn btn-outline-primary mt-3">立即购买</a>  
          </div>  
        </div>  
      </div>  

      <!-- 高级版 -->  
      <div class="col-md-4">  
        <div class="card premium-card">  
          <div class="card-header">高级版</div>  
          <div class="card-body">  
            <h5 class="card-title">$99/月</h5>  
            <ul class="list-group">  
              <li class="list-group-item">所有基础功能</li>  
              <li class="list-group-item">50GB 存储</li>  
              <li class="list-group-item">优先客服</li>  
              <li class="list-group-item">团队协作工具</li>  
            </ul>  
            <a href="#" class="btn btn-primary mt-3">立即升级</a>  
          </div>  
        </div>  
      </div>  

      <!-- 企业版 -->  
      <div class="col-md-4">  
        <div class="card highlight-bg">  
          <div class="card-header">企业版</div>  
          <div class="card-body">  
            <h5 class="card-title">联系销售</h5>  
            <ul class="list-group">  
              <li class="list-group-item">定制化方案</li>  
              <li class="list-group-item">不限存储空间</li>  
              <li class="list-group-item">专属技术支持</li>  
            </ul>  
            <a href="#" class="btn btn-success mt-3">咨询客服</a>  
          </div>  
        </div>  
      </div>  
    </div>  
  </div>  
</body>  
</html>

4.3 效果解析

  • 样式分层：通过 highlight-bg 和 premium-card 实现视觉区分。
  • 响应式布局：gap-4 类增加列间距，col-md-4 确保中等屏幕并排显示。
  • 按钮差异化：使用不同颜色的按钮（btn-primary、btn-success）引导用户操作。

五、总结与扩展建议

通过本文，你已掌握 Bootstrap 清单组和价格表的构建方法。以下建议可帮助你进一步优化项目：

  1. 动态数据绑定：结合 JavaScript 或后端框架（如 React/Vue），实现价格表数据的动态加载。
  2. 动画效果：使用 CSS 动画库（如 Animate.css）为价格表添加悬停过渡效果。
  3. 国际化支持：通过 Bootstrap 的 text-nowrap 或 text-truncate 类适配多语言文本。

Bootstrap 清单组/价格表不仅是功能实现的工具，更是提升用户体验的核心组件。通过合理组合样式、交互与布局，开发者能快速构建出专业且用户友好的 Web 界面。

希望本文能帮助你在实际开发中高效运用 Bootstrap 的强大功能！

最新发布

查看更多文章