Visual Design Grid For Bootstrap 4 And 3 - jQuery.vbgp.js
File Size: | 20.1 KB |
---|---|
Views Total: | 1652 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
This is a jQuery based Bootstrap visual grid plugin that adds custom grid overlays to your Bootstrap 4 or Bootstrap grid layout for faster web development.
To activate the grid overlays, move the cursor to the upper right corner of the screen and then select the Grid, Padding Fill, Column Numbers, and Greyscale checkboxes as per your needs.
You can also activate the grid overlays using the following shortcuts:
- CTRL+;: toggles grid overlays
- CTRL+': toggles padding fill
- CTRL+[: toggles greyscale
- CTRL+]: toggles column numbers
How to use it:
1. Add the main JavaScript file jQuery.vbgp.js
to your Bootstrap page and done.
<!-- Bootstrap 4 & jQuery --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <!-- jQuery.vbgp.js --> <script src="jQuery.vbgp.js"></script>
2. Specify the number of columns in 19 of the JavaScript file.
var numCols = 12;
3. Specify the Bootstrap version in 19 of the JavaScript file.
var bootstrapVersion = 4;
About Author:
Author: PixelSPB
Website: https://github.com/PixelSPB/jQuery-Visual-Bootstrap-grid
This awesome jQuery plugin is developed by PixelSPB. For more Advanced Usages, please check the demo page or visit the official website.