README

Contao 4 的 Contao Bootstrap 设计包为 Contao 4 后端添加了前端样式功能。目标是那些希望节省时间的网络开发者和在线代理商，以及希望对文章和元素的响应式行为有更多控制的后端用户。

除了 Bootstrap 类之外，它还提供许多自己的类，以及可以自定义的类。

功能

• 对所有元素和文章的边距、填充和显示的响应式设置
• 文本和背景颜色设置，包括透明度，以及其他文本设置
• 特殊标题设置
• 图像的响应式行为设置
• 将超链接简单地转换为 Bootstrap 按钮
• 文章的容器或容器流体设置
• 默认的响应式图像行为和文章容器设置
• 所有功能默认不选中（保留默认的 Contao 行为）

德语/德语描述

Contao Bootstrap 设计包为 Contao 4 后端添加了（响应式）前端样式功能。目标用户是希望节省时间和精力的网络开发者和在线代理商，以及希望获得更多对文章和元素响应式行为的控制的用户。

除了提供 Bootstrap 类之外，设计器还提供了许多自己的类，以及可以自定义的类。

功能

• 对所有元素和文章的边距、内边距和显示的响应式设置
• 文本和背景颜色设置，包括透明度，以及其他有用的文本设置
• 特殊标题设置
• 图像的响应式行为设置
• 将链接简单地转换为按钮
• 文章的容器和容器流体设置
• 图像和文章容器的默认响应式行为设置
• 所有功能默认选中（保留默认的 Contao 行为）

安装

您可以使用 Composer 安装此包

composer require sarahsolus/contaobsdesigner

入门

Contao 4 的 Contao Bootstrap 设计包需要 Bootstrap 4 才能正常工作。安装 Contao Bootstrap 插件或将 Bootstrap 4 手动添加到您的 FE 页面。

Contao 后端将出现新的设置

• 每个元素都有一个“设计”部分
• 每个图像元素都有一个新的响应式设置
• 每个超链接和顶部链接元素在超链接设置区域都有一个新的按钮设置
• 每个标题元素都有一个额外的设置来更改 h 类
• 在布局下的文章设置中有一个新的容器设置和某些设计设置
• 在 Contao 设置-后端设置中，有新的默认设置

在创建新文章之前，更改默认的容器类设置。如果您正在使用 Contao Bootstrap 扩展，请从布局部分的容器类设置中移除任何类，否则文章的容器流体设置将不起作用。

德语/德语指南

该扩展允许在 Contao 后端中进行新的设置

• 每个元素都有一个新的“设计”部分
• 每个图像元素都有一个新的响应式显示设置
• 每个超链接/顶部链接在超链接设置中都有一个选项，将链接转换为按钮
• 每个标题元素在“设计”部分下都有一个选项，可以更改元素的 h 类
• 在文章设置中的布局选项中，您可以设置将文章内容放入容器中，以及进行各种设计设置。
• 在Contao设置 - 后端设置中，有新的预设选项。

在开始设置页面结构之前，应选择容器类的预设设置。这样，每个新的文章都会自动获得容器类。如果使用Contao Bootstrap，请在布局设置中留空“容器类”，以便容器流体设置能够正常工作。

扩展自定义样式

您可以在SCSS中添加以下内容

.cbsd-text-brand-primary, .text-brand-primary p { color: $brand-primary !important; }
.cbsd-text-brand-secondary, .text-brand-secondary p { color: $brand-secondary !important; }
.cbsd-link-brand-primary, .link-brand-primary p { color: $brand-primary !important; }
.cbsd-link-brand-secondary, .link-brand-secondary p { color: $brand-secondary !important;}

.cbsd-bg-brand-primary { background-color:  $brand-primary !important;}
.cbsd-bg-brand-secondary { background-color:  $brand-secondary !important; }
.cbsd-bg-background { background-color: $body-color !important; }
.cbsd-bg-transparent-brand-primary { background-color: opacify($brand-primary, 0.5) !important; }
.cbsd-bg-transparent-brand-secondary { background-color: opacify($brand-secondary, 0.5) !important; }
.cbsd-bg-transparent-background { background-color: opacify($body-color, 0.5) !important; }
.cbsd-hl-brand-primary h1,.cbsd-hl-brand-primary h2,.cbsd-hl-brand-primary h3,.cbsd-hl-brand-primary h4,.cbsd-hl-brand-primary h5,.cbsd-hl-brand-primary h6 { color: $brand-primary !important; }
.cbsd-hl-brand-secondary h1,.cbsd-hl-brand-secondary h2,.cbsd-hl-brand-secondary h3,.cbsd-hl-brand-secondary h4,.cbsd-hl-brand-secondary h5,.cbsd-hl-brand-secondary h6 { color: $brand-secondary !important; }

来定义主要和次要的品牌颜色。

还有三个未使用的特殊类（s1、s2、s3），您可以用它们来设置特殊的边距或填充值。

备注

• 由于Contao的链接元素结构，必须添加一些关于超链接的自己的类。

未来计划

• 添加Bootstrap 5支持