heimrichhannot / contao-bootstrapper
调整contao元素和标记,以充分利用twitter bootstrap。
3.2.8-beta3
2020-09-23 11:21 UTC
Requires
- php: ~5.4 || ~7.0
- contao-community-alliance/composer-plugin: ~2.4 || ~3.0
- contao/core-bundle: ^3.5.1 || ~4.1
- heimrichhannot-contao-components/fastclick: ^1.0
- heimrichhannot-contao-components/flatpickr: ^1.0
- heimrichhannot-contao-components/modernizr: ^1.0
- heimrichhannot/bootstrap: ^4.0.0
- heimrichhannot/bootstrap-select: ^1.12.3
- heimrichhannot/contao-components: ^2.0
- heimrichhannot/contao-haste_plus: >=1.4.0
- heimrichhannot/contao-multi_column_editor: ^1.4
- heimrichhannot/elegant-icons: ^1.1
- heimrichhannot/font-awesome: >=4.4,<5-dev
- dev-master
- 3.2.8-beta3
- 3.2.8-beta2
- 3.2.8-beta
- 3.2.7-beta
- 3.2.6-beta
- 3.2.5-beta
- 3.2.4-beta
- 3.2.3-beta
- 3.2.2-beta
- 3.2.1-beta
- 3.2.0-beta
- 3.1.1-beta
- 3.1.0-beta
- 3.0.15-beta
- 3.0.14-beta
- 3.0.13-beta
- 3.0.12-beta
- 3.0.11-beta
- 3.0.10-beta
- 3.0.9-beta
- 3.0.8-beta
- 3.0.7-beta
- 3.0.6-beta
- 3.0.5-beta
- 3.0.4-beta
- 3.0.3-beta
- 3.0.2-beta
- 3.0.1-beta
- 3.0.0-beta
- v2.x-dev
- 2.1.10-alpha
- 2.1.9-alpha
- 2.1.8-alpha
- 2.1.7-alpha
- 2.1.6-alpha
- 2.1.5-alpha
- 2.1.4-alpha
- 2.1.3-alpha
- 2.1.2-alpha
- 2.1.1-alpha
- 2.1.0-alpha
- 2.0.40-alpha
- 2.0.39-alpha
- 2.0.38-alpha
- 2.0.37-alpha
- 2.0.36-alpha
- 2.0.35-alpha
- 2.0.34-alpha
- 2.0.33-alpha
- 2.0.32-alpha
- 2.0.31-alpha
- 2.0.30-alpha
- 2.0.29-alpha
- 2.0.28-alpha
- 2.0.27-alpha
- 2.0.26-alpha
- 2.0.25-alpha
- 2.0.24-alpha
- 2.0.23-alpha
- 2.0.22-alpha
- 2.0.21-alpha
- 2.0.20-alpha
- 2.0.19-alpha
- 2.0.18-alpha
- 2.0.17-alpha
- 2.0.16-alpha
- 2.0.15-alpha
- 2.0.14-alpha
- 2.0.13-alpha
- 2.0.12-alpha
- 2.0.11-alpha
- 2.0.10-alpha
- 2.0.9-alpha
- 2.0.8-alpha
- 2.0.7-alpha
- 2.0.6-alpha
- 2.0.5-alpha
- 2.0.4-alpha
- 2.0.3-alpha
- 2.0.2-alpha
- 2.0.1-alpha
- 2.0.0-alpha
- v1.x-dev
- 1.5.17
- 1.5.16
- 1.5.15
- 1.5.14
- 1.5.13
- 1.5.12
- 1.5.11
- 1.5.10
- 1.5.9
- 1.5.8
- 1.5.7
- 1.5.6
- 1.5.5
- 1.5.4
- 1.5.3
- 1.5.2
- 1.5.1
- 1.5.0
- 1.4.12
- 1.4.11
- 1.4.10
- 1.4.9
- 1.4.8
- 1.4.7
- 1.4.6
- 1.4.5
- 1.4.4
- 1.4.3
- 1.4.2
- 1.4.1
- 1.4.0
- 1.3.19
- 1.3.18
- 1.3.17
- 1.3.16
- 1.3.15
- 1.3.14
- 1.3.13
- 1.3.12
- 1.3.11
- 1.3.10
- 1.3.9
- 1.3.8
- 1.3.7
- 1.3.6
- 1.3.5
- 1.3.4
- 1.3.3
- 1.3.2
- 1.3.1
- 1.3.0
- 1.2.21
- 1.2.20
- 1.2.19
- 1.2.18
- 1.2.17
- 1.2.16
- 1.2.15
- 1.2.14
- 1.2.13
- 1.2.12
- 1.2.11
- 1.2.10
- 1.2.9
- 1.2.8
- 1.2.7
- 1.2.6
- 1.2.5
- 1.2.4
- 1.2.3
- 1.2.2
- 1.2.1
- 1.2.0
- 1.1.88
- 1.1.87
- 1.1.86
- 1.1.85
- 1.1.84
- 1.1.83
- 1.1.82
- 1.1.81
- 1.1.80
- 1.1.78
- 1.1.77
- 1.1.76
- 1.1.75
- 1.1.74
- 1.1.73
- 1.1.72
- 1.1.71
- 1.1.70
- 1.1.69
- 1.1.68
- 1.1.67
- 1.1.66
- 1.1.65
- 1.1.64
- 1.1.63
- 1.1.62
- 1.1.61
- 1.1.60
- 1.1.59
- 1.1.58
- 1.1.57
- 1.1.56
- 1.1.55
- 1.1.54
- 1.1.53
- 1.1.52
- 1.1.51
- 1.1.50
- 1.1.49
- 1.1.48
- 1.1.47
- 1.1.46
- 1.1.45
- 1.1.44
- 1.1.43
- 1.1.42
- 1.1.41
- 1.1.40
- 1.1.39
- 1.1.38
- 1.1.37
- 1.1.36
- 1.1.35
- 1.1.34
- 1.1.33
- 1.1.32
- 1.1.31
- 1.1.30
- 1.1.29
- 1.1.28
- 1.1.27
- 1.1.26
- 1.1.25
- 1.1.24
- 1.1.23
- 1.1.22
- 1.1.21
- 1.1.20
- 1.1.19
- 1.1.18
- 1.1.17
- 1.1.16
- 1.1.15
- 1.1.14
- 1.1.13
- 1.1.12
- 1.1.11
- 1.1.10
- 1.1.9
- 1.1.8
- 1.1.7
- 1.1.6
- 1.1.5
- 1.1.4
- 1.1.3
- 1.1.2
- 1.1.1
- 1.1.0
- 1.0.33
- 1.0.32
- 1.0.31
- 1.0.30
- 1.0.29
- 1.0.27
- 1.0.26
- 1.0.25
- 1.0.24
- 1.0.23
- 1.0.22
- 1.0.21
- 1.0.20
- 1.0.19
- 1.0.18
- 1.0.17
- 1.0.16
- 1.0.15
- 1.0.14
- 1.0.13
- 1.0.12
- 1.0.11
- 1.0.10
- 1.0.9
- 1.0.8
- 1.0.7
- 1.0.6
- 1.0.5
- 1.0.4
- 1.0.3
- 1.0.2
- 1.0.1
- 1.0.0
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-select] (https://github.com/silviomoreto/bootstrap-select) : 带有实时搜索、组和移动支持的样式化选择输入 - 需要boostrap.js,应将Extassets\ExtJs组中的bootstrapper.js添加到tl_layout
- [bootstrap-flatpickr] (https://github.com/chmln/flatpickr) : 带有时间和日期选择器的样式化日期选择器,包括在移动设备上的本地支持
- [bootstrap-slider] (https://github.com/seiyria/bootstrap-slider) : 支持范围滑块的输入滑块
- [bootstrap-tooltips] (https://bootstrap.ac.cn/javascript/#tooltips) : 自动初始化默认的bootstrap工具提示
[data-toggle="tooltip"]
- 需要boostrap.js,应将Extassets\ExtJs组中的bootstrapper.js添加到tl_layout - scroll-smooth : 平滑滚动到锚点目标
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"