Twitter Bootstrap Plugin

The Twitter bootstrap plugin is a designed for use with PyroCMS.

It adds a selection of tags to make content styling easy from within the WYSIWYG.

It requires the inclusion of Jquery, and the Twitter bootstrap CSS and JS files.

View on GitHub

The plugin can also be loaded right into CKEditor, to do this copy the bootstrap-ckeditor.js file to the javascript folder in your theme or module, then edit the CKEditor config in PyroCMS Settings:

 // get path of directory ckeditor
   var basePath = CKEDITOR.basePath;
   basePath = basePath.substr(0, basePath.indexOf("ckeditor/"));
   (function() {
      CKEDITOR.plugins.addExternal('bootstrap',basePath+'../../../../../addons/shared_addons/themes/MY_THEME/js/', 'bootstrap-ckeditor.js');
   })();

This assumes you have copied the bootstrap-ckeditor.js file to your themes js folder. You need to change MY_THEME to the name of your theme.

Then you need to add bootstrap as an extra plugin edit the line

extraPlugins: 'pyroimages,pyrofiles',
to read
extraPlugins: 'pyroimages,pyrofiles,bootstrap',

Next add bootstrap to a toolbar by editing the line

['ShowBlocks', 'RemoveFormat', 'Source'']
to read
['ShowBlocks', 'RemoveFormat', 'Source', 'bootstrap']

Finally if you are using PyroCMS version 2.2 or newer you need to edit

protectedSource: /{{(\s)?.[^}]+(\s)?}}/g

to read:

protectedSource: /(?!({{\s?bootstrap:(.*)\s?}}))(?!({{\s?\/bootstrap:(.*)\s?}})){{(\s)?.[^}]+(\s)?}}/g

bootstrap.png

Alert View Twitter bootstrap docs

Wrap any text for a basic warning alert message with dismiss button.
Warning
Danger
Success
Info
{{ bootstrap:alert style="" }} My Content {{ /bootstrap:alert }}
Optionally add a class or id.
Possible styles: warning, danger, success, info

Align View Twitter bootstrap docs

Float an element left or right.
I'm aligned left
I'm aligned right
{{ bootstrap:align position="" }} My Content {{ /bootstrap:align }}
Optionally add a class or id.

Badge View Twitter bootstrap docs

No style Success Warning Important Info Inverse
{{ bootstrap:badge style="" }} My Content {{ /bootstrap:badge }}
Optionally add a class or id.
Possible styles: success, warning, important, info, inverse

Carousel View Twitter bootstrap docs

This plugin requires the PyroCMS galleries module to be installed
The slideshow below shows a generic plugin and component for cycling through elements like a carousel.
{{ bootstrap:carousel slug="Gallery Slug" }}
Optionally add a class for the containing div.

Collapse View Twitter bootstrap docs

Get base styles and flexible support for collapsible components, this is a simplified version of the twitter bootstrap collapse plugin designed for single elements of expanding content.
Collapsible box contents
And a bit more text for padding
{{ bootstrap:collapse title="My Title" }} My Content  {{ /bootstrap:collapse }}
Optionally add a class and id for the button.

Jumbotron View Twitter bootstrap docs

A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.

My Header

My Content

{{ bootstrap:jumbotron }} My Content  {{ /bootstrap:jumbotron }}
Optionally add a class and id.

Label View Twitter bootstrap docs

Default Success Warning Danger Info Primary
{{ bootstrap:label style="" }} My Content {{ /bootstrap:label }}
Optionally add a class or id.
Possible styles: default, success, warning, danger, info, primary

Lead View Twitter bootstrap docs

Make a paragraph stand out.

My Content

{{ bootstrap:lead }} My Content  {{ /bootstrap:lead }}
Optionally add a class and id.

Row and Span View Twitter bootstrap docs

Begin by adding a row then add as many spans as you require.
1
1
1
1
1
1
1
1
2
6
{{ bootstrap:row }} {{ bootstrap:col lg_size="" }} My Content  {{ /bootstrap:col }}
{{ /bootstrap:row }}
Optionally add a class and id.

Togglable tabs View Twitter bootstrap docs

Add quick, dynamic tab functionality to transition through panes of local content.
Tab one contents goes here
Tab two contents goes here
Tab three contents goes here
{{ bootstrap:tabheaderwrap }}
    {{ bootstrap:tabheader title="Tab One" active="true" }}
    {{ bootstrap:tabheader title="Tab Two" }}
    {{ bootstrap:tabheader title="Tab Three" }}
{{ /bootstrap:tabheaderwrap }}

{{ bootstrap:tabcontentwrap }}
    {{ bootstrap:tabcontent title="Tab One" active="true" }}
        Tab one contents goes here
    {{ /bootstrap:tabcontent }}
    {{ bootstrap:tabcontent title="Tab Two" }}
        Tab two contents goes here
    {{ /bootstrap:tabcontent }}
    {{ bootstrap:tabcontent title="Tab Three" }}
        Tab three contents goes here
    {{ /bootstrap:tabcontent  }}
{{ /bootstrap:tabcontentwrap  }}
Optionally add a class or id on any tag.

Well View Twitter bootstrap docs

Use the well as a simple effect on an element to give it an inset effect.
My Content
{{ bootstrap:well }} My Content  {{ /bootstrap:well }}
Optionally add a class and id.