Orchard CMS Module for Bootstrap Elements. Adds bootstrap based elements that can be used in the layout editor UI. All elements included under the Bootstrap category in they layout editor.
In order for the included module to function properly. You must include a copy of jQuery and Bootstrap in your Orchard site. You can optionally include Font Awesome if you wish to take advantage of the icon properties of the included elements.
In order to create an accordion on your page, you must do the following:
-
First drag and drop an Accordion element from the elements list on the right hand side of the editor onto the canvas
-
Add one or more Accordion Panels inside of the accordion element. An editor will pop for each Accordion panel that will allow you to specify the panel title, panel icon, panel body, and whether or not the panel should default to expanded. By default all accordion panels are closed on page load, by selecting the checkbox for default to expanded you can specify which accordion section you want opened on page load.
Tabs create a tabbable area on a page. They are displayed as follows:
To create tabs on a page you must follow the following steps:
-
Drag a Tabs container element from the right side menu under the Bootstrap sub-section.
-
Drag two more more Tab Pane elements into the Tabs container. Ensure that you put the Tab Pane inside the Tabs container.
-
When creating or editing a Tab Pane element, you can set the title and text/content of the tab, as well as an optional tab icon. These icons are in the form of a Font Awesome framework class such as fa-gears, fa-user, fa-bell, etc. A full list of these icons can be found here Font Awesome Icons
Button popovers are buttons that display text when clicked.
You can specify the position of the popover text as Top, Bottom, Left, or Right.
A modal is a dismissable popover window that will be displayed on page load.
In order to add a modal to a page, drag a Modal item from the right hand menu under the Boostrap sub-section. Then fill in the desired parameters.
There are three modal types to select from, Info, Warning, and Alert. These types dictate that color of the modal header background. Info is standard blue, warning is yellow, and alert is red
A shadow box is a container element that is displayed as a white box with a slightly transparent background and a shadow effect.
In order to add a shadow box, drag a Shadow Box element from the right hande side under the Bootstrap subsection. Once you have added it, you can then add any other items you wish inside of it to create content that is shadow boxed.