如何使用缩略图 bootstrap3 每页显示 36 张图像？

Question

我想使用缩略图在每页显示 36 张图片，在我的情况下显示 12 张，其他未设置，如照片中所示：

AnnoncesController.php

public function index()
    {
        $categories     = Category::all();
        $annonces       = Annonce::all();
                
        return view('annonces.index')->with([
            'categories'     => $categories,
            'annonces'       => $annonces,
        ]);
    }

index.blade.php

 <div class="row mix-grid thumbnails">
                        @foreach($annonces as $annonce)
                            <div class="col-md-3 col-xs-3 mix {{ $annonce->category->slug }} cat_all">
                                <a class="thumbnail-item">
                                    <img src="{{ asset('storage/'.$annonce->image) }}" alt="Nature 1"  />
                                    <div class="thumbnail-info">
                                        <p>Curabitur ut lorem id tellus malesuada tincidunt et eget purus</p>
                                        <button class="btn btn-primary"><span class="fa fa-link"></span></button>
                                        <button class="btn btn-primary"><span class="fa fa-eye"></span></button>
                                    </div>
                                </a>
                                <div class="thumbnail-data">
                                    <h5>{{ $annonce->titre }}</h5>
                                    <p>{!! $annonce->description !!} plus details...</p>
                                </div>                                
                            </div>
                        @endforeach
                        </div>

Answer 1

有几种方法可以对项目进行分页。最简单的是在query builder 或Eloquent query 上使用paginate 方法。 paginate 方法会根据用户正在查看的当前页面自动设置适当的限制和偏移量。默认情况下，当前page 由HTTP 请求上的页面查询字符串参数的值检测。 Laravel 会自动检测到这个值，也会自动插入到分页器生成的链接中。

在此示例中，传递给paginate 方法的唯一参数是您希望“每页”显示的项目数。在这种情况下，让我们指定我们希望每页显示36 个项目：

public function index()
{
    $annonces = Annonce::paginate(36);
            
    return view('annonces.index')->with([
        'annonces'       => $annonces,
    ]);
}

显示分页结果

调用paginate 方法时，您将收到Illuminate\Pagination\LengthAwarePaginator 的实例。调用simplePaginate 方法时，您将收到Illuminate\Pagination\Paginator 的实例。这些对象提供了几种描述结果集的方法。除了这些辅助方法之外，分页器实例也是迭代器，可以作为数组循环。因此，一旦您检索到结果，您就可以显示结果并使用 Blade 呈现页面链接：

<div class="container">
    @foreach ($annonces as $annonce)
        {{ $annonce->titre }}
    @endforeach
</div>

{{ $annonces->links() }}

链接方法会将links 呈现给结果集中的其余页面。这些链接中的每一个都已经包含正确的page 查询字符串变量。请记住，links 方法生成的 HTML 与 Bootstrap CSS 框架兼容。