heimrichhannot/contao-bootstrapper

调整contao元素和标记,以充分利用twitter bootstrap。

3.2.8-beta3 2020-09-23 11:21 UTC

This package is auto-updated.

Last update: 2024-09-12 18:11:09 UTC


README

Contao外部CSS和JS资源组,支持bootstrap和font-awesome。

功能

  • 将bootstrap-slider添加为FE的inputType

表单/EFG

  • 支持Ajax表单处理。支持消息可以轻松在表单内配置,在自定义组(如fieldsets)内。

模块

ModuleNewsReader

  • 如果选择news_full_modal.html5模板,则以contao的bootstrap模态窗口显示新闻详情

Bootstrapper组件

默认组件

如果你不想使用这些组件,可以在页面布局中禁用。

bootstrap-scroll-smooth

如果你想设置偏移量,例如对于固定的标题,你可以在fe_page.html5中body元素内提供data-scroll-smooth-offset。你可以提供整数或多个元素选择器,以计算应从目标偏移中减去的偏移高度。选择器的优点在于,如果你有一个响应式网站,偏移量会根据其元素高度更新。你可以通过向body元素添加data-scroll-smooth-duration来设置动画持续时间,并通过添加data-scroll-smooth-easing来设置缓动函数。

示例 - 整数

<body data-scroll-smooth-offset="150" data-scroll-smooth-duration="slow" data-scroll-smooth-easing="swing" id="top">
 <div id="header"></header>
</body>

示例 - 选择器

<body data-scroll-smooth-offset="#header,#highlight" data-scroll-smooth-duration="slow" data-scroll-smooth-easing="swing" id="top">
 <div id="header"></header>
 <div id="highlight"></header>
</body>

Bootstrapper表单字段评估扩展

Flatpickr(日期选择器)数据属性

示例 1:Flatpickr(仅日期选择器与链接选择器)

<div class="form-group datepicker">
    <input type="text" id="f_datepicker" name="f[datepicker]" placeholder="von" data-date-format="d.m.Y" data-moment-date-format="DD.MM.YYYY" data-linked-end="#f_datepicker_range" class="form-control" value="16.11.2017">
</div>

示例 2:Flatpickr(日期选择器与时间选择器)

<div class="form-group datepicker datimepicker">
    <input type="text" id="f_datepicker" name="f[datepicker]" placeholder="von" data-enable-time="true" data-date-format="d.m.Y H:i" data-moment-date-format="DD.MM.YYYY HH:mm"  class="form-control" value="16.11.2017 14:28">
</div>

示例 3:Flatpickr(时间选择器)

<div class="form-group timepicker">
    <input type="text" id="f_datepicker" name="f[datepicker]" placeholder="von" data-enable-time="true" data-no-calendar="true" data-date-format="H:i" data-moment-date-format="HH:mm" class="form-control" value="14:28">
</div>
Bootstrapper输入滑块评估扩展

Bootstrapper表单字段回调

Bootstrapper插入标记

表单模板

  • 自定义表单字段模板的命名约定如下: bootstrapper_form_[type]_[name of your form field].html5 例如:"bootstrapper_form_upload_myfiles.html"