schmidtwebmedia/grid-for-gridelements

使用GridElements添加一个易于使用的网格元素。它不依赖于框架。为Bootstrap v4做好准备。

维护者

详细信息

github.com/SchmidtWebmedia/grid-for-gridelements

源代码

问题

安装次数: 2,576

依赖项: 0

建议者: 0

安全: 0

星标: 1

关注者: 1

分支: 2

开放问题: 0

类型:typo3-cms-extension

2.2.0 2021-10-31 11:43 UTC

Requires

Replaces

  • typo3-ter/grid-for-gridelements: 2.2.0

GPL-2.0-or-later e406a5918ad8a8d5bdea85a67b292dab363ecd1b

  • Marco Schmidt

bootstrapextensiongridtypo3Gridelements

This package is auto-updated.

Last update: 2024-09-04 08:35:00 UTC

README

版本 2.X.X

TYPO3 GridElements

版本 1.X.X

TYPO3 GridElements

描述

您可以使用此扩展添加一个独立的框架的易于使用的网格。

它已预配置为Bootstrap 4。

重要提示：Bootstrap CSS/JS不包含在内

功能

为TYPO3编辑器提供了网格选项。例如

  • 50/50
  • 33/66
  • 25/75

此适用于

  • 2列网格
  • 3列网格
  • 4列网格

后端

配置

Screenshot Backend Configuration

后端视图

Screenshot Backend

前端

Screenshot Frontend Output

安装

  1. 安装gridelements扩展。
  2. 安装grid_for_gridelements扩展
  3. 包含静态模板
  4. 在TYPO3中愉快地使用网格：）

Composer安装

composer require schmidtwebmedia/grid-for-gridelements

自定义

您可以在前端自定义输出，更改框架或添加更多网格比例选项。并更改扩展设置中JSON配置文件的路径。

请使用以下json文件结构

{
  "cols": [
    {
      "twocol": [
        {
          "label": "auto",
          "class": [
            "col-12 col-md",
            "col-12 col-md"
          ]
        },
        ...
      ],
      "threecol": [
        {
          "label": "auto",
          "class": [
            "col-12 col-md",
            "col-12 col-md",
            "col-12 col-md"
          ]
        },
       ...
      ],
      "fourthcol": [
        {
          "label": "auto",
          "class": [
            "col-12 col-sm-6 col-md",
            "col-12 col-sm-6 col-md",
            "col-12 col-sm-6 col-md",
            "col-12 col-sm-6 col-md"
          ]
        },
        ...
      ]
    }
  ],
  "row": [
    {
      "class": "row"
    }
  ]
}