README

此包提供了一些新的 NodeTypes 以添加通用的网格系统。所有默认类名都是为了与 Bootstrap 一起使用而设计的（https://bootstrap.ac.cn/css/#grid）。此包不提供任何 CSS。您可以使用自定义样式表或包含在您的站点包中的 Bootstrap CSS。您还可以根据需要配置所有类名。

使用此包，您将获得以下 NodeTypes

预定义网格（带布局选项）

• 2 列（50/50; 25/75; 75/25; 33/66; 66/33; 20/80; 80/20）
• 3 列（33/33/33; 25/50/25）
• 4 列（25/25/25/25）

这些 NodeTypes 将提供基本的网格系统。每个网格都有几个布局选项。

一些额外的 NodeTypes 以创建自定义网格

• 容器（固定或流动宽度）
• 行
• 网格

安装

通过 composer 安装。目前有旧版本可用。使用 >3.0.0 获取最新版本
1.2 分支是为 Neos 1.2 制作的，包括自定义网格功能。版本 1.0 是为 Neos >= 1.1 制作的。3.0 版本已在 Neos >= 2.1 上进行测试

composer require johannessteu/bootstrap-gridsystem

或者只需将此包复制到 YOUR_ROOT/Plugins/JohannesSteu.Bootstrap.GridSystem

之后，Root.ts2 将自动包含到您的主 TypoScript 中。否则使用

include: resource://JohannesSteu.Bootstrap.GridSystem/Private/TypoScript/Root.ts2

在您的 Root.ts2 中。

在您的模板中，您需要加载一些样式表。如果您使用的是 bootstrap，您可以在

<link rel="stylesheet" type="text/css" href="{f:uri.resource(package: 'TYPO3.Twitter.Bootstrap', path: '3.1/css/bootstrap.css')}" media="all">

在您的 head-Section 中执行此操作，如果已安装 TYPO3.Twitter.Bootstrap package。

用法

要使用此插件，只需在您的页面上创建一个新的内容元素，并选择这些新类型之一。检查器面板将为您提供访问所有不同布局和设置的权限。在 Neos 1.2 和更高版本中，您将注意到一个包含一些选项的新选项卡。

断点

您可以配置所有预定义列的所有断点。如果您不熟悉用于配置断点的类，请查看：https://bootstrap.ac.cn/css/#grid。要覆盖默认断点，只需在您的站点的 Settings.yaml 中覆盖设置即可。请确保此包在您的站点包之后不是必需的。最佳实践是在您的 Sites composer.json 中要求此插件。

例如，如果您希望在 xs 大小上断开 50-50 布局，则必须在 Packages/Sites/YourVendor.SiteKey/Configuration/Settings.yaml 中添加此内容

JohannesSteu:
  Bootstrap:
    GridSystem:
      Layouts:
        '50-50':
          'col-1': 'col-xs-6'
          'col-2': 'col-xs-6'
        '25-50-25':
          'col-1': 'col col-xs-12 col-sm-3'
          'col-2': 'col col-xs-12 col-sm-6'
          'col-3': 'col col-xs-12 col-sm-3'
        '25-25-25-25':
          'col-1': 'col col-xs-12 col-sm-3'
          'col-2': 'col col-xs-12 col-sm-3'
          'col-3': 'col col-xs-12 col-sm-3'
          'col-4': 'col col-xs-12 col-sm-3'

自定义网格

要创建自定义网格，首先添加一个新的“自定义行”。在此行中，您可以添加多个类型为 Column 的节点。对于每个列，您可以设置

• 大小 XS 到 LG
• 可见性
• 隐藏
• 偏移 sm-lg
• 排序拉动 sm-lg
• 排序推动 sm-lg