heimrichhannot/contao-bootstrapper

Adjusts contao elements & markups, to take advantage of twitter bootstrap.

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

This package is auto-updated.

Last update: 2024-10-12 18:16:52 UTC


README

Contao external CSS & JS assets groups with bootstrap and font-awesome support.

Features

  • Adds the bootstrap-slider as inputType to the FE

Form/EFG

  • Supports Ajax Form Handling. Support Messages can be easily configured inside the form, within a custom group like fieldsets.

Module

ModuleNewsReader

  • Display news details as contao of bootstrap modal window, if selected news_full_modal.html5 template

Bootstrapper components

Default components

Disable in Page-layout, if you dont want to use these components.

bootstrap-scroll-smooth

If you want to set an offset, for example for a fixed header, you can provide data-scroll-smooth-offset at you body element within fe_page.html5 You can provide both integers or multiple element selectors, do calculate the offset height, that should be subtracted from the target offset. Selectors have the advantage, that in case you have a responsive website, the offset updates from its element height. You are able to set the animation duration by adding data-scroll-smooth-duration to the body element and data-scroll-smooth-easing for the easing function.

Example - Integer:

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

Example - Selectors:

<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 form field eval extension

Flatpickr (datepicker) data attributes

Example 1: Flatpickr (datepicker only with linked picker)

<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>

Example 2: Flatpickr (datepicker with timepicker)

<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>

Example 3: Flatpickr (timepicker)

<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 input slider eval extension

Bootstrapper form field callbacks

Bootstrapper inserttags

Form templates

  • Naming convention for custom form field templates is defined as: bootstrapper_form_[type]_[name of your form field].html5 e.g. "bootstrapper_form_upload_myfiles.html"