A simple jQuery plugin that draws grid columns to a twitter bootstrap enabled layout.
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Latest commit c5502de Aug 20, 2014
Permalink
Failed to load latest commit information.
src Update jqdrawbsgrid.js Feb 19, 2014
README.md Update README.md Aug 20, 2014

README.md

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.