Introducing bootstrap components into the wiki text is the main goal of this extension. Depending on your configuration, none, some, or all of the following components are available to be used inside the wiki text:
- Accordion
- Alert
- Badge
- Button
- Carousel
- Collapse
- Icon
- Jumbotron
- Label
- Modal
- Panel
- Popover
- Tooltip
- Well
Just add the appropriate code inside your wiki text. If your wiki is not configured to use this specific component, you will see the code on the resulting page. If it is whitelisted you will see either the component or a feedback message on your wiki page.
An accordion groups collapsible panels together to a single unit in a way, that opening one panel closes all others.
Note that panels inside an accordion are collapsible by default. You do not have to set that attribute.
See also:
<bootstrap_accordion [..]>
<bootstrap_panel [..]>Content text for the first panel</bootstrap_panel>
<bootstrap_panel [..]>Content text for the second panel</bootstrap_panel>
<bootstrap_panel [..]>Content text for the third panel</bootstrap_panel>
</bootstrap_accordion>The following attributes can be used inside the tag:
- class
- Adds this string to the class attribute of the component. If you want to add multiple classes, separate them by a space.
- id
- Sets the id of the component to this value. See to it, that it is unique.
- style
- Adds this string to the style attribute of the component. If you want to add multiple css styles, separate them by a semicolon.
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
See also:
<bootstrap_alert [..]>Message text</bootstrap_alert>The following attributes can be used inside the tag:
- class
- Adds this string to the class attribute of the component. If you want to add multiple classes, separate them by a space.
- color
- Sets the color for this component.
Allowed Values are
- default
- primary
- success
- info
- warning
- danger
- dismissible
- If present or set to any value, the alert will get a dismiss-button.
If you set dismissible to fade, the alert will fade out when dismissed.
You can also set this attribute to any no value, in which case it is ignored (?).
- id
- Sets the id of the component to this value. See to it, that it is unique.
- style
- Adds this string to the style attribute of the component. If you want to add multiple css styles, separate them by a semicolon.
- https://www.w3schools.com/bootstrap/bootstrap_alerts.asp
- https://getbootstrap.com/docs/3.3/components/#alerts
Easily highlight new or unread items by adding a badge component to them. They can be best utilized with a numerical text, but any string will do fine.
See also:
{{#bootstrap_badge: text | .. }}The following attributes can be used inside the parser function:
- class
- Adds this string to the class attribute of the component. If you want to add multiple classes, separate them by a space.
- id
- Sets the id of the component to this value. See to it, that it is unique.
- style
- Adds this string to the style attribute of the component. If you want to add multiple css styles, separate them by a semicolon.
- https://www.w3schools.com/bootstrap/bootstrap_badges_labels.asp
- https://getbootstrap.com/docs/3.3/components/#badges
Bootstrap provides different styles of buttons that can link to any target.
{{#bootstrap_button: target | .. }}The following attributes can be used inside the parser function:
- active
- Having this attribute simply present or set to a non-[_no value_](#no-values)
makes a button appear pressed.
You can also set this attribute to any no value, in which case it is ignored (?).
- class
- Adds this string to the class attribute of the component. If you want to add multiple classes, separate them by a space.
- color
- Sets the color for this component.
Allowed Values are
- default
- primary
- success
- info
- warning
- danger
- disabled
- Having this attribute simply present or set to a non-[_no value_](#no-values)
disables the button.
You can also set this attribute to any no value, in which case it is ignored (?).
- id
- Sets the id of the component to this value. See to it, that it is unique.
- size
- You can choose a size for your button. Possible options are:
- xs
- sm
- md (default)
- lg
- style
- Adds this string to the style attribute of the component. If you want to add multiple css styles, separate them by a semicolon.
- text
- This text will be displayed on the button. If omitted, the target is
used.
If you supply an image tag, it is stripped of any link tags and then be used inside the button. Best use a transparent image or match image background with button color.
The Carousel component is for cycling through elements, like a carousel (slide show).
{{#bootstrap_carousel: [[File:Image1|..]] | [[File:Image2|..]] | .. }}The following attributes can be used inside the parser function:
- class
- Adds this string to the class attribute of the component. If you want to add multiple classes, separate them by a space.
- id
- Sets the id of the component to this value. See to it, that it is unique.
- style
- Adds this string to the style attribute of the component. If you want to add multiple css styles, separate them by a semicolon.
If you want to add the same image more than once, you have to "fake" different attributes, otherwise the parser will drop all but one:
{{#bootstrap_carousel: [[File:Image1]] | 1=[[File:Image1]] | 2=[[File:Image1]] | 3=[[File:Image1]] }}Collapses are useful when you want to hide and show large amount of content.
See also:
- Accordions consist of multiple collapsible elements
- A panel can also be collapsible.
- Modals can also be used to hide and show content.
<bootstrap_collapse text="Collapse button text|[[File:TriggerImage.png|..]" [..]>Text inside the collapse</bootstrap_collapse>This uses all the allowed attributes of the button and they will be used in the same manner. Exceptions follow:
- text
- This is a mandatory field.
If you supply text, a button will be generated and used as the trigger for the collapse.
If you supply an image tag, it is stripped of any link tags and then be used as the trigger element. In this case, all but the attributes class, style, and id will be ignored.
Insert the glyph-icon identified by the icon name you provided. See online for a list of available names.
The name is the string after the "glyphicon glyphicon-"-part. See example.
{{#bootstrap_icon: icon-name}}
<!-- inserting an asterisk -->
{{#bootstrap_icon: asterisk}}None.
- https://www.w3schools.com/bootstrap/bootstrap_glyphicons.asp
- https://getbootstrap.com/docs/3.3/components/#glyphicons
A jumbotron indicates a big box for calling extra attention to some special content or information.
A jumbotron is displayed as a grey box with rounded corners. It also enlarges the font sizes of the text inside it.
See also:
<bootstrap_jumbotron [..]>Content of the jumbotron</bootstrap_jumbotron>The following attributes can be used inside the tag:
- class
- Adds this string to the class attribute of the component. If you want to add multiple classes, separate them by a space.
- id
- Sets the id of the component to this value. See to it, that it is unique.
- style
- Adds this string to the style attribute of the component. If you want to add multiple css styles, separate them by a semicolon.
- https://www.w3schools.com/bootstrap/bootstrap_jumbotron_header.asp
- https://getbootstrap.com/docs/3.3/components/#jumbotron
Labels are used to provide additional information about something.
See also:
{{#bootstrap_label: label text | .. }}The following attributes can be used inside the parser function:
- class
- Adds this string to the class attribute of the component. If you want to add multiple classes, separate them by a space.
- color
- Sets the color for this component.
Allowed Values are
- default
- primary
- success
- info
- warning
- danger
- id
- Sets the id of the component to this value. See to it, that it is unique.
- style
- Adds this string to the style attribute of the component. If you want to add multiple css styles, separate them by a semicolon.
- https://www.w3schools.com/bootstrap/bootstrap_badges_labels.asp
- https://getbootstrap.com/docs/3.3/components/#labels
The Modal component is a dialog box/popup window that is displayed on top of the current page. Note that it is not 100% compatible with the vector skin. You might be able to notice a slight "wobble" when activating the modal.
See also:
- Accordions consist of multiple collapsible elements
- Jumbotron can also be used to emphasize content
- Panels or collapses are another way to show/hide content.
<bootstrap_modal text="" [..]>Content of the modal</bootstrap_modal>The following attributes can be used inside the tag:
- class
- Adds this string to the class attribute of the component. If you want to add multiple classes, separate them by a space.
- color
- Sets the color for this component.
Allowed Values are
- default
- primary
- success
- info
- warning
- danger
- footer
- All you supply here will be inserted into the footer area of the modal.
- heading
- All you supply here will be inserted into the header area of the modal.
- id
- Sets the id of the component to this value. See to it, that it is unique.
- size
- You can choose a size for your modal. Possible options are:
- sm
- md (default)
- lg
- style
- Adds this string to the style attribute of the component. If you want to add multiple css styles, separate them by a semicolon.
- text
- This is a mandatory field.
If you supply text, a button will be generated and used as the trigger for the collapse.
If you supply an image tag, it is stripped of any link tags and then be used as the trigger element.
A panel in bootstrap is a bordered box with some padding around its content.
See also:
<bootstrap_panel [..]>Content text for the panel</bootstrap_panel>The following attributes can be used inside the tag:
- active
- When uses inside an [accordion](#accordion), having this attribute
simply present or set to a non-[_no value_](#no-values) expands this
panel.
You can also set this attribute to any no value, in which case it is ignored (?).
- class
- Adds this string to the class attribute of the component. If you want to add multiple classes, separate them by a space.
- collapsible
- Even when not inside an accordion, a panel can be made collapsible. Simply
having this attribute present or set to a non-[_no value_](#no-values)
accomplishes this.
You can also set this attribute to any no value, in which case it is ignored (?).
- color
- Sets the color for this component.
Allowed Values are
- default
- primary
- success
- info
- warning
- danger
- footer
- All you supply here will be inserted into the footer area of the panel.
- heading
- All you supply here will be inserted into the header area of the panel.
- id
- Sets the id of the component to this value. See to it, that it is unique.
- style
- Adds this string to the style attribute of the component. If you want to add multiple css styles, separate them by a semicolon.
- https://www.w3schools.com/bootstrap/bootstrap_panels.asp
- https://getbootstrap.com/docs/3.3/components/#panels
The Popover component is similar to tooltips or collapses; it is a pop-up box that appears when the user clicks on an element. The difference to tooltip is that the popover can contain much more content.
See also:
<bootstrap_popover text="" heading="" [..]>Content for the pop up</bootstrap_popover>The following attributes can be used inside the tag:
- class
- Adds this string to the class attribute of the component. If you want to add multiple classes, separate them by a space.
- color
- Sets the color for this component.
Allowed Values are
- default
- primary
- success
- info
- warning
- danger
- heading
- This is a mandatory field.
This will be inserted into the header area of the popover.
- id
- Sets the id of the component to this value. See to it, that it is unique.
- placement
- By default, the popover will appear on the right side of the trigger
element. With this, you can place it somewhere else:
- top
- left
- bottom
- right (default)
- size
- You can choose a size for your trigger button. Possible options are:
- xs
- sm
- md (default)
- lg
- style
- Adds this string to the style attribute of the component. If you want to add multiple css styles, separate them by a semicolon.
- text
- This is a mandatory field.
This will be used as the text for the popover button.
If you supply an image tag, it is stripped of any link tags and then be used inside the button. Best use a transparent image or match image background with button color.
- trigger
- By default, the popover is opened when you click on the trigger element,
and closes when you click on the element again. You can change his
behaviour with:
- default
- focus: the popup is closed, when you click somewhere outside the element.
- hover: the popover is displayed as long as the mouse pointer hovers over the trigger element.
Displays a tooltip when hovering over an element.
See also:
{{#bootstrap_tooltip: content of the tooltip | text= | .. }}The following attributes can be used inside the parser function:
- class
- Adds this string to the class attribute of the component. If you want to add multiple classes, separate them by a space.
- id
- Sets the id of the component to this value. See to it, that it is unique.
- placement
- By default, the popover will appear on top of the element. With this,
you can place it somewhere else:
- top (default)
- left
- bottom
- right
- style
- Adds this string to the style attribute of the component. If you want to add multiple css styles, separate them by a semicolon.
- text
- This is a mandatory field.
This will be used as the element, the tooltip will be displayed for.
Tooltips are marked with a dotted underline. If you want to disable this, add the
following to your Mediawiki:Common.css:
.bootstrap-tooltip {
border-bottom: none;
}The well component adds a rounded border around content with a gray background color and some padding.
See also:
<bootstrap_well [..]>Message text</bootstrap_well>The following attributes can be used inside the tag:
- class
- Adds this string to the class attribute of the component. If you want to add multiple classes, separate them by a space.
- id
- Sets the id of the component to this value. See to it, that it is unique.
- size
- You can choose a size for your well. Possible options are:
- sm
- md (default)
- lg
- style
- Adds this string to the style attribute of the component. If you want to add multiple css styles, separate them by a semicolon.
- https://www.w3schools.com/bootstrap/bootstrap_wells.asp
- https://getbootstrap.com/docs/3.3/components/#wells
A no value is any of the following (case sensitive):
- no
- 0
- false
- off
- disabled
- ignored
- whatever means "no" in your content language
The problem with the "just be present and I'll react to you" attributes is, that you cant disable them, once you put them in. In other words, if you want to make a panel collapsible depending on the result of another parser function, you now can have your parser function return a no value.
<!-- this does not work: -->
<bootstrap_panel {{#if:{{{1|}}}|collapsible|}}>Content text for the panel</bootstrap_panel>
<!-- this does: -->
<bootstrap_panel collapsible="{{#if:{{{1|}}}|yes|no}}">Content text for the panel</bootstrap_panel>