🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A simple jQuery plugin that draws grid columns to a twitter bootstrap layout. Working better with non fluid layouts (container-fluid, row fluid).

Bootstrap Layout Plugins

Documentation

jQDrawBootstrapGrid

A simple jQuery plugin that draws grid columns to a twitter bootstrap layout. Working better with non fluid layouts (container-fluid, row fluid).

Defaults:

  • 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

Demo

The github pages feature a simple demo: http://plozi.github.com/jQDrawBootstrapGrid/example/ex.html

Screenshot

screenshot of the demo site

Requirements

  • Twitter Bootstrap

  • JQuery > 1.7.*

Usage

After adding the javascript source to your document, apply the plugin to the bootstrap ".container":

   jQuery(".container").drawBootstrapGrid(); 

Options

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     } 

Support and Contribution

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

Author

Christian Polzer

Copyright and License

The jQDrawBootstrapGrid Plugin is licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) licenses.


You May Also Like