A simple jQuery plugin that draws grid columns to a twitter bootstrap layout. Working better with non fluid layouts (container-fluid, row fluid).
- By default it automatically adds a "show/hide grid" button and a key listener on the key 'l' (a small L that is).
- The preview grid also by default starts in hidden mode
The github pages feature a simple demo: http://plozi.github.com/jQDrawBootstrapGrid/example/ex.html
-
Twitter Bootstrap
-
JQuery > 1.7.*
After adding the javascript source to your document, apply the plugin to the bootstrap ".container":
jQuery(".container").drawBootstrapGrid();
The default settings are:
{
'columns':12, //define how much columns to draw
'singleColumnName': 'span1', //the css class name which you want to add for one column
'color':'lightgrey', //each columns background color
'opacity':0.3, //opacity of the rendered grid
'buttonLabel': 'Show/Hide Grid', //the label for the button
'startHidden':true, //if we want the grid to be shown initially
'includeMargin': false, //if we include the original columns left margin
'hiddenClassName': 'hidden', //the css class name used in your bootstrap to hide elements -> visibility: hidden
'keybinding': 'l' //hide/show grid on pressing this key
}
This little project is highly encouraging YOU to work on it!
Have a question, or found an issue? Just create a issue: https://github.com/plozi/jQDrawBootstrapGrid/issues
Christian Polzer
The jQDrawBootstrapGrid Plugin is licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) licenses.