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-select] (https://github.com/silviomoreto/bootstrap-select) : styled select input with live-search, groups and mobile support - boostrap.js is required, Extassets\ExtJs group with added bootstrapper.js should be added to tl_layout
[bootstrap-flatpickr] (https://github.com/chmln/flatpickr) : styled datepicker with time and datepicker inclduing native support on mobile devices
[bootstrap-slider] (https://github.com/seiyria/bootstrap-slider) : input slider with ranged slider support
[bootstrap-tooltips] (http://getbootstrap.com/javascript/#tooltips) : auto-initialize default bootstrap tooltips [data-toggle="tooltip"] - boostrap.js is required, Extassets\ExtJs group with added bootstrapper.js should be added to tl_layout
scroll-smooth : Scroll smooth to anchor targets

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"

heimrichhannot / contao-bootstrapper

Maintainers

Details