揭秘Bootstrap星星评分系统：轻松实现互动式星级评价代码攻略

Bootstrap 是一个流行的前端框架，它提供了许多实用的组件来帮助开发者快速构建响应式网站。其中，星星评分系统是一个常见的功能，用于收集用户对产品或服务的评价。本文将详细介绍如何使用 Bootstrap 实现一个互动式星级评价系统。

1. 准备工作

在开始之前，请确保您的项目中已经包含了 Bootstrap 的 CSS 和 JS 文件。可以从 Bootstrap 官网下载最新版本的 Bootstrap。

<!-- 引入 Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">

<!-- 引入 Bootstrap JS 和依赖的 Popper.js -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

2. 创建星星评分容器

首先，我们需要创建一个容器来放置星星评分组件。这个容器可以是一个简单的 HTML 元素，例如一个 div。

<div id="star-rating" class="rating"></div>

3. 添加星星图标

接下来，在容器中添加星星图标。可以使用 Font Awesome 或其他图标库中的星星图标。

<div id="star-rating" class="rating">
  <span class="fa fa-star"></span>
  <span class="fa fa-star"></span>
  <span class="fa fa-star"></span>
  <span class="fa fa-star"></span>
  <span class="fa fa-star"></span>
</div>

4. 初始化星星评分

使用 JavaScript 来初始化星星评分系统。我们可以为每个星星添加一个事件监听器，当用户点击星星时，更新评分。

document.addEventListener('DOMContentLoaded', function () {
  var stars = document.querySelectorAll('.fa-star');
  var rating = 0;

  stars.forEach(function (star, index) {
    star.addEventListener('click', function () {
      rating = index + 1;
      stars.forEach(function (s) {
        s.classList.remove('checked');
      });
      for (var i = 0; i < rating; i++) {
        stars[i].classList.add('checked');
      }
    });
  });
});

5. 样式调整

为了使星星评分看起来更美观，我们可以添加一些 CSS 样式。

.rating {
  direction: rtl;
  unicode-bidi: bidi-override;
  text-align: center;
  cursor: pointer;
}

.rating > span {
  display: inline-block;
  position: relative;
  width: 1.1em;
  font-size: 2em;
  color: #ccc;
  transition: all 0.25s ease-out;
}

.rating > span.checked {
  color: #f00;
}

6. 使用示例

现在，您的星星评分系统已经可以使用了。用户可以通过点击星星来为产品或服务评分，星星会实时更新以显示当前的评分。

<div id="star-rating" class="rating">
  <span class="fa fa-star"></span>
  <span class="fa fa-star"></span>
  <span class="fa fa-star"></span>
  <span class="fa fa-star"></span>
  <span class="fa fa-star"></span>
</div>

通过以上步骤，您已经成功实现了一个基于 Bootstrap 的互动式星级评价系统。这个系统不仅易于使用，而且可以轻松地集成到任何 Bootstrap 项目中。