Logo v4.1
图片描述内容

没结果

  • 获取支持
  • 预览演示
Logo v4.1
  • 文档
  • 代码片段
  • 代码片段
  • 介绍
  • Navbar / Heroes
  • Headers (Navbar)
  • Hero Sections
  • Content
  • 功能
    一般 统计 Step 导航(标签)
  • Icon Blocks
  • Cards
    Grid List
  • Directory
    Grid List
  • 客户评价
  • 博客s
    Grid List
  • Tables
  • E-commerce
  • 价格
  • Team Sections
  • 面包屑
  • 号召性用语(CTA)
  • Modals
  • 证券投资
  • 画廊
  • 客户
  • Countdown
  • FAQ
  • Lists
  • 折叠/手风琴
  • Comments
  • 反馈 & 评论
  • User Profile
  • 侧边栏示例
  • 日历视图
  • 通知
  • 内容部分
  • Forms
  • 身份验证
  • 反馈
  • Filters
  • Search
  • Directory
  • 订阅
  • 账户中心
  • Wizard & Steps
  • 联系方式/页脚
  • 联系方式
  • Footer

E-commerce

Component #1

  • 预览
  • HTML

The better way to shop with Front top-products

图片描述内容
图片描述内容
图片描述内容

T-shirts

Starting from $29.99

View all
图片描述内容
图片描述内容
图片描述内容

Tech covers

Starting from $399.99

View all
图片描述内容
图片描述内容
图片描述内容

Caps

Starting from $13.99

View all

Limited time only, while stocks last.

              
                <!-- Card Grid -->
                <div class="container content-space-2 content-space-lg-3">
                  <!-- Heading -->
                  <div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
                    <h2>The better way to shop with Front top-products</h2>
                  </div>
                  <!-- End Heading -->

                  <div class="row mb-2">
                    <div class="col-sm-6 col-md-4 mb-4">
                      <!-- Card -->
                      <div class="card card-bordered shadow-none overflow-hidden">
                        <div class="card-body d-flex align-items-center border-bottom p-0">
                          <div class="w-65 border-end">
                            <img class="img-fluid" src="../assets/img/380x400/img3.jpg" alt="图片描述内容">
                          </div>
                          <div class="w-35">
                            <div class="border-bottom">
                              <img class="img-fluid" src="../assets/img/380x360/img8.jpg" alt="图片描述内容">
                            </div>
                            <img class="img-fluid" src="../assets/img/380x360/img7.jpg" alt="图片描述内容">
                          </div>
                        </div>

                        <div class="card-footer text-center">
                          <h3 class="card-title">T-shirts</h3>
                          <p class="card-text text-muted small">Starting from $29.99</p>
                          <a class="btn btn-outline-primary btn-sm btn-transition rounded-pill px-6" href="#">View all</a>
                        </div>
                      </div>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->

                    <div class="col-sm-6 col-md-4 mb-4">
                      <!-- Card -->
                      <div class="card card-bordered shadow-none overflow-hidden">
                        <div class="card-body d-flex align-items-center border-bottom p-0">
                          <div class="w-65 border-end">
                            <img class="img-fluid" src="../assets/img/380x400/img4.jpg" alt="图片描述内容">
                          </div>
                          <div class="w-35">
                            <div class="border-bottom">
                              <img class="img-fluid" src="../assets/img/380x360/img6.jpg" alt="图片描述内容">
                            </div>
                            <img class="img-fluid" src="../assets/img/380x360/img5.jpg" alt="图片描述内容">
                          </div>
                        </div>

                        <div class="card-footer text-center">
                          <h3 class="card-title">Tech covers</h3>
                          <p class="card-text text-muted small">Starting from $399.99</p>
                          <a class="btn btn-outline-primary btn-sm btn-transition rounded-pill px-6" href="#">View all</a>
                        </div>
                      </div>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->

                    <div class="col-sm-6 col-md-4 mb-4">
                      <!-- Card -->
                      <div class="card card-bordered shadow-none overflow-hidden">
                        <div class="card-body d-flex align-items-center border-bottom p-0">
                          <div class="w-65 border-end">
                            <img class="img-fluid" src="../assets/img/380x400/img2.jpg" alt="图片描述内容">
                          </div>
                          <div class="w-35">
                            <div class="border-bottom">
                              <img class="img-fluid" src="../assets/img/380x360/img4.jpg" alt="图片描述内容">
                            </div>
                            <img class="img-fluid" src="../assets/img/380x360/img3.jpg" alt="图片描述内容">
                          </div>
                        </div>

                        <div class="card-footer text-center">
                          <h3 class="card-title">Caps</h3>
                          <p class="card-text text-muted small">Starting from $13.99</p>
                          <a class="btn btn-outline-primary btn-sm btn-transition rounded-pill px-6" href="#">View all</a>
                        </div>
                      </div>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->
                  </div>
                  <!-- End Row -->

                  <div class="text-center">
                    <p class="small">Limited time only, while stocks last.</p>
                  </div>
                </div>
                <!-- End Card Grid -->
              
            

Component #2

  • 预览
  • HTML
  • JS
图片描述内容
图片描述内容
图片描述内容
图片描述内容
图片描述内容
图片描述内容
Review rating Review rating Review rating Review rating Review rating 287评论

New Era 9Forty LA Dodgers adjustable cap in black

American label New Era manufacturing baseball hats for teams since the 1930s.

Total price:

$159.99

$179.99
Select quantity
Free shipping

We offer free shipping anywhere in the U.S. A skilled 快递费 team will bring the boxes into your office.

30 Days return

If you're not satisfied, return it for a full refund. We'll take care of disassembly and return shipping.

需要帮忙? 现在聊天
              
                <!-- Hero -->
                <div class="container content-space-1">
                  <div class="row">
                    <div class="col-md-7 mb-7 mb-md-0">
                      <div class="pe-md-4">
                        <div class="card-pinned">
                          <!-- Swiper Main Slider -->
                          <div class="js-swiper-shop-product swiper">
                            <div class="swiper-wrapper">
                              <!-- Slide -->
                              <div class="swiper-slide">
                                <div class="card card-bordered shadow-none">
                                  <img class="card-img" src="../assets/img/600x600/img1.jpg" alt="图片描述内容">
                                </div>
                              </div>
                              <!-- End Slide -->

                              <!-- Slide -->
                              <div class="swiper-slide">
                                <div class="card card-bordered shadow-none">
                                  <img class="card-img" src="../assets/img/600x600/img2.jpg" alt="图片描述内容">
                                </div>
                              </div>
                              <!-- End Slide -->

                              <!-- Slide -->
                              <div class="swiper-slide">
                                <div class="card card-bordered shadow-none">
                                  <img class="card-img" src="../assets/img/600x600/img3.jpg" alt="图片描述内容">
                                </div>
                              </div>
                              <!-- End Slide -->
                            </div>

                            <!-- Arrows -->
                            <div class="js-swiper-shop-product-button-next swiper-button-next"></div>
                            <div class="js-swiper-shop-product-button-prev swiper-button-prev"></div>
                          </div>
                          <!-- End Swiper Main Slider -->

                          <!-- Swiper Thumb Slider -->
                          <div class="position-absolute bottom-0 end-0 start-0 zi-1 p-4">
                            <div class="js-swiper-shop-product-thumb swiper" style="max-width: 15rem;">
                              <div class="swiper-wrapper">
                                <!-- Slide -->
                                <div class="swiper-slide">
                                  <a class="avatar avatar-circle" href="javascript:;">
                                    <img class="avatar-img" src="../assets/img/160x160/img11.jpg" alt="图片描述内容">
                                  </a>
                                </div>
                                <!-- End Slide -->

                                <!-- Slide -->
                                <div class="swiper-slide">
                                  <a class="avatar avatar-circle" href="javascript:;">
                                    <img class="avatar-img" src="../assets/img/160x160/img12.jpg" alt="图片描述内容">
                                  </a>
                                </div>
                                <!-- End Slide -->

                                <!-- Slide -->
                                <div class="swiper-slide">
                                  <a class="avatar avatar-circle" href="javascript:;">
                                    <img class="avatar-img" src="../assets/img/160x160/img13.jpg" alt="图片描述内容">
                                  </a>
                                </div>
                                <!-- End Slide -->
                              </div>
                            </div>
                          </div>
                          <!-- End Swiper Thumb Slider -->
                        </div>
                      </div>
                    </div>
                    <!-- End Col -->

                    <div class="col-md-5">
                      <!-- Rating -->
                      <a class="d-flex gap-1 mb-4" href="#reviewSection">
                        <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">
                        <span class="ms-1">287评论</span>
                      </a>
                      <!-- End Rating -->

                      <!-- Heading -->
                      <div class="mb-5">
                        <h1 class="h2">New Era 9Forty LA Dodgers adjustable cap in black</h1>
                        <p>American label New Era manufacturing baseball hats for teams since the 1930s.</p>
                      </div>
                      <!-- End Heading -->

                      <!-- Price -->
                      <div class="mb-5">
                        <span class="d-block mb-2">Total price:</span>
                        <div class="d-flex align-items-center">
                          <h3 class="mb-0">$159.99</h3>
                          <span class="ms-2"><del>$179.99</del></span>
                        </div>
                      </div>
                      <!-- End Price -->

                      <!-- Quantity -->
                      <div class="quantity-counter mb-3">
                        <div class="js-quantity-counter row align-items-center">
                          <div class="col">
                            <span class="d-block small">Select quantity</span>
                            <input class="js-result form-control form-control-quantity-counter" type="text" value="1">
                          </div>
                          <!-- End Col -->

                          <div class="col-auto">
                            <a class="js-minus btn btn-outline-secondary btn-xs btn-icon rounded-circle" href="javascript:;">
                              <svg width="8" height="2" viewBox="0 0 8 2" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M0 1C0 0.723858 0.223858 0.5 0.5 0.5H7.5C7.77614 0.5 8 0.723858 8 1C8 1.27614 7.77614 1.5 7.5 1.5H0.5C0.223858 1.5 0 1.27614 0 1Z" fill="currentColor"/>
                              </svg>
                            </a>
                            <a class="js-plus btn btn-outline-secondary btn-xs btn-icon rounded-circle" href="javascript:;">
                              <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M4 0C4.27614 0 4.5 0.223858 4.5 0.5V3.5H7.5C7.77614 3.5 8 3.72386 8 4C8 4.27614 7.77614 4.5 7.5 4.5H4.5V7.5C4.5 7.77614 4.27614 8 4 8C3.72386 8 3.5 7.77614 3.5 7.5V4.5H0.5C0.223858 4.5 0 4.27614 0 4C0 3.72386 0.223858 3.5 0.5 3.5H3.5V0.5C3.5 0.223858 3.72386 0 4 0Z" fill="currentColor"/>
                              </svg>
                            </a>
                          </div>
                          <!-- End Col -->
                        </div>
                        <!-- End Row -->
                      </div>
                      <!-- End Quantity -->

                      <!-- Accordion -->
                      <div class="accordion mb-5" id="shopCartAccordion">
                        <!-- Collapse -->
                        <div class="accordion-item">
                          <a class="accordion-button collapsed" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#shopCartAccordionCollapseOne" aria-expanded="false" aria-controls="shopCartAccordionCollapseOne">
                            <div class="d-flex align-items-center">
                              <div class="flex-shrink-0">
                                <span class="svg-icon svg-icon-sm text-primary">
                                  
                                  
                                  
                                  

                                </span>
                              </div>
                              <div class="flex-grow-1 ms-3">
                                Free shipping
                              </div>
                            </div>
                          </a>

                          <div id="shopCartAccordionCollapseOne" class="accordion-collapse collapse" data-bs-parent="#shopCartAccordion">
                            <div class="accordion-body">
                              <p class="mb-0">We offer free shipping anywhere in the U.S. A skilled 快递费 team will bring the boxes into your office.</p>
                            </div>
                          </div>
                        </div>
                        <!-- End Collapse -->

                        <!-- Collapse -->
                        <div class="accordion-item">
                          <a class="accordion-button collapsed" href="#" role="button" data-bs-toggle="collapse" data-bs-target="#shopCartAccordionCollapseTwo" aria-expanded="false" aria-controls="shopCartAccordionCollapseTwo">
                            <div class="d-flex align-items-center">
                              <div class="flex-shrink-0">
                                <span class="svg-icon svg-icon-sm text-primary">
                                  
                                  
                                  
                                  

                                </span>
                              </div>
                              <div class="flex-grow-1 ms-3">
                                30 Days return
                              </div>
                            </div>
                          </a>

                          <div id="shopCartAccordionCollapseTwo" class="accordion-collapse collapse" data-bs-parent="#shopCartAccordion">
                            <div class="accordion-body">
                              <p class="mb-0">If you're not satisfied, return it for a full refund. We'll take care of disassembly and return shipping.</p>
                            </div>
                          </div>
                        </div>
                        <!-- End Collapse -->
                      </div>
                      <!-- End Accordion -->

                      <div class="d-grid mb-4">
                        <button type="button" class="btn btn-primary btntransition">Add to cart</button>
                      </div>

                      <!-- Media -->
                      <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                          <div class="svg-icon svg-icon-sm text-primary">
                            
                            
                            
                            

                          </div>
                        </div>
                        <div class="flex-grow-1 ms-2">
                          <span class="small me-1">需要帮忙?</span>
                          <a class="link small" href="#">现在聊天</a>
                        </div>
                      </div>
                      <!-- End Media -->
                    </div>
                    <!-- End Col -->
                  </div>
                  <!-- End Row -->
                </div>
                <!-- End Hero -->
              
            
              
                <!-- JS Implementing Plugins -->
                <script src="../assets/vendor/swiper/swiper-bundle.min.js"></script>
                <script src="../assets/vendor/hs-quantity-counter/dist/hs-quantity-counter.min.js"></script>

                <!-- JS Plugins Init. -->
                <script>
                  (function() {
                    // INITIALIZATION OF SWIPER
                    // =======================================================
                    var swiper = new Swiper('.js-swiper-shop-product',{
                      effect: 'fade',
                      autoplay: true,
                      loop: true,
                      navigation: {
                        nextEl: '.js-swiper-shop-product-button-next',
                        prevEl: '.js-swiper-shop-product-button-prev',
                      },
                      thumbs: {
                        swiper: sliderThumbs
                      }
                    });

                    var sliderThumbs = new Swiper('.js-swiper-shop-product-thumb', {
                      slidesPerView: 3,
                      watchSlidesVisibility: true,
                      watchSlidesProgress: true,
                      history: false,
                    });


                    // INITIALIZATION OF  QUANTITY COUNTER
                    // =======================================================
                    new HSQuantityCounter('.js-quantity-counter')
                  })()
                </script>
              
            

Component #3

  • 预览
  • HTML

我的购物单 cart

2 items
  • 图片描述内容
    Originals 民族背包
    $29.99
    性别: 男
    颜色: 灰色
    尺寸: 单一尺寸
    移除 收藏
    $29.99
  • 图片描述内容
    Vans 大号图案 T 恤
    $43.99
    性别: Women
    颜色: Core Black / Carbon
    尺寸: S
    移除 收藏
    $29.99
Continue shopping

订单摘要

物品小计 (2)
$73.98
快递费
免费/dd>
预估税
$0.00
共计
$73.98
结帐
需要帮忙? 现在聊天
              
                <!-- Content -->
                <div class="container content-space-1 content-space-lg-2">
                  <div class="row">
                    <div class="col-lg-8 mb-7 mb-lg-0">
                      <!-- Heading -->
                      <div class="d-flex justify-content-between align-items-end border-bottom pb-3 mb-7">
                        <h1 class="h3 mb-0">我的购物单 cart</h1>
                        <span>2 items</span>
                      </div>
                      <!-- End Heading -->

                      <!-- Form -->
                      <form>
                        <!-- List Group -->
                        <ul class="list-group list-group-flush list-group-no-gutters mb-5">
                          <!-- Item -->
                          <li class="list-group-item">
                            <div class="d-flex">
                              <div class="flex-shrink-0">
                                <img class="avatar avatar-xl avatar-4x3" src="../assets/img/320x320/img2.jpg" alt="图片描述内容">
                              </div>

                              <div class="flex-grow-1 ms-3">
                                <div class="row">
                                  <div class="col-sm-7 mb-3 mb-sm-0">
                                    <h5><a class="text-dark" href="#">Originals 民族背包</a></h5>

                                    <div class="d-block d-sm-none">
                                      <h5 class="mb-1">$29.99</h5>
                                    </div>

                                    <div class="d-grid gap-1">
                                      <div class="text-body">
                                        <span class="small">性别:</span>
                                        <span class="fw-semi-bold small">男</span>
                                      </div>

                                      <div class="text-body">
                                        <span class="small">颜色:</span>
                                        <span class="fw-semi-bold small">灰色</span>
                                      </div>
                                      
                                      <div class="text-body">
                                        <span class="small">尺寸:</span>
                                        <span class="fw-semi-bold small">单一尺寸</span>
                                      </div>
                                    </div>
                                  </div>
                                  <!-- End Col -->

                                  <div class="col-sm-3">
                                    <div class="row">
                                      <div class="col-auto">
                                        <!-- Select -->
                                        <select class="form-select form-select-sm mb-3">
                                          <option value="quantity1">1</option>
                                          <option value="quantity2">2</option>
                                          <option value="quantity3">3</option>
                                          <option value="quantity4">4</option>
                                          <option value="quantity5">5</option>
                                          <option value="quantity6">6</option>
                                          <option value="quantity7">7</option>
                                          <option value="quantity8">8</option>
                                          <option value="quantity9">9</option>
                                          <option value="quantity10">10</option>
                                        </select>
                                        <!-- End Select -->
                                      </div>

                                      <div class="col-auto">
                                        <div class="d-grid gap-2">
                                          <a class="link-sm link-secondary small" href="javascript:;">
                                            <i class="bi-trash me-1"></i> Remove
                                          </a>

                                          <a class="link-sm link-secondary small" href="javascript:;">
                                            <i class="bi-heart me-1"></i> 收藏
                                          </a>
                                        </div>
                                      </div>
                                      <!-- End Col -->
                                    </div>
                                    <!-- End Row -->
                                  </div>
                                  <!-- End Col -->

                                  <div class="col-4 col-sm-2 d-none d-sm-inline-block text-right">
                                    <span class="h5 d-block mb-1">$29.99</span>
                                  </div>
                                  <!-- End Col -->
                                </div>
                                <!-- End Row -->
                              </div>
                            </div>
                          </li>
                          <!-- End Item -->

                          <!-- Item -->
                          <li class="list-group-item">
                            <div class="d-flex">
                              <div class="flex-shrink-0">
                                <img class="avatar avatar-xl avatar-4x3" src="../assets/img/320x320/img3.jpg" alt="图片描述内容">
                              </div>

                              <div class="flex-grow-1 ms-3">
                                <div class="row">
                                  <div class="col-sm-7 mb-3 mb-sm-0">
                                    <h5><a class="text-dark" href="#">Vans 大号图案 T 恤</a></h5>

                                    <div class="d-block d-sm-none">
                                      <h5 class="mb-1">$43.99</h5>
                                    </div>

                                    <div class="d-grid gap-1">
                                      <div class="text-body">
                                        <span class="small">性别:</span>
                                        <span class="fw-semi-bold small">Women</span>
                                      </div>

                                      <div class="text-body">
                                        <span class="small">颜色:</span>
                                        <span class="fw-semi-bold small">Core Black / Carbon</span>
                                      </div>
                                      
                                      <div class="text-body">
                                        <span class="small">尺寸:</span>
                                        <span class="fw-semi-bold small">S</span>
                                      </div>
                                    </div>
                                  </div>
                                  <!-- End Col -->

                                  <div class="col-sm-3">
                                    <div class="row">
                                      <div class="col-auto">
                                        <!-- Select -->
                                        <select class="form-select form-select-sm mb-3">
                                          <option value="quantity1">1</option>
                                          <option value="quantity2">2</option>
                                          <option value="quantity3">3</option>
                                          <option value="quantity4">4</option>
                                          <option value="quantity5">5</option>
                                          <option value="quantity6">6</option>
                                          <option value="quantity7">7</option>
                                          <option value="quantity8">8</option>
                                          <option value="quantity9">9</option>
                                          <option value="quantity10">10</option>
                                        </select>
                                        <!-- End Select -->
                                      </div>

                                      <div class="col-auto">
                                        <div class="d-grid gap-2">
                                          <a class="link-sm link-secondary small" href="javascript:;">
                                            <i class="bi-trash me-1"></i> Remove
                                          </a>

                                          <a class="link-sm link-secondary small" href="javascript:;">
                                            <i class="bi-heart me-1"></i> 收藏
                                          </a>
                                        </div>
                                      </div>
                                      <!-- End Col -->
                                    </div>
                                    <!-- End Row -->
                                  </div>
                                  <!-- End Col -->

                                  <div class="col-4 col-sm-2 d-none d-sm-inline-block text-right">
                                    <span class="h5 d-block mb-1">$29.99</span>
                                  </div>
                                  <!-- End Col -->
                                </div>
                                <!-- End Row -->
                              </div>
                            </div>
                          </li>
                          <!-- End Item -->
                        </ul>
                        <!-- End List Group -->

                        <div class="d-sm-flex justify-content-end">
                          <a class="link" href="../demo-shop/index.html">
                            <i class="bi-chevron-left small ms-1"></i> Continue shopping
                          </a>
                        </div>
                      </form>
                      <!-- End Form -->
                    </div>
                    <!-- End Col -->

                    <div class="col-lg-4">
                      <div class="ps-lg-4">
                        <!-- Card -->
                        <div class="card card-sm shadow-sm mb-4">
                          <div class="card-body">
                            <div class="border-bottom pb-4 mb-4">
                              <h3 class="card-header-title">订单摘要</h3>
                            </div>
                            
                            <form>
                              <div class="border-bottom pb-4 mb-3">
                                <input type="text" class="form-control" name="name" placeholder="Enter promo code" aria-label="Enter promo code">
                              </div>

                              <div class="border-bottom pb-4 mb-4">
                                <div class="d-grid gap-3">
                                  <dl class="row">
                                    <dt class="col-sm-6">物品小计 (2)</dt>
                                    <dd class="col-sm-6 text-sm-end mb-0">$73.98</dd>
                                  </dl>
                                  <!-- End Row -->

                                  <dl class="row">
                                    <dt class="col-sm-6">快递费</dt>
                                    <dd class="col-sm-6 text-sm-end mb-0">Free</dd>
                                  </dl>
                                  <!-- End Row -->
                                </div>
                              </div>

                              <div class="border-bottom pb-4 mb-4">
                                <div class="d-grid gap-3">
                                  <!-- Check -->
                                  <div class="form-check">
                                    <input class="form-check-input" type="radio" name="快递费RadioName" id="快递费Radio1Eg1" checked>
                                    <label class="form-check-label text-dark" for="快递费Radio1Eg1">
                                      免费 - 标准快递
                                      <span class="d-block text-muted small">Shipment may take 5-6 business days</span>
                                    </label>
                                  </div>
                                  <!-- End Check -->

                                  <!-- Check -->
                                  <div class="form-check">
                                    <input class="form-check-input" type="radio" name="快递费RadioName" id="快递费Radio2Eg1">
                                    <label class="form-check-label text-dark" for="快递费Radio2Eg1">
                                      $7.99 - Express 快递
                                      <span class="d-block text-muted small">发货可能需要 2-3 个工作日</span>
                                    </label>
                                  </div>
                                  <!-- End Check -->
                                </div>
                              </div>

                              <div class="d-grid gap-3 mb-4">
                                <dl class="row">
                                  <dt class="col-sm-6">预估税</dt>
                                  <dd class="col-sm-6 text-sm-end mb-0">$0.00</dd>
                                </dl>
                                <!-- End Row -->

                                <dl class="row">
                                  <dt class="col-sm-6">Total</dt>
                                  <dd class="col-sm-6 text-sm-end mb-0">$73.98</dd>
                                </dl>
                                <!-- End Row -->
                              </div>

                              <div class="d-grid">
                                <a class="btn btn-primary btn-lg" href="../demo-shop/checkout.html">Checkout</a>
                              </div>
                            </form>
                          </div>
                          <!-- End Card -->
                        </div>

                        <!-- Media -->
                        <div class="d-flex align-items-center">
                          <div class="flex-shrink-0">
                            <div class="svg-icon svg-icon-sm text-primary">
                              
                              
                              
                              

                            </div>
                          </div>
                          <div class="flex-grow-1 ms-2">
                            <span class="small me-1">需要帮忙?</span>
                            <a class="link small" href="#">现在聊天</a>
                          </div>
                        </div>
                        <!-- End Media -->
                      </div>
                    </div>
                    <!-- End Col -->
                  </div>
                  <!-- End Row -->
                </div>
                <!-- End Content -->
              
            

Component #4

  • 预览
  • HTML

订单摘要

图片描述内容 1
Originals 民族背包
性别: 男
颜色: 灰色
尺寸: 单一尺寸
图片描述内容 1
Vans 大号图案 T 恤
性别: Women
颜色: Core Black / Carbon
尺寸: S
物品小计 (2)
$73.98
快递费
免费/dd>
预估税
$0.00
共计
$73.98
结帐
需要帮忙? 现在聊天
              
                <!-- Content -->
                <div class="container content-space-1 content-space-lg-2">
                  <div class="row">
                    <div class="col-lg-4">
                      <div class="ps-lg-4">
                        <!-- Card -->
                        <div class="card card-sm shadow-sm mb-4">
                          <div class="card-body">
                            <div class="border-bottom pb-4 mb-4">
                              <h3 class="card-header-title">订单摘要</h3>
                            </div>

                            <form>
                              <!-- Product -->
                              <div class="border-bottom pb-4 mb-4">
                                <div class="d-flex">
                                  <div class="flex-shrink-0">
                                    <div class="avatar avatar-lg me-3">
                                      <img class="avatar-img" src="../assets/img/320x320/img2.jpg" alt="图片描述内容">
                                      <sup class="avatar-status avatar-status-primary">1</sup>
                                    </div>
                                  </div>

                                  <div class="flex-grow-1">
                                    <h6>Originals 民族背包</h6>
                                    
                                    <div class="d-grid">
                                      <div class="text-body">
                                        <span class="small">性别:</span>
                                        <span class="small">男</span>
                                      </div>

                                      <div class="text-body">
                                        <span class="small">颜色:</span>
                                        <span class="small">灰色</span>
                                      </div>
                                      
                                      <div class="text-body">
                                        <span class="small">尺寸:</span>
                                        <span class="small">单一尺寸</span>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                              <!-- End Product -->

                              <!-- Product -->
                              <div class="border-bottom pb-4 mb-4">
                                <div class="d-flex">
                                  <div class="flex-shrink-0">
                                    <div class="avatar avatar-lg me-3">
                                      <img class="avatar-img" src="../assets/img/320x320/img3.jpg" alt="图片描述内容">
                                      <sup class="avatar-status avatar-status-primary">1</sup>
                                    </div>
                                  </div>

                                  <div class="flex-grow-1">
                                    <h6>Vans 大号图案 T 恤</h6>
                                    
                                    <div class="d-grid">
                                      <div class="text-body">
                                        <span class="small">性别:</span>
                                        <span class="small">Women</span>
                                      </div>

                                      <div class="text-body">
                                        <span class="small">颜色:</span>
                                        <span class="small">Core Black / Carbon</span>
                                      </div>
                                      
                                      <div class="text-body">
                                        <span class="small">尺寸:</span>
                                        <span class="small">S</span>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                              <!-- End Product -->

                              <div class="border-bottom pb-4 mb-3">
                                <input type="text" class="form-control" name="name" placeholder="Enter promo code" aria-label="Enter promo code">
                              </div>

                              <div class="border-bottom pb-4 mb-4">
                                <div class="d-grid gap-3">
                                  <dl class="row">
                                    <dt class="col-sm-6">物品小计 (2)</dt>
                                    <dd class="col-sm-6 text-sm-end mb-0">$73.98</dd>
                                  </dl>
                                  <!-- End Row -->

                                  <dl class="row">
                                    <dt class="col-sm-6">快递费</dt>
                                    <dd class="col-sm-6 text-sm-end mb-0">Free</dd>
                                  </dl>
                                  <!-- End Row -->
                                </div>
                              </div>

                              <div class="border-bottom pb-4 mb-4">
                                <div class="d-grid gap-3">
                                  <!-- Check -->
                                  <div class="form-check">
                                    <input class="form-check-input" type="radio" name="快递费RadioName" id="快递费Radio1Eg2" checked>
                                    <label class="form-check-label text-dark" for="快递费Radio1Eg2">
                                      免费 - 标准快递
                                      <span class="d-block text-muted small">Shipment may take 5-6 business days</span>
                                    </label>
                                  </div>
                                  <!-- End Check -->

                                  <!-- Check -->
                                  <div class="form-check">
                                    <input class="form-check-input" type="radio" name="快递费RadioName" id="快递费Radio2Eg2">
                                    <label class="form-check-label text-dark" for="快递费Radio2Eg2">
                                      $7.99 - Express 快递
                                      <span class="d-block text-muted small">发货可能需要 2-3 个工作日</span>
                                    </label>
                                  </div>
                                  <!-- End Check -->
                                </div>
                              </div>

                              <div class="d-grid gap-3 mb-4">
                                <dl class="row">
                                  <dt class="col-sm-6">预估税</dt>
                                  <dd class="col-sm-6 text-sm-end mb-0">$0.00</dd>
                                </dl>
                                <!-- End Row -->

                                <dl class="row">
                                  <dt class="col-sm-6">Total</dt>
                                  <dd class="col-sm-6 text-sm-end mb-0">$73.98</dd>
                                </dl>
                                <!-- End Row -->
                              </div>

                              <div class="d-grid">
                                <a class="btn btn-primary btn-lg" href="../demo-shop/checkout.html">Checkout</a>
                              </div>
                            </form>
                          </div>
                          <!-- End Card -->
                        </div>

                        <!-- Media -->
                        <div class="d-flex align-items-center">
                          <div class="flex-shrink-0">
                            <div class="svg-icon svg-icon-sm text-primary">
                              
                              
                              
                              

                            </div>
                          </div>
                          <div class="flex-grow-1 ms-2">
                            <span class="small me-1">需要帮忙?</span>
                            <a class="link small" href="#">现在聊天</a>
                          </div>
                        </div>
                        <!-- End Media -->
                      </div>
                    </div>
                    <!-- End Col -->
                  </div>
                  <!-- End Row -->
                </div>
                <!-- End Content -->