反馈 & Reviews - Snippets | Front - 基于Boostrap5的多用途响应式模板库

Component #1

预览
HTML

学生反馈

4.7

课程评分

205

戴夫·奥斯汀
2019 年 4 月 3 日

这门课程帮助我以一种非常简单有效的方式学习python & 增强了我的信心。概念已经以水晶般清晰的方式进行了解释。

戴夫 - 已购买

这个有帮助吗?
是(45) 否(21)
海莉
2019 年 1 月 19 日

艾米丽·米尔达的尼科粉丝

Python硕士，我也参加了其他课程。给我留下了很深的印象，很好的老师，讲解详细，通俗易懂。我非常感谢他，并希望如此。谢谢你！

海莉 - 已购买

这个有帮助吗?
是(2) 否(0)
克里泽尔
2018 年 12 月 21 日

需要处理第 19 节。本节中的第一个主题告诉我们它是可选的，可以跳过。事实并非如此，您的指示告诉我们如果出现问题，请联系 udemy 支持。我们做到了，他们告诉我们与您联系。

克里泽尔 - 已购买

这个有帮助吗?
是(0) 否(0)

查看所有评论

              
                <!-- Content -->
                <div class="container content-space-1">
                  <div class="mb-4">
                    <h3>学生反馈</h3>
                  </div>

                  <div class="row mb-5">
                    <div class="col-lg-4">
                      <!-- Card -->
                      <div class="card card-sm bg-primary text-center mb-3">
                        <div class="card-body">
                          <span class="display-4 text-white">4.7</span>

                          <div class="d-flex justify-content-center gap-2 mb-2">
                            <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="22">
                            <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="22">
                            <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="22">
                            <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="22">
                            <img src="../assets/svg/illustrations/star-half.svg" alt="Review rating" width="22">
                          </div>
                          <span class="text-white">课程评分</span>
                        </div>
                      </div>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->

                    <div class="col-lg-8">
                      <!-- Ratings -->
                      <div class="d-grid gap-2">
                        <a class="row align-items-center" href="#">
                          <div class="col-7">
                            <div class="progress">
                              <div class="progress-bar" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                          </div>
                          <!-- End Col -->

                          <div class="col-2 text-end">
                            <div class="d-flex">
                              <div class="d-flex gap-1 me-2">
                                <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                              </div>
                              <span>205</span>
                            </div>
                          </div>
                          <!-- End Col -->
                        </a>
                        <!-- End Row -->

                        <a class="row align-items-center" href="#">
                          <div class="col-7">
                            <div class="progress">
                              <div class="progress-bar" role="progressbar" style="width: 53%;" aria-valuenow="53" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                          </div>
                          <!-- End Col -->

                          <div class="col-2 text-end">
                            <div class="d-flex">
                              <div class="d-flex gap-1 me-2">
                                <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
                              </div>
                              <span>55</span>
                            </div>
                          </div>
                          <!-- End Col -->
                        </a>
                        <!-- End Row -->
                        
                        <a class="row align-items-center" href="#">
                          <div class="col-7">
                            <div class="progress">
                              <div class="progress-bar" role="progressbar" style="width: 20%;" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                          </div>
                          <!-- End Col -->

                          <div class="col-2 text-end">
                            <div class="d-flex">
                              <div class="d-flex gap-1 me-2">
                                <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
                              </div>
                              <span>23</span>
                            </div>
                          </div>
                          <!-- End Col -->
                        </a>
                        <!-- End Row -->
                        
                        <a class="row align-items-center" href="#">
                          <div class="col-7">
                            <div class="progress">
                              <div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                          </div>
                          <!-- End Col -->

                          <div class="col-2 text-end">
                            <div class="d-flex">
                              <div class="d-flex gap-1 me-2">
                                <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
                              </div>
                              <span>0</span>
                            </div>
                          </div>
                          <!-- End Col -->
                        </a>
                        <!-- End Row -->
                        
                        <a class="row align-items-center" href="#">
                          <div class="col-7">
                            <div class="progress">
                              <div class="progress-bar" role="progressbar" style="width: 1%;" aria-valuenow="1" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                          </div>
                          <!-- End Col -->

                          <div class="col-2 text-end">
                            <div class="d-flex">
                              <div class="d-flex gap-1 me-2">
                                <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
                                <img src="../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="16">
                              </div>
                              <span>4</span>
                            </div>
                          </div>
                          <!-- End Col -->
                        </a>
                        <!-- End Row -->
                      </div>
                      <!-- End Ratings -->
                    </div>
                    <!-- End Col -->
                  </div>
                  <!-- End Row -->

                  <!-- Heading -->
                  <div class="border-bottom pb-4 mb-4">
                    <div class="row align-items-center">
                      <div class="col-sm-6 mb-2 mb-sm-0">
                        <h3 class="mb-0">Reviews</h3>
                      </div>
                      <!-- End Col -->

                      <div class="col-sm-6">
                        <!-- Form -->
                        <form>
                          <div class="input-group input-group-merge">
                            <input type="search" class="form-control" placeholder="Search评论" aria-label="Search评论">
                            <div class="input-group-append input-group-text">
                              <i class="bi-search"></i>
                            </div>
                          </div>
                        </form>
                        <!-- End Form -->
                      </div>
                      <!-- End Col -->
                    </div>
                    <!-- End Row -->
                  </div>
                  <!-- End Heading -->

                  <!-- Comment -->
                  <ul class="list-comment list-comment-divider mb-7">
                    <!-- Item -->
                    <li class="list-comment-item">
                      <div class="d-flex gap-1 mb-3">
                        <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                        <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                        <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                        <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                        <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                      </div>

                      <!-- Media -->
                      <div class="d-flex align-items-center mb-3">
                        <div class="flex-shrink-0">
                          <img class="avatar avatar-sm avatar-circle" src="../assets/img/160x160/img3.jpg" alt="图片描述内容">
                        </div>

                        <div class="flex-grow-1 ms-3">
                          <div class="d-flex justify-content-between align-items-center">
                            <h5 class="mb-0">戴夫·奥斯汀</h5>
                            <span class="d-block small text-muted">2019 年 4 月 3 日</span>
                          </div>
                        </div>
                      </div>
                      <!-- End Media -->

                      <div class="mb-5">
                        <p>这门课程帮助我以一种非常简单有效的方式学习python & 增强了我的信心。 概念已经以水晶般清晰的方式进行了解释。</p>
                      </div>

                      <div class="mb-2">
                        <span class="text-dark fw-semi-bold">戴夫</span>
                        <span>- 已购买</span>
                      </div>

                      <!-- Media -->
                      <div class="d-flex align-items-center">
                        <span class="small me-2">这个有帮助吗?</span>

                        <div class="d-flex gap-2">
                          <a class="btn btn-white btn-xs" href="javascript:;">
                            <i class="bi-hand-thumbs-up me-1"></i> 是<span>(45)</span>
                          </a>
                          <a class="btn btn-white btn-xs" href="javascript:;">
                            <i class="bi-hand-thumbs-down me-1"></i> No <span>(21)</span>
                          </a>
                        </div>
                      </div>
                      <!-- End Media -->
                    </li>
                    <!-- End Item -->

                    <!-- Item -->
                    <li class="list-comment-item">
                      <div class="d-flex gap-1 mb-3">
                        <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                        <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                        <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                        <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                        <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                      </div>

                      <!-- Media -->
                      <div class="d-flex align-items-center mb-3">
                        <div class="flex-shrink-0">
                          <img class="avatar avatar-sm avatar-circle" src="../assets/img/160x160/img1.jpg" alt="图片描述内容">
                        </div>

                        <div class="flex-grow-1 ms-3">
                          <div class="d-flex justify-content-between align-items-center">
                            <h5 class="mb-0">海莉</h5>
                            <span class="d-block small text-muted">2019 年 1 月 19 日</span>
                          </div>
                        </div>
                      </div>
                      <!-- End Media -->

                      <div class="mb-5">
                        <p>艾米丽·米尔达 的 尼科 粉丝</p>
                        <p>Python硕士，我也参加了其他课程。 给我留下了很深的印象，很好的老师，讲解详细，通俗易懂。 我非常感谢他，并希望如此。 谢谢你！</p>
                      </div>

                      <div class="mb-2">
                        <span class="text-dark fw-semi-bold">海莉</span>
                        <span>- 已购买</span>
                      </div>

                      <!-- Media -->
                      <div class="d-flex align-items-center">
                        <span class="small me-2">这个有帮助吗?</span>

                        <div class="d-flex gap-2">
                          <a class="btn btn-white btn-xs" href="javascript:;">
                            <i class="bi-hand-thumbs-up me-1"></i> 是<span>(2)</span>
                          </a>
                          <a class="btn btn-white btn-xs" href="javascript:;">
                            <i class="bi-hand-thumbs-down me-1"></i> No <span>(0)</span>
                          </a>
                        </div>
                      </div>
                      <!-- End Media -->
                    </li>
                    <!-- End Item -->

                    <!-- Item -->
                    <li class="list-comment-item">
                      <div class="d-flex gap-1 mb-3">
                        <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                        <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                        <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                        <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                        <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                      </div>

                      <!-- Media -->
                      <div class="d-flex align-items-center mb-3">
                        <div class="flex-shrink-0">
                          <img class="avatar avatar-sm avatar-circle" src="../assets/img/160x160/img8.jpg" alt="图片描述内容">
                        </div>

                        <div class="flex-grow-1 ms-3">
                          <div class="d-flex justify-content-between align-items-center">
                            <h5 class="mb-0">克里泽尔</h5>
                            <span class="d-block small text-muted">2018 年 12 月 21 日</span>
                          </div>
                        </div>
                      </div>
                      <!-- End Media -->

                      <div class="mb-5">
                        <p>需要处理第 19 节。 本节中的第一个主题告诉我们它是可选的，可以跳过。 事实并非如此，您的指示告诉我们如果出现问题，请联系 udemy 支持。 我们做到了，他们告诉我们与您联系。</p>
                      </div>

                      <div class="mb-2">
                        <span class="text-dark fw-semi-bold">克里泽尔</span>
                        <span>- 已购买</span>
                      </div>

                      <!-- Media -->
                      <div class="d-flex align-items-center">
                        <span class="small me-2">这个有帮助吗?</span>

                        <div class="d-flex gap-2">
                          <a class="btn btn-white btn-xs" href="javascript:;">
                            <i class="bi-hand-thumbs-up me-1"></i> 是<span>(0)</span>
                          </a>
                          <a class="btn btn-white btn-xs" href="javascript:;">
                            <i class="bi-hand-thumbs-down me-1"></i> No <span>(0)</span>
                          </a>
                        </div>
                      </div>
                      <!-- End Media -->
                    </li>
                    <!-- End Item -->
                  </ul>
                  <!-- End Comment -->

                  <div class="text-center">
                    <a class="btn btn-outline-primary btn-transition" href="#">查看所有评论</a>
                  </div>
                </div>
                <!-- End Content -->

4.7

287评论

Rating breakdown

77%

of customers recommend this product

Sort on

法外狂徒-张三
2019 年 4 月 3 日

I bought this hat for my boyfriend, but then i found out he cheated on me so I kept it and I love it!! I wear it all the time and there is no problem with the fit even though its a “mens” hat.

Christina - 已购买

这个有帮助吗?
是(45) 否(21)
海莉
2019 年 1 月 19 日

Material is great and the hat is comfortable and stylish.

海莉 - 已购买

这个有帮助吗?
是(2) 否(0)
克里泽尔
2018 年 12 月 21 日

A really well built cap. It looks great and wears just as well. A great staple in ball caps.

克里泽尔 - 已购买

这个有帮助吗?
是(0) 否(0)

              
                <!-- Review Section -->
                <div id="reviewSection" class="container content-space-2 content-space-lg-3">
                  <div class="row">
                    <div class="col-md-4 mb-7 mb-md-0">
                      <div class="border-bottom pb-4 mb-4">
                        <!-- Card -->
                        <div class="card bg-primary mb-3">
                          <div class="card-body">
                            <!-- Media -->
                            <div class="d-flex justify-content-center">
                              <div class="d-flex align-items-center">
                                <div class="flex-shrink-0">
                                  <span class="display-4 text-white">4.7</span>
                                </div>

                                <div class="flex-grow-1 ms-3">
                                  <!-- Rating -->
                                  <div class="d-flex gap-1 small">
                                    <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                    <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                    <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                    <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                    <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                                  </div>
                                  <!-- End Rating -->
                                  <span class="text-white">287评论</span>
                                </div>
                              </div>
                            </div>
                            <!-- End Media -->
                          </div>
                        </div>
                        <!-- End Card -->

                        <h3>Rating breakdown</h3>

                        <!-- Ratings -->
                        <div class="d-grid gap-1">
                          <a class="row align-items-center" href="#" style="max-width: 25rem;">
                            <div class="col-3">
                              <span class="text-dark">5 stars</span>
                            </div>
                            <!-- End Col -->

                            <div class="col-7">
                              <div class="progress">
                                <div class="progress-bar" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                              </div>
                            </div>
                            <!-- End Col -->

                            <div class="col-2 text-end">
                              <span>205</span>
                            </div>
                            <!-- End Col -->
                          </a>
                          <!-- End Row -->

                          <a class="row align-items-center" href="#" style="max-width: 25rem;">
                            <div class="col-3">
                              <span class="text-dark">4 stars</span>
                            </div>
                            <!-- End Col -->

                            <div class="col-7">
                              <div class="progress">
                                <div class="progress-bar" role="progressbar" style="width: 53%;" aria-valuenow="53" aria-valuemin="0" aria-valuemax="100"></div>
                              </div>
                            </div>
                            <!-- End Col -->

                            <div class="col-2 text-end">
                              <span>55</span>
                            </div>
                            <!-- End Col -->
                          </a>
                          <!-- End Row -->
                          
                          <a class="row align-items-center" href="#" style="max-width: 25rem;">
                            <div class="col-3">
                              <span class="text-dark">3 stars</span>
                            </div>
                            <!-- End Col -->

                            <div class="col-7">
                              <div class="progress">
                                <div class="progress-bar" role="progressbar" style="width: 20%;" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
                              </div>
                            </div>
                            <!-- End Col -->

                            <div class="col-2 text-end">
                              <span>23</span>
                            </div>
                            <!-- End Col -->
                          </a>
                          <!-- End Row -->
                          
                          <a class="row align-items-center" href="#" style="max-width: 25rem;">
                            <div class="col-3">
                              <span class="text-dark">2 stars</span>
                            </div>
                            <!-- End Col -->

                            <div class="col-7">
                              <div class="progress">
                                <div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                              </div>
                            </div>
                            <!-- End Col -->

                            <div class="col-2 text-end">
                              <span>0</span>
                            </div>
                            <!-- End Col -->
                          </a>
                          <!-- End Row -->
                          
                          <a class="row align-items-center" href="#" style="max-width: 25rem;">
                            <div class="col-3">
                              <span class="text-dark">1 stars</span>
                            </div>
                            <!-- End Col -->

                            <div class="col-7">
                              <div class="progress">
                                <div class="progress-bar" role="progressbar" style="width: 1%;" aria-valuenow="1" aria-valuemin="0" aria-valuemax="100"></div>
                              </div>
                            </div>
                            <!-- End Col -->

                            <div class="col-2 text-end">
                              <span>4</span>
                            </div>
                            <!-- End Col -->
                          </a>
                          <!-- End Row -->
                        </div>
                        <!-- End Ratings -->
                      </div>

                      <h4 class="display-4 text-primary">77%</h4>
                      <p class="small">of customers recommend this product</p>
                    </div>
                    <!-- End Col -->

                    <div class="col-md-8">
                      <div class="ps-md-4">
                        <!-- Heading -->
                        <div class="border-bottom pb-4 mb-4">
                          <div class="row align-items-center">
                            <div class="col-sm mb-2 mb-sm-0">
                              <h4 class="mb-0">Sort on</h4>
                            </div>
                            <!-- End Col -->

                            <div class="col-sm-auto">
                              <!-- Select -->
                              <select class="form-select form-select-sm">
                                <option value="mostRecent" selected>Most recent</option>
                                <option value="relevant">Relevant</option>
                                <option value="helpful">Helpful</option>
                                <option value="newest">最新</option>
                              </select>
                              <!-- End Select -->
                            </div>
                            <!-- End Col -->
                          </div>
                          <!-- End Row -->
                        </div>
                        <!-- End Heading -->

                        <!-- Comment -->
                        <ul class="list-comment list-comment-divider mb-5">
                          <!-- Item -->
                          <li class="list-comment-item">
                            <div class="d-flex gap-1 mb-3">
                              <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                              <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                              <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                              <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                              <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                            </div>

                            <!-- Media -->
                            <div class="d-flex align-items-center mb-3">
                              <div class="flex-shrink-0">
                                <img class="avatar avatar-sm avatar-circle" src="../assets/img/160x160/img9.jpg" alt="图片描述内容">
                              </div>

                              <div class="flex-grow-1 ms-3">
                                <div class="d-flex justify-content-between align-items-center">
                                  <h5 class="mb-0">法外狂徒-张三</h5>
                                  <span class="d-block small text-muted">2019 年 4 月 3 日</span>
                                </div>
                              </div>
                            </div>
                            <!-- End Media -->

                            <div class="mb-5">
                              <p>I bought this hat for my boyfriend, but then i found out he cheated on me so I kept it and I love it!! I wear it all the time and there is no problem with the fit even though its a “mens” hat.</p>
                            </div>

                            <div class="mb-2">
                              <span class="text-dark fw-semi-bold">Christina</span>
                              <span>- 已购买</span>
                            </div>

                            <!-- Media -->
                            <div class="d-flex align-items-center">
                              <span class="small me-2">这个有帮助吗?</span>

                              <div class="d-flex gap-2">
                                <a class="btn btn-white btn-xs" href="javascript:;">
                                  <i class="bi-hand-thumbs-up me-1"></i> 是<span>(45)</span>
                                </a>
                                <a class="btn btn-white btn-xs" href="javascript:;">
                                  <i class="bi-hand-thumbs-down me-1"></i> No <span>(21)</span>
                                </a>
                              </div>
                            </div>
                            <!-- End Media -->
                          </li>
                          <!-- End Item -->

                          <!-- Item -->
                          <li class="list-comment-item">
                            <div class="d-flex gap-1 mb-3">
                              <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                              <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                              <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                              <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                              <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                            </div>

                            <!-- Media -->
                            <div class="d-flex align-items-center mb-3">
                              <div class="flex-shrink-0">
                                <img class="avatar avatar-sm avatar-circle" src="../assets/img/160x160/img1.jpg" alt="图片描述内容">
                              </div>

                              <div class="flex-grow-1 ms-3">
                                <div class="d-flex justify-content-between align-items-center">
                                  <h5 class="mb-0">海莉</h5>
                                  <span class="d-block small text-muted">2019 年 1 月 19 日</span>
                                </div>
                              </div>
                            </div>
                            <!-- End Media -->

                            <div class="mb-5">
                              <p>Material is great and the hat is comfortable and stylish.</p>
                            </div>

                            <div class="mb-2">
                              <span class="text-dark fw-semi-bold">海莉</span>
                              <span>- 已购买</span>
                            </div>

                            <!-- Media -->
                            <div class="d-flex align-items-center">
                              <span class="small me-2">这个有帮助吗?</span>

                              <div class="d-flex gap-2">
                                <a class="btn btn-white btn-xs" href="javascript:;">
                                  <i class="bi-hand-thumbs-up me-1"></i> 是<span>(2)</span>
                                </a>
                                <a class="btn btn-white btn-xs" href="javascript:;">
                                  <i class="bi-hand-thumbs-down me-1"></i> No <span>(0)</span>
                                </a>
                              </div>
                            </div>
                            <!-- End Media -->
                          </li>
                          <!-- End Item -->

                          <!-- Item -->
                          <li class="list-comment-item">
                            <div class="d-flex gap-1 mb-3">
                              <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                              <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                              <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                              <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                              <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                            </div>

                            <!-- Media -->
                            <div class="d-flex align-items-center mb-3">
                              <div class="flex-shrink-0">
                                <img class="avatar avatar-sm avatar-circle" src="../assets/img/160x160/img8.jpg" alt="图片描述内容">
                              </div>

                              <div class="flex-grow-1 ms-3">
                                <div class="d-flex justify-content-between align-items-center">
                                  <h5 class="mb-0">克里泽尔</h5>
                                  <span class="d-block small text-muted">2018 年 12 月 21 日</span>
                                </div>
                              </div>
                            </div>
                            <!-- End Media -->

                            <div class="mb-5">
                              <p>A really well built cap. It looks great and wears just as well. A great staple in ball caps.</p>
                            </div>

                            <div class="mb-2">
                              <span class="text-dark fw-semi-bold">克里泽尔</span>
                              <span>- 已购买</span>
                            </div>

                            <!-- Media -->
                            <div class="d-flex align-items-center">
                              <span class="small me-2">这个有帮助吗?</span>

                              <div class="d-flex gap-2">
                                <a class="btn btn-white btn-xs" href="javascript:;">
                                  <i class="bi-hand-thumbs-up me-1"></i> 是<span>(0)</span>
                                </a>
                                <a class="btn btn-white btn-xs" href="javascript:;">
                                  <i class="bi-hand-thumbs-down me-1"></i> No <span>(0)</span>
                                </a>
                              </div>
                            </div>
                            <!-- End Media -->
                          </li>
                          <!-- End Item -->
                        </ul>
                        <!-- End Comment -->

                        <div class="d-sm-flex justify-content-sm-end gap-2">
                          <a class="btn btn-link" href="#">阅读更多 <i class="bi-chevron-right small ms-1"></i></a>
                          <button type="button" class="btn btn-primary btn-transition rounded-pill">Write a review</button>
                        </div>
                      </div>
                    </div>
                    <!-- End Col -->
                  </div>
                  <!-- End Row -->
                </div>
                <!-- End Review Section -->

反馈 & 评论

Component #1

学生反馈

评论

戴夫·奥斯汀

海莉

克里泽尔

Component #2

Rating breakdown

77%

Sort on

法外狂徒-张三

海莉

克里泽尔