PluginWfBootstrap
Render Bootstrap widgets. Bootstrap v3.3.5 (http://getbootstrap.com).
widget_alert
Widget setup
type: widget
data:
plugin: wf/bootstrap
method: alert
Using Bootstrap Alert box. Use one of success, info, warning or danger for your purpose. Modify by using data/rewrite values.
Default yml.
YML
type: div
attribute:
class: 'alert alert-success'
role: alert
innerHTML:
Change alert-success to one of alert-info, alert-warning, alert-danger.
YML
type: widget
data:
plugin: 'wf/bootstrap'
method: alert
data:
rewrite:
'innerHTML': Hello
'attribute/class': 'alert alert-success'
widget_listgroup
Widget setup
type: widget
data:
plugin: wf/bootstrap
method: listgroup
Listgroup.
YML
type: widget
data:
plugin: 'wf/bootstrap'
method: listgroup
data:
item:
-
href: '#'
target: _blank
innerHTML: 'One'
-
href: '#'
innerHTML: 'Two'
active: true
onclick: "console.log('Onclick on a listgroup item.');"
widget_menu
Widget setup
type: widget
data:
plugin: wf/bootstrap
method: menu
Creating a Bootstrap menu.
Data example:
YML
brand:
lable: 'Webforms'
href: '/'
navbar:
-
item:
-
sortorder: 1
lable: Contact
href: /contact
-
sortorder: 1
lable: About
href: /about
-
class: 'navbar-right'
item:
-
lable: Facebook
item:
-
lable: Sign in
href: /facebook/signin
settings:
role:
item:
- unknown
-
lable: Sign in (auto)
href: /facebook/signin?auto=1
settings:
role:
item:
- unknown
-
lable: Sign out
href: /facebook/signout
settings:
role:
item:
- client
-
lable: Sign out (auto)
href: /facebook/signout?auto=1
settings:
role:
item:
- client
-
lable: Accont
href: /auth/form
item:
-
lable: Sign in
href: /auth/form
settings:
role:
item:
- unknown
-
lable: Sign out
href: /auth/signout
settings:
role:
item:
- client
-
lable: My details
href: /auth/details
settings:
role:
item:
- client
-
lable: Register
href: /auth/register
settings:
role:
item:
- unknown
-
lable: Forgott password
href: /auth/password
settings:
role:
item:
- unknown
-
lable: Editor
href: /editor/desktop
settings:
role:
item:
- webmaster
-
class: 'navbar-right'
element:
type: p
attribute:
class: 'navbar-text'
innerHTML: 'globals:_SESSION/username'
rewrite:
'menu/innerHTML/nav/innerHTML/container/innerHTML/header/innerHTML/brand':
type: a
attribute:
class: navbar-brand
href: #
innerHTML: 'Rewrite brand...'
Default element:
YML
menu:
type: div
attribute:
class: container
stylezzz: 'margin-top:20px'
innerHTML:
nav:
type: nav
attribute:
class: 'navbar navbar-default'
innerHTML:
container:
type: div
attribute:
class: container-fluid
innerHTML:
header:
type: div
attribute:
class: 'navbar-header'
innerHTML:
button:
type: button
attribute:
type: button
class: 'navbar-toggle collapsed'
data-toggle: collapse
data-target: '#_new_id_will_be_set_'
aria-expanded: 'false'
innerHTML:
-
type: span
attribute:
class: sr-only
innerHTML: Toggle navigation
-
type: span
attribute:
class: icon-bar
innerHTML:
-
type: span
attribute:
class: icon-bar
innerHTML:
-
type: span
attribute:
class: icon-bar
innerHTML:
brand:
type: a
attribute:
class: navbar-brand
href: #
innerHTML: IT
content:
type: div
attribute:
class: 'collapse navbar-collapse'
id: _new_id_will_be_set_
innerHTML:
item:
type: ul
attribute:
class: nav navbar-nav
innerHTML:
-
type: li
attribute:
class: active
innerHTML:
-
type: a
attribute:
href: #
innerHTML: 'Link <span class="sr-only">(current)</span>'
-
type: li
innerHTML:
-
type: a
attribute:
href: #
innerHTML: Link
getActive
widget_carousel
Widget setup
type: widget
data:
plugin: wf/bootstrap
method: carousel
Bootstrap Carousel
http://www.w3schools.com/bootstrap/bootstrap_carousel.asp
widget_carousel2
Widget setup
type: widget
data:
plugin: wf/bootstrap
method: carousel2
Carousel for sliding divs with images or other type content.
http://www.w3schools.com/bootstrap/bootstrap_carousel.asp
Widget settings.
YML
type: widget
data:
plugin: 'wf/bootstrap'
method: carousel2
data: 'yml:/theme/wf/buto/data/bootstrap_carousel.yml'
Example of data. content is any type of elements.
YML
id: my_first_bootstrap_carousel
content:
-
-
type: img
attribute:
src: '/theme/wf/hellocompany/carousel/tie-690084_1280.jpg'
alt: Chania1
-
type: div
attribute:
class: 'carousel-caption'
innerHTML:
-
type: h3
innerHTML: Solution
-
type: p
innerHTML: 'It´s not my solution - it´s yours.'
-
-
type: img
attribute:
src: '/theme/wf/hellocompany/carousel/businessman-840623_1920.jpg'
alt: Chania2
-
type: div
attribute:
class: 'carousel-caption'
innerHTML:
-
type: h3
innerHTML: Web
-
type: p
innerHTML: 'It´s a start not the end.'
-
-
type: img
attribute:
src: '/theme/wf/hellocompany/carousel/office-336368_1920.jpg'
alt: Flower1
-
type: div
attribute:
class: 'carousel-caption'
innerHTML:
-
type: h3
innerHTML: Information
-
type: p
innerHTML: 'Keep it simple. Very.'
-
-
type: img
attribute:
src: '/theme/wf/hellocompany/carousel/security-265130_1920.jpg'
alt: Flower2
-
type: div
attribute:
class: 'carousel-caption'
innerHTML:
-
type: h3
innerHTML: Security
-
type: p
innerHTML: 'Fast is not always good.'
Default data where carousel/innerHTML/ol/innerHTML and carousel/innerHTML/div/innerHTML should will be override by content.
YML
style:
type: style
settings:
disabled: false
innerHTML: '#_id_ .carousel-control{ opacity: 1; width: 0%; }'
carousel:
type: div
attribute:
id: _id_
class: 'carousel slide'
data-ride: carousel
innerHTML:
ol:
type: ol
attribute:
class: 'carousel-indicators'
innerHTML:
-
type: li
attribute:
data-target: '#_id_'
data-slide-to: '0'
class: active
-
type: li
attribute:
data-target: '#_id_'
data-slide-to: '1'
innerHTML: ''
-
type: li
attribute:
data-target: '#_id_'
data-slide-to: '2'
innerHTML: ''
-
type: li
attribute:
data-target: '#_id_'
data-slide-to: '3'
innerHTML: ''
div:
type: div
attribute:
class: 'carousel-inner'
role: listbox
innerHTML:
-
type: div
attribute:
class: 'item active'
innerHTML:
-
type: img
attribute:
src: '/plugin/twitter/bootstrap335v/carousel/jetty-768581_1920.jpg'
alt: Chania1
-
type: div
attribute:
class: 'carousel-caption'
innerHTML:
-
type: h3
innerHTML: Flowers
-
type: p
innerHTML: 'Beatiful flowers in Kolymbari, Crete.'
-
type: div
attribute:
class: 'item'
innerHTML:
-
type: img
attribute:
src: '/plugin/twitter/bootstrap335v/carousel/jetty-598198_1920.jpg'
alt: Chania2
-
type: div
attribute:
class: 'item'
innerHTML:
-
type: img
attribute:
src: '/plugin/twitter/bootstrap335v/carousel/ammersee-490462_1920.jpg'
alt: Flower1
-
type: div
attribute:
class: 'carousel-caption'
innerHTML:
-
type: h3
innerHTML: Other height
-
type: p
innerHTML: '1 920px × 1 200px'
-
type: div
attribute:
class: 'item'
innerHTML:
-
type: img
attribute:
src: '/plugin/twitter/bootstrap335v/carousel/ammersee-882067_1920.jpg'
alt: Flower2
a_left:
type: a
attribute:
class: 'left carousel-control'
href: '#_id_'
role: button
data-slide: prev
innerHTML:
-
type: span
attribute:
class: 'glyphicon glyphicon-chevron-left'
aria-hidden: 'true'
innerHTML: ''
-
type: span
attribute:
class: 'sr-only'
innerHTML: Previous
a_right:
type: a
attribute:
class: 'right carousel-control'
href: '#_id_'
role: button
data-slide: next
innerHTML:
-
type: span
attribute:
class: 'glyphicon glyphicon-chevron-right'
aria-hidden: 'true'
innerHTML: ''
-
type: span
attribute:
class: 'sr-only'
innerHTML: Next
widget_carouselimgh3p
Widget setup
type: widget
data:
plugin: wf/bootstrap
method: carouselimgh3p
Carousel with img, h3 and p element.
Registration to call widget.
YML
type: widget
data:
plugin: 'wf/bootstrap'
method: carouselimgh3p
data: 'yml:/theme/wf/buto/_data/bootstrap_carousel.yml'
Data. Use img_dir to run images registrated via form. Or use the img tag for each item.
YML
id: theme_carousel
img_dir: '/theme/wf/buto/img/carousel/[key].jpg'
content:
10:
imgzzz: /theme/wf/hellocompany/carousel/tie-690084_1280.jpg
lable: Solutionss
text: 'It´s not my solution - it´s yours.'
20:
imgzzz: /theme/wf/hellocompany/carousel/businessman-840623_1920.jpg
lable: Web
text: 'It´s a start not the end.'
30:
imgzzz: /theme/wf/hellocompany/carousel/office-336368_1920.jpg
lable: Information
text: 'Keep it simple. Very.'
40:
imgzzz: /theme/wf/hellocompany/carousel/security-265130_1920.jpg
lable: Security
text: 'Fast is not always good.'
Form yml.
YML
name: 'Carousel'
file: /theme/wf/buto/_data/bootstrap_carousel.yml
key: content
multiple_items: true
form:
data:
items:
lable:
type: varchar
lable: Headline
mandatory: true
text:
type: text
lable: Text
mandatory: true
list:
order_byzzz:
-
name: date
desc: true
item:
lable: Headline
text: Text
files:
carousel_img:
file_type: 'image/jpeg'
type: jpg
lable: Image
dir: '[web_dir]/theme/wf/buto/img/carousel'
name: '[key].jpg'
widget_thumbnail
Widget setup
type: widget
data:
plugin: wf/bootstrap
method: thumbnail
Default yml.
YML
col:
type: div
attribute:
class: 'col-sm-6 col-md-6'
innerHTML:
thumbnail:
type: div
attribute:
class: thumbnail
innerHTML:
img:
type: img
attribute:
src: _set_in_action_
div:
type: div
attribute:
class: caption
innerHTML:
h3:
type: h3
innerHTML: 'Thumbnail lable'
p1:
type: p
innerHTML: '...'
p2:
type: p
innerHTML:
a:
type: a
attribute:
href: #
class: 'btn btn-default'
role: button
innerHTML: 'Button'
rewrite
This function is depricated. Use wfSettings::rewrite instead.
widget_jumbotron
Widget setup
type: widget
data:
plugin: wf/bootstrap
method: jumbotron
Default yml.
YML
jumbotron:
type: div
attribute:
class: jumbotron
innerHTML:
h1:
type: h1
innerHTML: 'Hello, world!'
p1:
type: p
innerHTML: '...'
p2:
type: p
innerHTML:
a:
type: a
attribute:
class: 'btn btn-primary btn-lg'
href: #
role: button
innerHTML: 'Learn more'
Example of usage.
YML
type: widget
data:
plugin: 'wf/bootstrap'
method: 'jumbotron'
data:
rewrite:
'jumbotron/innerHTML/h1/innerHTML': 'About'
'jumbotron/innerHTML/p1/innerHTML': 'Who are we?'
'jumbotron/innerHTML/p2/innerHTML/a/attribute/href': '/about'
Dependencies
This plugin has no dependencies.
Usage
This plugin are not in use of other plugins.
Request a plugin
If you need a plugin to your website, one could make a request to a developer.