博客s Grid - Snippets | Front - 基于Boostrap5的多用途响应式模板库

Component #1

预览
HTML

发现更多

阅读博客

产生有意义的影响

已证明擅长执行的前线机会.

阅读博客

开发文档

无论您是初创公司还是跨国企业，学习如何与 Front 集成.

了解其他解决方案

探索代码片段工具

快速前端示例组件，复制粘贴代码。

想阅读更多？去这里

              
                <!-- 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">
                    <h2>发现更多</h2>
                  </div>
                  <!-- End Heading -->

                  <div class="overflow-hidden">
                    <div class="row gx-lg-7">
                      <div class="col-sm-6 col-lg-4 mb-5">
                        <!-- Card -->
                        <a class="card card-flush h-100" href="#" data-aos="fade-up">
                          <img class="card-img" src="../assets/img/480x320/img33.jpg" alt="图片描述内容">
                          <div class="card-body">
                            <span class="card-subtitle text-body">阅读博客</span>
                            <h4 class="card-title text-inherit">产生有意义的影响</h4>
                            <p class="card-text text-body">已证明擅长执行的前线机会.</p>
                          </div>
                        </a>
                        <!-- End Card -->
                      </div>
                      <!-- End Col -->

                      <div class="col-sm-6 col-lg-4 mb-5">
                        <!-- Card -->
                        <a class="card card-flush h-100" href="#" data-aos="fade-up" data-aos-delay="150">
                          <img class="card-img" src="../assets/img/480x320/img34.jpg" alt="图片描述内容">
                          <div class="card-body">
                            <span class="card-subtitle text-body">阅读博客</span>
                            <h4 class="card-title text-inherit">Documentation</h4>
                            <p class="card-text text-body">无论您是初创公司还是跨国企业，学习如何与 Front 集成.</p>
                          </div>
                        </a>
                        <!-- End Card -->
                      </div>
                      <!-- End Col -->

                      <div class="col-sm-6 col-lg-4 mb-5">
                        <!-- Card -->
                        <a class="card card-flush h-100" href="#" data-aos="fade-up" data-aos-delay="200">
                          <img class="card-img" src="../assets/img/480x320/img35.jpg" alt="图片描述内容">
                          <div class="card-body">
                            <span class="card-subtitle text-body">了解其他解决方案</span>
                            <h4 class="card-title text-inherit">探索代码片段工具</h4>
                            <p class="card-text text-body">快速前端示例组件，复制粘贴代码。</p>
                          </div>
                        </a>
                        <!-- End Card -->
                      </div>
                      <!-- End Col -->
                    </div>
                    <!-- End Row -->
                  </div>

                  <!-- Card Info -->
                  <div class="text-center">
                    <div class="card card-info-link card-sm">
                      <div class="card-body">
                       想阅读更多？ <a class="card-link ms-2" href="#">去这里<span class="bi-chevron-right small ms-1"></span></a>
                      </div>
                    </div>
                  </div>
                  <!-- End Card Info -->
                </div>
                <!-- End Card Grid -->

Component #2

预览
HTML

Creative

This Watch gym partnerships give you perks for working out

Stories

Announcing Front Strategies: Ready-to-use rules

Stories

Drone Company PrecisionHawk Names New CEO

想阅读更多？去这里

              
                <!-- Card Grid -->
                <div class="container content-space-2 content-space-b-lg-3">
                  <div class="row">
                    <div class="col-sm-6 col-lg-4 mb-3 mb-sm-7">
                      <!-- Card -->
                      <a class="card card-stretched-vertical card-transition bg-img-start gradient-y-overlay-sm-gray-900" href="../blog-article.html" style="background-image: url(../assets/img/400x500/img9.jpg); min-height: 25rem;">
                        <div class="card-header">
                          <span class="card-subtitle text-white">Creative</span>
                        </div>

                        <div class="card-footer">
                          <h3 class="card-title text-white">This Watch gym partnerships give you perks for working out</h3>
                          <p class="card-link link-light">阅读更多 <i class="bi-chevron-right small ms-1"></i></p>
                        </div>
                      </a>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->

                    <div class="col-sm-6 col-lg-4 mb-3 mb-sm-7">
                      <!-- Card -->
                      <a class="card card-stretched-vertical card-transition bg-dark" href="../blog-article.html" style="background-image: url(../assets/svg/components/wave-pattern-light.svg); min-height: 25rem;">
                        <div class="card-header">
                          <span class="card-subtitle text-white">Stories</span>
                        </div>

                        <div class="card-footer">
                          <h3 class="card-title text-white">Announcing Front Strategies: Ready-to-use rules</h3>
                          <p class="card-link link-light">阅读更多 <i class="bi-chevron-right small ms-1"></i></p>
                        </div>
                      </a>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->

                    <div class="col-sm-6 col-lg-4 mb-3 mb-sm-7">
                      <!-- Card -->
                      <a class="card card-stretched-vertical card-transition bg-img-start gradient-y-overlay-sm-gray-900" href="../blog-article.html" style="background-image: url(../assets/img/400x500/img2.jpg); min-height: 25rem;">
                        <div class="card-header">
                          <span class="card-subtitle text-white">Stories</span>
                        </div>

                        <div class="card-footer">
                          <h3 class="card-title text-white">Drone Company PrecisionHawk Names New CEO</h3>
                          <p class="card-link link-light">阅读更多 <i class="bi-chevron-right small ms-1"></i></p>
                        </div>
                      </a>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->
                  </div>
                  <!-- End Row -->

                  <!-- Card Info -->
                  <div class="text-center">
                    <div class="card card-info-link card-sm">
                      <div class="card-body">
                       想阅读更多？ <a class="card-link ms-2" href="#">去这里<span class="bi-chevron-right small ms-1"></span></a>
                      </div>
                    </div>
                  </div>
                  <!-- End Card Info -->
                </div>
                <!-- End Card Grid -->

Better is when everything works together

Learn how your Google devices can do more.

July 15

主打产品

Announcing Front Tutorials: Master Adobe Ai - Part II

A new tutorial to make it easier to master Adobe Ai.

July 15

Should You Buy An Apple Pencil?

The Apple Pencil is an expensive device that comes with some interesting features, but not everyone needs them.

July 15

              
                <!-- Card Grid -->
                <div class="container content-space-2 content-space-lg-3">
                  <div class="row">
                    <div class="col-sm-6 col-lg-4 mb-4">
                      <!-- Card -->
                      <div class="card h-100">
                        <div class="shape-container">
                          <img class="card-img-top" src="../assets/img/500x280/img1.jpg" alt="图片描述内容">
                          
                          <!-- Shape -->
                          <div class="shape shape-bottom zi-1" style="margin-bottom: -.25rem">
                            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 1920 100.1">
                              <path fill="#fff" d="M0,0c0,0,934.4,93.4,1920,0v100.1H0L0,0z"></path>
                            </svg>
                          </div>
                          <!-- End Shape -->
                        </div>

                        <!-- Card Body -->
                        <div class="card-body">
                          <h3 class="card-title">
                            <a class="text-dark" href="../blog-article.html">Better is when everything works together</a>
                          </h3>

                          <p class="card-text">Learn how your Google devices can do more.</p>
                        </div>
                        <!-- End Card Body -->

                        <!-- Card Footer -->
                        <div class="card-footer">
                          <div class="d-flex align-items-center">
                            <div class="flex-shrink-0 avatar-group avatar-group-xs">
                              <a class="avatar avatar-xs avatar-circle" href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="娜塔莉·加加">
                                <img class="avatar-img" src="../assets/img/160x160/img9.jpg" alt="图片描述内容">
                              </a>
                              <a class="avatar avatar-xs avatar-circle" href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="艾米丽·米尔达">
                                <img class="avatar-img" src="../assets/img/160x160/img8.jpg" alt="图片描述内容">
                              </a>
                            </div>

                            <div class="flex-grow-1">
                              <div class="d-flex justify-content-end">
                                <p class="card-text">July 15</p>
                              </div>
                            </div>
                          </div>
                        </div>
                        <!-- End Card Footer -->
                      </div>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->

                    <div class="col-sm-6 col-lg-4 mb-4">
                      <!-- Card -->
                      <div class="card bg-dark h-100" style="background-image: url(../assets/svg/components/wave-pattern-light.svg);">
                        <!-- Card Body -->
                        <div class="card-body">
                          <div class="mb-5">
                            <span class="badge bg-primary">Featured</span>
                          </div>

                          <h3 class="card-title">
                            <a class="text-white" href="../blog-article.html">Announcing Front Tutorials: Master Adobe Ai - Part II</a>
                          </h3>

                          <p class="text-white-70">A new tutorial to make it easier to master Adobe Ai.</p>
                        </div>
                        <!-- End Card Body -->
                        
                        <!-- Card Footer -->
                        <div class="card-footer">
                          <div class="d-flex align-items-center">
                            <div class="flex-shrink-0 avatar-group avatar-group-xs">
                              <a class="avatar avatar-xs avatar-circle" href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Aaron Larsson">
                                <img class="avatar-img" src="../assets/img/160x160/img3.jpg" alt="图片描述内容">
                              </a>
                            </div>
                            
                            <div class="flex-grow-1">
                              <div class="d-flex justify-content-end">
                                <p class="card-text text-white-70">July 15</p>
                              </div>
                            </div>
                          </div>
                        </div>
                        <!-- End Card Footer -->
                      </div>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->

                    <div class="col-sm-6 col-lg-4 mb-4">
                      <!-- Card -->
                      <div class="card h-100">
                        <div class="shape-container">
                          <img class="card-img-top" src="../assets/img/500x280/img3.jpg" alt="图片描述内容">
                          
                          <!-- Shape -->
                          <div class="shape shape-bottom zi-1" style="margin-bottom: -.25rem">
                            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 1920 100.1">
                              <path fill="#fff" d="M0,0c0,0,934.4,93.4,1920,0v100.1H0L0,0z"></path>
                            </svg>
                          </div>
                          <!-- End Shape -->
                        </div>

                        <!-- Card Body -->
                        <div class="card-body">
                          <h3 class="card-title">
                            <a class="text-dark" href="../blog-article.html">Should You Buy An Apple Pencil?</a>
                          </h3>

                          <p class="card-text">The Apple Pencil is an expensive device that comes with some interesting features, but not everyone needs them.</p>
                        </div>
                        <!-- End Card Body -->

                        <!-- Card Footer -->
                        <div class="card-footer">
                          <div class="d-flex align-items-center">
                            <div class="flex-shrink-0 avatar-group avatar-group-xs">
                              <a class="avatar avatar-xs avatar-circle" href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Hanna Wolfe">
                                <img class="avatar-img" src="../assets/img/160x160/img10.jpg" alt="图片描述内容">
                              </a>
                              <a class="avatar avatar-xs avatar-circle" href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="John O'nolan">
                                <img class="avatar-img" src="../assets/img/160x160/img6.jpg" alt="图片描述内容">
                              </a>
                            </div>

                            <div class="flex-grow-1">
                              <div class="d-flex justify-content-end">
                                <p class="card-text">July 15</p>
                              </div>
                            </div>
                          </div>
                        </div>
                        <!-- End Card Footer -->
                      </div>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->
                  </div>
                  <!-- End Row -->
                </div>
                <!-- End Card Grid -->

Component #4

预览
HTML

Product

Better is when everything works together

Tech

Should You Buy An Apple Pencil?

Product

This Watch gym partnerships give you perks for working out

Tech

Drone Company PrecisionHawk Names New CEO

              
                <!-- Card Grid -->
                <div class="container">
                  <div class="w-lg-75 border-top content-space-2 mx-lg-auto">
                    <!-- Heading -->
                    <div class="mb-3 mb-sm-5">
                      <h2>Related articles</h2>
                    </div>
                    <!-- End Heading -->

                    <div class="row">
                      <div class="col-md-6">
                        <!-- Card -->
                        <div class="border-bottom h-100 py-5">
                          <div class="row justify-content-between">
                            <div class="col-6">
                              <a class="text-cap" href="#">Product</a>
                              <h4 class="mb-0">
                                <a class="text-dark" href="../blog-article.html">Better is when everything works together</a>
                              </h4>
                            </div>
                            <!-- End Col -->

                            <div class="col-5">
                              <img class="img-fluid rounded" src="../assets/img/500x280/img1.jpg" alt="图片描述内容">
                            </div>
                            <!-- End Col -->
                          </div>
                          <!-- End Row -->
                        </div>
                        <!-- End Card -->
                      </div>
                      <!-- End Col -->

                      <div class="col-md-6">
                        <!-- Card -->
                        <div class="border-bottom h-100 py-5">
                          <div class="row justify-content-between">
                            <div class="col-6">
                              <a class="text-cap" href="#">Tech</a>
                              <h4 class="mb-0">
                                <a class="text-dark" href="../blog-article.html">Should You Buy An Apple Pencil?</a>
                              </h4>
                            </div>
                            <!-- End Col -->

                            <div class="col-5">
                              <img class="img-fluid rounded" src="../assets/img/500x280/img3.jpg" alt="图片描述内容">
                            </div>
                            <!-- End Col -->
                          </div>
                          <!-- End Row -->
                        </div>
                        <!-- End Card -->
                      </div>
                      <!-- End Col -->

                      <div class="col-md-6">
                        <!-- Card -->
                        <div class="border-bottom h-100 py-5">
                          <div class="row justify-content-between">
                            <div class="col-6">
                              <a class="text-cap" href="#">Product</a>
                              <h4 class="mb-0">
                                <a class="text-dark" href="../blog-article.html">This Watch gym partnerships give you perks for working out</a>
                              </h4>
                            </div>
                            <!-- End Col -->

                            <div class="col-5">
                              <img class="img-fluid rounded" src="../assets/img/500x280/img5.jpg" alt="图片描述内容">
                            </div>
                            <!-- End Col -->
                          </div>
                          <!-- End Row -->
                        </div>
                        <!-- End Card -->
                      </div>
                      <!-- End Col -->

                      <div class="col-md-6">
                        <!-- Card -->
                        <div class="border-bottom h-100 py-5">
                          <div class="row justify-content-between">
                            <div class="col-6">
                              <a class="text-cap" href="#">Tech</a>
                              <h4 class="mb-0">
                                <a class="text-dark" href="../blog-article.html">Drone Company PrecisionHawk Names New CEO</a>
                              </h4>
                            </div>
                            <!-- End Col -->

                            <div class="col-5">
                              <img class="img-fluid rounded" src="../assets/img/500x280/img7.jpg" alt="图片描述内容">
                            </div>
                            <!-- End Col -->
                          </div>
                          <!-- End Row -->
                        </div>
                        <!-- End Card -->
                      </div>
                      <!-- End Col -->
                    </div>
                    <!-- End Row -->
                  </div>
                </div>
                <!-- End Card Grid -->