axllent/silverstripe-list-to-bootstrap-grid

从 SilverStripe 列表创建 Bootstrap 网格布局

维护者

详细信息

github.com/axllent/silverstripe-list-to-bootstrap-grid

主页

源代码

问题

安装: 350

依赖项: 0

建议者: 0

安全: 0

星标: 3

关注者: 3

分支: 1

开放问题: 0

类型:silverstripe-vendormodule

2.0.2 2023-11-15 04:50 UTC

Requires

MIT 5a77259b18af6d3b30cab9dc239d348ba036a321

bootstraplistsilverstripe

This package is auto-updated.

Last update: 2024-09-15 06:39:24 UTC

README

轻松地从 SilverStripe 列表 创建 12 列网格系统。该类返回一个包含行、每行包含项目（无论列表是什么）、列宽和可选偏移量（如果最后一行项目少于指定值，则用于居中对齐最后一行）的 ArrayList。

此工具是为 Bootstrap 开发的，但可以轻松修改以适应任何 CSS 网格系统。

要求

  • SilverStripe ^4 或 ^5

安装

通过 Composer 安装

您可以通过 composer 使用 composer require axllent/silverstripe-list-to-bootstrap-grid 安装它

基本用法

在您的页面控制器中

<?php

use Axllent\ListToBootstrapGrid\ListToBootstrapGrid;

class CategoryPageController extends PageController
{
    public function getProductRows()
    {
        return ListToBootstrapGrid::create(
            $this->Products(),  // The list you wish to convert
            $columns = 3,       // Columns per row - must divide into 12!
            $center = true      // Center-align last row if < than $columns
        );
    }
}

然后在您的 CategoryPage.ss 模板中

<% loop $ProductRows %>
    <div class="row">
        <% loop $Items %>
            <div class="col-sm-{$Up.Width}<% if $First && $Up.Offset %> col-sm-offset-{$Up.Offset}<% end_if %>">
                <h2>$Title</h2>
                ...
            </div>
        <% end_loop %>
    </div>
<% end_loop %>