README

基于 Twitter Bootstrap 5 的 Typo3 模板扩展包。

提供页面模板和许多为 Bootstrap 5 修改或构建的内容元素。
内容元素的基础是 fluid_styled_content（许多是从这个扩展复制的）。

安装

在 https://github.com/lbr-media/typo3-bootstrap-base 有一个基本包，它也加载了一个分发扩展。可能使用它来获取带有内容的示例页面，或者按照以下步骤获取一个全新且空的安装

1. 使用 composer 以常规方式安装 typo3。

使用 composer create-project "typo3/cms-base-distribution:^11.5" my-new-project 或检查 composer 辅助工具 https://get.typo3.org/misc/composer/helper。

后端运行后，你可能需要设置站点配置。

2. 安装此包。

composer require lbr-media/typo3-extension-bootstrap

3. 运行命令将一些资产复制到 fileadmin。

php vendor/bin/typo3 bootstrap:updatefileadmin

4. 清除缓存

使用 Install-Tool 或 php vendor/bin/typo3 cache:flush 清除缓存。

5. 前往后端，创建一个新的模板并包含扩展中的静态文件

包含以下静态模板

通用（bootstrap）
内容元素（bootstrap）
附加样式（bootstrap）

在设置字段中移除默认的 TypoScript 配置

现在你应该能够调用页面的前端。

内容元素

所有内容元素

所有内容元素都有额外或修改过的字段。

字段

框架类（选择）
在这里您可以找到 Bootstrap 容器*类，如 container-xl 或 container-float。
内部框架类（选择）
类似于框架类，但当选择一个值时，会在内容周围创建一个内部 div。
示例

TCEFORM.tt_content.tx_bootstrap_inner_frame_class.addItems {
    my-inner-frame-class = My Label
}

附加样式（多选）
对于单个内容元素，可以选择许多样式。
使用此配置修改，如缩进等。
在 TypoScript 中可以配置多个样式。
您可以在 plugin.tx_bootstrap.settings.form.element.AdditionalStyles 键下找到它们。
每个变体都有以下属性
- label（字符串；必需）
- value（整数；必需；用于参考）
- outerWrap（字符串）
- innerWrap（字符串）
- additionalClass（字符串）
- additionalAttributes（数组；键值对）
- additionalOuterClass（字符串）
- additionalOuterAttributes（数组；键值对）

示例

plugin.tx_bootstrap.settings.form.element.AdditionalStyles {
    10 {
        label = Indent left
        value = 10
        innerWrap = <div class="indent-left-inner">|</div>
        additionalClass = indent-left
        additionalAttributes {
            data-render = indent-left
        }
    }
}

颜色（选择；text-{color}类之一）
背景颜色（选择；bg-{color}类之一）
前间距（选择；space_before_class'之一）
后间距（选择；space_after_class'之一）

space_before_class和space_after_class的默认值将被Bootstrap间距类替换。因此，您不需要额外的类来设置内容元素之间的间距。

调整至您的需求

plugin.tx_bootstrap.settings.form.element {
    SpaceBeforeClassReplacements {
        extra-small = mt-3
        small = mt-4
        medium = mt-5
        large = mt-6
        extra-large = mt-7
    }

    SpaceAfterClassReplacements {
        extra-small = mb-3
        small = mb-4
        medium = mb-5
        large = mb-6
        extra-large = mb-7
    }
}

所有标题

所有内容元素的标题都具有额外的或修改过的字段。

字段

标题（多行字符串）
标题布局（即类型）（选择）
将生成的标签（从h1到h5）。
布局（选择）
将用于标签的基本CSS类。默认Bootstrap类从display-1到display-6，h1到h6和lead。
变体或预定义标题（选择）
对于每个标题，只能选择一个变体。使用此功能来生成标题的变体。
在TypoScript中可以配置多个变体。
您可以在键plugin.tx_bootstrap.settings.form.element.PredefinedHeader下找到它们。
每个变体都有以下属性
- label（字符串；必需）
- value（整数；必需；用于参考）
- outerWrap（字符串）
- innerWrap（字符串）
- additionalClass（字符串）

示例

plugin.tx_bootstrap.settings.form.element.PredefinedHeader {
    10 {
        label = My fancy headline
        value = 10
        outerWrap = <div class="h-fancy border bg-dark text-light rounded">|</div>
        innerWrap = <span class="h-fancy-inner">|</span>
        additionalClass = mb-0
    }
}

颜色（选择；text-{color}类之一）
位置（选择；start、center或end）
日期（日期）
附加样式（多选）
对于单个标题，可以选择许多样式。使用此功能来配置如大写、无下划线等修改。在TypoScript中可以配置多个样式。
您可以在键plugin.tx_bootstrap.settings.form.element.AdditionalHeaderStyles下找到它们。
每个变体都有以下属性
- label（字符串；必需）
- value（整数；必需；用于参考）
- outerWrap（字符串）
- innerWrap（字符串）
- additionalClass（字符串）

示例

plugin.tx_bootstrap.settings.form.element.AdditionalHeaderStyles {
    10 {
        label = VERSAL
        value = 10
        additionalClass = text-uppercase
    }
    20 {
        label = italic
        value = 20
        innerWrap = <em>|</em>
    }
    30 {
        label = -line-through-
        value = 30
        innerWrap = <del>|</del>
    }
}

链接（TypoLink）
副标题（字符串）
文件图标
- 图标（文件引用）
- 大小（选择；Bootstrap字体大小或仅继承）
- 对齐方式（选择；从xs到xxl的每个设备；top、top-left、top-center、top-right、left、left-top、left-middle、left-bottom等）
图标集
- 集（选择；必需；目前仅限bootstrap图标）
- 名称（字符串；只读，显示所选图标）
- 对齐方式（选择；从xs到xxl的每个设备；top、top-left、top-center、top-right、left、left-top、left-middle、left-bottom等）
- 大小（选择；Bootstrap字体大小或仅继承）
- 颜色（选择；text-{color}类之一）

TypoScript 常量

手风琴

Bootstrap风格的折叠组件。
CType: bootstrap_accordion

一个折叠内容元素包含一个或多个折叠项。
每个折叠项可以包含一个或多个文本 & 媒体（网格）内容元素。

所有项目的设置

在打开其他项时保持项打开（布尔值）

每个项目的设置

加载时打开（布尔值）

轮播图

带有图片的Bootstrap风格的轮播组件。
CType: bootstrap_carousel

设置

动画（选择；slide或fade）
自动播放（布尔值）
颜色方案（选择；light或dark）
显示控件（布尔值）
显示指示器（布尔值）
间隔（整数；必需；毫秒）

图像属性

标题（字符串）
标题（字符串）
替代（字符串）
描述（多行字符串）
链接（TypoLink）
链接文本（字符串）
裁剪（从xs到xxl的每个设备）

卡片

Bootstrap风格的卡片组件，采用网格系统。
CType: bootstrap_cards

设置

预设（多选）
在TypoScript中，tt_content.bootstrap_cards.flexform_presets可以将一个或多个设置分组并标注为选择项。
网格
- 列数（选择；从xs到xxl的每个设备；col*类）
- 水平间距 x（选择；从xs到xxl的每个设备；g-*类）
- 水平间距 y（选择；从xs到xxl的每个设备；g-*类）
- 水平对齐 x（选择；从xs到xxl的每个设备；对齐类）
- 垂直对齐 y（选择；从xs到xxl的每个设备；对齐类）
卡片
- 图像位置（选择；above、below、start、end之一）
- 背景颜色（选择；bg-{color}类之一）
- 文本颜色（选择；text-{color}类之一）
- 边框选项
  - 边框边缘（选择；边框-{方向}类之一）
  - 边框宽度（选择；边框-{大小}类之一）
  - 边框颜色（选择；边框-{颜色}类之一）
  - 圆角（选择；圆角类之一）
  - 阴影（选择；阴影类之一）
- 按钮颜色/样式（选择；btn-{颜色}和btn-outline-{颜色}类之一）
图像优化（从xs到xxl生成百分比窗口宽度）

卡片项属性

标题（字符串）
标题（字符串）
图像（文件引用）
文本（多行字符串，RTE）
链接（TypoLink）
链接文本（字符串）
页脚（字符串）

媒体网格

可调整的网格系统中的图像和视频。也提供了瀑布流布局。
CType: bootstrap_mediagrid

设置

预设（多选）
在TypoScript tt_content.bootstrap_mediagrid.flexform_presets中，可以组合并标记一组或多组设置以供选择。
使用masonry网格（布尔值）
网格
- 列数（选择；从xs到xxl的每个设备；col*类）
- 水平间距 x（选择；从xs到xxl的每个设备；g-*类）
- 水平间距 y（选择；从xs到xxl的每个设备；g-*类）
- 水平对齐 x（选择；从xs到xxl的每个设备；对齐类）
- 垂直对齐 y（选择；从xs到xxl的每个设备；对齐类）
每个媒体项的边框
- 边框边缘（选择；边框-{方向}类之一）
- 边框宽度（选择；边框-{大小}类之一）
- 边框颜色（选择；边框-{颜色}类之一）
- 圆角（选择；圆角类之一）
- 阴影（选择；阴影类之一）
图像优化（从xs到xxl生成百分比窗口宽度）

表格

Bootstrap样式的Tabulator组件。
CType: bootstrap_tabs

一个Tabulator内容元素包含一个或多个Tabulator项。
每个Tabulator项可以包含一个或多个文本 & 媒体（网格）内容元素。

所有项目的设置

布局（选择；default、pills horizontal或pills vertical）
导航对齐方式（选择；仅水平；start、center、end、nav fill、nav justified之一）

每个项目的设置

active（布尔值）
只能有一个是活动的。使用第一个找到的具有活动状态的项。如果没有活动项，则第一个项被标记为活动项。

文本 + 图像

一个内容元素，可用于快速创建一个包含一个图像和文本的网格。位置、空间和对齐可调整。
CType: bootstrap_textimage

设置

预设（多选）
在TypoScript tt_content.bootstrap_textimage.flexform_presets中，可以组合并标记一组或多组设置以供选择。
顺序（选择；first image或first text）
图像对齐方式（选择；top或bottom）
文本对齐方式（选择；top或bottom）
标题位置（选择；above all、above text或above image）
文本和图像之间的空间（选择；从xs到xxl的每个设备；g-*类）
图像边框
- 边框边缘（选择；边框-{方向}类之一）
- 边框宽度（选择；边框-{大小}类之一）
- 边框颜色（选择；边框-{颜色}类之一）
- 圆角（选择；圆角类之一）
- 阴影（选择；阴影类之一）

文本 & 媒体（浮动）

一个浮动媒体网格的文本。全可调整的网格和浮动设置。编辑器可用一些预设。
CType: bootstrap_textmediafloat

设置

预设（多选）
在TypoScript tt_content.bootstrap_textmediafloat.flexform_presets中，可以组合并标记一组或多组设置以供选择。
标题位置（above all或above text）
媒体区域
- 位置（选择；从xs到xxl的每个设备；centered above text、left或right）
- 宽度（选择；从xs到xxl的每个设备；额外的浮动类）
- Space x（选择；从xs到xxl的每个设备；空间类）
- Space y（选择；从xs到xxl的每个设备；空间类）
使用masonry网格
媒体项的网格
- 列数（选择；从xs到xxl的每个设备；col*类）
- 水平间距 x（选择；从xs到xxl的每个设备；g-*类）
- 水平间距 y（选择；从xs到xxl的每个设备；g-*类）
- 水平对齐 x（选择；从xs到xxl的每个设备；对齐类）
- 垂直对齐 y（选择；从xs到xxl的每个设备；对齐类）
每个媒体项的边框
- 边框边缘（选择；边框-{方向}类之一）
- 边框宽度（选择；边框-{大小}类之一）
- 边框颜色（选择；边框-{颜色}类之一）
- 圆角（选择；圆角类之一）
- 阴影（选择；阴影类之一）
图像优化（从xs到xxl生成百分比窗口宽度）

文本 & 媒体（网格）

文本列和媒体网格列。最灵活的内容元素。
CType: bootstrap_textmediagrid

设置

预设（多选）
在TypoScript tt_content.bootstrap_textmediagrid.flexform_presets中，可以组合并标记一组或多组设置以供选择。
文本和媒体区域的默认顺序（选择；first image或first text）
每个设备的顺序（选择；从xs到xxl的每个设备；first image或first text）
标题位置（选择；above all、above text或above media area）
文本和媒体列的网格
- 文本列列数（选择；从xs到xxl的每个设备；col*类）
- 媒体列列数（选择；从xs到xxl的每个设备；col*类）
- 水平间距 x（选择；从xs到xxl的每个设备；g-*类）
- 水平间距 y（选择；从xs到xxl的每个设备；g-*类）
- 水平对齐 x（选择；从xs到xxl的每个设备；对齐类）
- 垂直对齐 y（选择；从xs到xxl的每个设备；对齐类）
文本列
- Align self（选择；从xs到xxl的每个设备；对齐类）
- 内部空间（选择；从xs到xxl的每个设备；空间类别）
媒体列
- 使用masonry网格
- Align self（选择；从xs到xxl的每个设备；对齐类）
- 内部空间（选择；从xs到xxl的每个设备；空间类别）
媒体项的网格
- 列数（选择；从xs到xxl的每个设备；col*类）
- 水平间距 x（选择；从xs到xxl的每个设备；g-*类）
- 水平间距 y（选择；从xs到xxl的每个设备；g-*类）
- 水平对齐 x（选择；从xs到xxl的每个设备；对齐类）
- 垂直对齐 y（选择；从xs到xxl的每个设备；对齐类）
每个媒体项的边框
- 边框边缘（选择；边框-{方向}类之一）
- 边框宽度（选择；边框-{大小}类之一）
- 边框颜色（选择；边框-{颜色}类之一）
- 圆角（选择；圆角类之一）
- 阴影（选择；阴影类之一）
图像优化（从xs到xxl生成百分比窗口宽度）

两列文本

创建快速两列文本。
CType: bootstrap_twocolumnstext

TypoScript 常量

警告

Bootstrap 警告框。
CType: bootstrap_alert

设置

标题（字符串）
文本（多行字符串，RTE）
警告颜色（选择；alert-{颜色}类中的一个）
文本颜色（选择；text-{颜色}类中的一个）
背景颜色（选择；bg-{color}类之一）
图标集
- 集（选择；必需；目前仅限bootstrap图标）
- 名称（字符串；只读，显示所选图标）
- 位置（选择；top，top-left，top-center，top-right，left，left-top，left-middle，left-bottom等）
- 大小（选择；Bootstrap字体大小或仅继承）
- 图标颜色（选择；text-{颜色}类中的一个）
边框选项
- 边框边缘（选择；边框-{方向}类之一）
- 边框宽度（选择；边框-{大小}类之一）
- 边框颜色（选择；边框-{颜色}类之一）
- 圆角（选择；圆角类之一）
- 阴影（选择；阴影类之一）

Markdown

就像常规文本内容元素一样 - 但您使用Markdown标记而不是富文本编辑器。在前端，它将被转换为HTML。
CType: bootstrap_markdown

项目符号

Bootstrap风格的列表。
CType: bullets

设置（类似于 Typo3）

无序列表
有序列表
定义列表

Div

只是一条线。
CType: div

TypoScript 常量

标题

只是一个标题。
CType: header

表格

可以使用所有Bootstrap表格类进行调整。
CType: table

上传

使用Bootstrap卡片组件实现。
默认Typo3字段可用。
CType: uploads

TypoScript 常量

复制的 `fluid_styled_content` 内容元素

HTML
CType: html
列表/插件
CType: list
菜单*
CTypes
- menu_abstract
- menu_categorized_content
- menu_categorized_pages
- menu_pages
- menu_recently_updated
- menu_related_pages
- menu_section
- menu_section_pages
- menu_sitemap
- menu_sitemap_pages
- menu_subpages
快捷方式
CType: shortcut
文本
CType: text

致谢

非常感谢

https://typo3.org
此扩展基于Typo3项目。
https://bootstrap.ac.cn
它实现了Typo3后端和前端的Twitter Bootstrap。
https://github.com/twbs/icons
用于图标集的是Twitter Bootstrap Icons。
https://masonry.desandro.com + https://github.com/desandro/imagesloaded
可以使用Masonry进行媒体网格。它也不是此软件的一部分。Masonry也需要，并且将通过composer加载。
https://scottjehl.github.io/picturefill/
为了向IE11提供图片，使用picturefill。

没有他们，世界将变得更加悲伤。

lbr-media / typo3-extension-bootstrap

维护者

详细信息

README

目录

安装

1. 使用 composer 以常规方式安装 typo3。

2. 安装此包。

3. 运行命令将一些资产复制到 fileadmin。

4. 清除缓存

5. 前往后端，创建一个新的模板并包含扩展中的静态文件

内容元素

所有内容元素

字段

所有标题

字段

TypoScript 常量

手风琴

所有项目的设置

每个项目的设置

轮播图

设置

图像属性

卡片

设置

卡片项属性

媒体网格

设置

表格

所有项目的设置

每个项目的设置

文本 + 图像

设置

文本 & 媒体（浮动）

设置

文本 & 媒体（网格）

设置

两列文本

TypoScript 常量

警告

设置

Markdown

项目符号

设置（类似于 Typo3）

Div

TypoScript 常量

标题

表格

上传

TypoScript 常量

复制的 fluid_styled_content 内容元素

导航

TypoScript 常量

PID

常规导航

主下拉菜单

常规下拉链接

下拉切换链接/按钮

下拉菜单中的链接

致谢

复制的 `fluid_styled_content` 内容元素