README

此扩展允许您创建 Bootstrap CSS 主题，这些主题易于集成到您的布局中。

SCSSPHP 未实现需要添加供应商前缀的后处理器。因此，我们建议使用 agoat/autoprefixer。
agoat/autoprefixer 仅与 nodejs 兼容。如果您没有访问 nodejs 的权限，可以使用 --prefix-free，这是本包的要求。

我们还建议安装 contao-bootstrap/bundle。

如果您还安装了 fipps/contao-parallax-bundle，您将获得基于 bootstrap 动画的背景图像的出色视差效果。

优点

色彩系统

您可以在色彩系统中添加尽可能多的颜色。

垂直导航与响应式侧边菜单

我们还添加了 垂直导航 和 侧边菜单，它们可以无缝集成到您的导航栏中。
只有您想使用的组件会被编译成 CSS 文件。
在您的 contao 后端中更改 颜色、边距、边框或断点。

新的基本 CSS 网格类

我们在 bootstraps 弹性盒的基础上添加了一些 CSS 类来实现 CSS 网格系统。

• grid-[1..12] 用于 1 到 12 列的网格系统。
  您可以使用 bootstrap 断点，例如 grid-sm-6，在 sm 断点及以上使用六列。
• grid-square 与 style='aspect-ratio: cols/rows' 用于正方形网格系统。宽高比定义了元素应占用多少列和行。
  示例

  <div class="grid-4 grid-square">
    <div style="aspect-ratio: 1/2"
        <div>This element is 1 col width and 2 rows high</div>
    </div>
    <div style="aspect-ratio: 2/1"
        <div>This element is 2 col width and 1 rows high</div>
    </div>
    <div style="aspect-ratio: 2/2"
        <div>This element is 2 col width and 2 rows high</div>
    </div>    
  </div>
  

• grid-flow-[c|r|d|cd|rd] 用于控制流行为（您可以使用断点，如 grid-md-flow-c）
  • c: 列
  • r: 行
  • d: 稠密
  • cd: 列稠密
  • rd: 行稠密

现在创建您自己的 Bootstrap 主题，并在您的布局中选择该主题。
选择 autoprefix 或 prefixfree。

间距

我们更改了间距：5: 2 x $spacer（在 Bootstrap 3 x $spacer）6: 3 x $spacer（新）

待办事项

我们已经切换到 Bootstrap 4.3，并添加了一些新组件（通知和旋转器）。
这仍然是一个正在进行中的项目。定义间距

祝您玩得开心!!

https://github.com/agoat/contao-autoprefixer http://leaverou.github.io/prefixfree/