tricksiebzehn/trk17-columns-bundle

Contao 4 列包

维护者

详情

gitlab.com/tricksiebzehn/trk17columns

主页

源代码

问题

安装: 274

依赖: 0

建议者: 0

安全: 0

星标: 0

分支: 0

类型:contao-bundle

1.2.4 2022-01-19 12:10 UTC

Requires

Requires (Dev)

Conflicts

LGPL-3.0+ 832c01c206827387e2832bb69944499694c21c6e

bootstrapbundlecontaocolumnstricksiebzehn

This package is not auto-updated.

Last update: 2024-09-26 03:20:15 UTC

README

Trk17Columns 可以轻松地将 Bootstrap 集成到 Contao 中。只需少量工作，就可以快速获得一个网格系统，您可以将每个内容元素添加到其中。该扩展程序自带多个网格系统，您可以选择使用

  • Bootstrap 4 - 与版本 4 中的常规 12 列 Bootstrap 相同的 12 列 Bootstrap，具有 XS、SM、MD、LG 和 XL 尺寸。 https://bootstrap.ac.cn/
  • Bootstrap 3 - 与版本 3 中的常规 12 列 Bootstrap 相同，具有 XS、SM、MD 和 LG 尺寸。 https://bootstrap.ac.cn/docs/3.4/
  • Bootstrap 3 - 适配 XXS 和 XLG 值 - 一个适配的 12 列 Bootstrap 版本，具有两个额外的大小：XXS（屏幕宽度从 0 到 480px）和 XLG（屏幕宽度从 1680px 到无限大）。

所有版本都添加了仅绑定 Bootstrap 布局的 CSS，不会添加额外的样式，如 CSS-Reset 等。

因此，该扩展程序旨在简化新布局的初始设置工作。

安装

通过 composer 或 Contao Manager 进行安装。

在成功执行 Composer 更新和更新数据库后，现在应该会在 Contao 设置中出现一个名为“Bootstrap 设置”的新选项。在此可以调整扩展程序的设置

  • 流体容器: 此选择在“流体容器”选项中将所有常规“容器”更改为始终使用整个屏幕宽度。

  • Bootstrap 选择: 此选项允许选择上述所述的网格系统之一。常规：xs、sm、md、lg。适配：xxs、xs、sm、md、lg、xlg。

  • Bootstrap 尺寸: 此选择允许选择 1-12 的 Bootstrap columns，而不是像“半列”、“三分之列”等预设。但这意味着 Trk17Columns 不能自行计算响应式尺寸。这意味着：“预设”更容易维护，“全部”提供更多可能性。

扩展程序会自动绑定 Bootstrap CSS，因此安装和配置已完成。

使用

内容元素

本节假设已选择“预设”作为“Bootstrap 尺寸”。差异将在本节末尾解释。

安装后，对于每个内容元素，对于后端用户都会出现两个新的表单字段。分别是“元素宽度”和“响应式大小”。

通过这些选项可以定义每个元素的宽度。“元素宽度”始终指最大宽度（XLG 或 LG，取决于网格）。如果没有选择“响应式大小”，则较小尺寸将自动确定。可供选择的有“全列”、“半列”、“三分之列”、“四分之列”、“2/3 列”和“3/4 列”。

示例: 选择元素宽度为“四分之列”。未选择响应式大小。该元素现在将在 XXS 和 XS 上全列显示。在 SM 上显示为半列，在 MD 及以上显示为四分之列。

其他尺寸类似。除了“全列”之外，所有尺寸在 SM 上都显示为半列。“全列”在所有地方都全列显示。如果想要更精确地控制元素在不同屏幕尺寸上的显示大小，可以选择“响应式大小”。此时将出现所有屏幕尺寸的选择。

"元素宽度"现在仅指明XLG或LG尺寸的宽度。在“响应式尺寸”字段下方，依次是其他屏幕尺寸。

在Bootstrap 4中

  • 元素宽度 - XL
  • 响应式尺寸
  • 在大屏幕设备上 - LG
  • 在中屏幕设备上 - MD
  • 在小屏幕设备上 - SM
  • 在非常小的屏幕设备上 - XS

在调整过的Bootstrap 3中

  • 元素宽度 - XLG
  • 响应式尺寸
  • 在大屏幕设备上 - LG
  • 在中屏幕设备上 - MD
  • 在小屏幕设备上 - SM
  • 在非常小的屏幕设备上 - XS
  • 在最小屏幕设备上 - XXS

在Bootstrap 3中

  • 元素宽度 - LG
  • 响应式尺寸
  • 在中屏幕设备上 - MD
  • 在小屏幕设备上 - SM
  • 在非常小的屏幕设备上 - XS

每个这些字段都提供“全宽”等选项。因此，所有内容元素都可以根据不同的屏幕尺寸进行调整。

"Bootstrap 尺寸"的区别

如果“Bootstrap 尺寸”中选择的是“所有”，则后台界面略有不同。将没有“响应式尺寸”字段，所有响应式宽度必须自行选择。此外，将选择1至12的值，而不是“半宽”、“三分之一宽”等。

后台预览

可以在内容元素概览中查看元素宽度的预览。可以通过预览按钮测试不同屏幕尺寸下元素的宽度。

这些按钮位于筛选选项下方。

"列"

可能会有这样的情况，即4个元素应设置为三分之一宽，但第四个元素在小尺寸下应出现在第一个元素下方。

|    元素1    | |    元素2    | |    元素3    |

|    元素4    |

这是最大尺寸下的布局。所有4个元素都显示为三分之一宽。

|          元素1          | |          元素2          |

|          元素3          | |          元素4          |

在小尺寸下，所有元素都显示为两列宽。元素4会滑动到元素2下方。然而，我们希望元素4保持在元素1下方。这也可以通过Trk17Columns实现，通过使用列。列是包含任意数量元素的容器，同时也是一个列元素和行。

| 列开始 |

||    元素1    || |    元素2    | |    元素3    |

||    元素4    ||

|   列结束   |

在小尺寸下

|    列开始    |

||          元素1          || |          元素2          |

||          元素4          || |          元素3          |

|         列结束         |

这是一个使用列的示例。对于布局来说，一个列中的所有元素被视为一个单一元素。因此，左侧的元素始终保持在一起。

列可以使用如同手风琴的包裹器一样的方式使用。

表单

Trk17Columns也适用于表单字段。它们具有与内容元素相同的功能。在这种情况下，Fieldset是列。

其他扩展

Trk17Columns为所有内容元素添加了必要的字段，仅排除包含"notrk17columns"字段的元素。

可用的CSS类

Trk17Columns中的CSS允许使用以下CSS类

  • container,
  • container-fluid,
  • 行,
  • 列-(xxs/xs/md/lg/xlg/xl)-(1/2/3/4/5/6/7/8/9/10/11/12),
  • 列-偏移-(1/2/3/4/5/6/7/8/9/10/11/12),
  • 列-拉-(1/2/3/4/5/6/7/8/9/10/11/12),
  • 列-推-(1/2/3/4/5/6/7/8/9/10/11/12),
  • 可见-(xxs/xs/md/lg/xlg/xl),
  • 可见-(xxs/xs/md/lg/xlg/xl)-行内,
  • 可见-(xxs/xs/md/lg/xlg/xl)-行内块,
  • 可见-(xxs/xs/md/lg/xlg/xl)-块,
  • 可见打印,
  • 可见打印行内,
  • 可见打印行内块,
  • 可见打印块,
  • 隐藏-(xxs/xs/md/lg/xlg/xl),
  • 隐藏打印,
  • 不可见,
  • 隐藏,
  • 显示,
  • 文本隐藏,
  • 固定,
  • 向左拉,
  • 向右拉

模板

Trk17Columns 修改了以下模板

  • form_explanation.html5
  • form_fieldset.html5
  • form_headline.html5
  • form_submit.html5
  • form_textarea.html5
  • form_textfield.html5
  • ce_player.html5 -> 这允许YouTube和视频元素有一个响应式的大小，总是保持16:9的分辨率。如果播放器元素的宽度和高度定义了另一个分辨率，则将保持该分辨率。

如果“form”模板被其他模块覆盖，则表单字段将失去Bootstrap功能。

类和钩子

Trk17Columns 使用以下钩子

  • getContentElement - 此钩子允许为每个内容元素分配一个或多个Bootstrap类。
  • parseTemplate (Trk17Container) - 此钩子用于插入容器和行。
  • parseTemplate (Trk17Columns) - 此钩子用于为包含的内容元素分配Bootstrap类。
  • parseWidget - 在此处为表单字段分配Bootstrap类。

以下类包含在Trk17Columns中

  • Trk17Columns
    • public function getContentElementHook( obj $objRow, string $strBuffer, obj $objElement ) -> 钩子 (见上文)
    • public function parseTemplateHook( obj $objTemplate ) -> 钩子 (见上文)
  • Trk17ColumnsController
    • public function calculateColumn( string $col ) -> 当给定"full"、"half"、"third"、"quarter"、"two-third"或"three-quarter"时，返回相应的Bootstrap大小。
    • public function caclulateObjectColumns( obj $objElement ) -> 返回一个字符串，其中包含Bootstrap大小，可以添加到对象的类中。
  • Trk17Container
    • public function parseTemplateHook( obj $objTemplate ) -> 钩子 (见上文)
  • Trk17Forms
    • public functionparseWidgetHook( string $strBuffer, obj $widget ) -> 钩子 (见上文)

DCA

以下表格的DCA被修改

  • tl_content -> 添加了元素宽度的选择。
  • tl_form_field -> 添加了元素宽度的选择。
  • tl_layout -> 添加了左侧和右侧列宽度的选择。
  • tl_settings -> 添加了Bootstrap设置。