QCubed Bootstrap Plugin
QCubed plugin to simplify the integration of Twitter Bootstrap, (*1)
Installation
1) Install both the plugin and twitter bootstrap using Composer. Execute the following on the command line from your main
install directory:, (*2)
composer require qcubed/plugin_bootstrap
composer require twbs/bootstrap
2) Next, you might want to set up some configuration settings in your configuration.inc.php file., (*3)
BOOTSTRAP_CSS
The default setting for this file is:, (*4)
define ('__BOOTSTRAP_CSS__', __VENDOR_ASSETS__. '/twbs/bootstrap/dist/css/bootstrap.min.css');
If you are compiling your own custom version of the bootstrap css file, simply set that define to point to your own version., (*5)
3) Point the base class to Bootstrap classes so that they add their functionality., (*6)
In your project/includes/controls/QControl.class.php file, have your QControl inherit from the base class. For example,
you should change the first line to:, (*7)
abstract class QControl extends QCubed\Plugin\Bootstrap\Control {
BOOTSTRAP_JS
The default mechanism included in this plugin only loads the bootstrap.js file on forms using the plugin widgets that
need it. If you are hand-coding some bootstrap forms that also need bootstrap.js, you should do both of the following to avoid
multiple bootstrap.js files being loaded:, (*8)
1) Define BOOTSTRAP_JS in your configuration.inc.php file and point it to your desired bootstrap js file as so:, (*9)
define ('__BOOTSTRAP_JS__', __VENDOR_ASSETS__ . '/twbs/bootstrap/dist/js/bootstrap.js'); (or bootstrap.min.js if you prefer)
2) Either add this file to your footer.inc.php file like this:, (*10)
<script type="text/javascript" src="<?php echo(__BOOTSTRAP_JS__); ?>"></script>
or add it to the list of auto-loaded javascript forms in your QForm.class.php file like this:, (*11)
protected function GetFormJavaScripts() {
$scripts = parent::GetFormJavaScripts();
$scripts[] = __BOOTSTRAP_JS__;
return $scripts;
}
Usage
See the examples pages for details. The main functionality includes:, (*12)
-
Using RenderFormGroup instead of RenderWithName to draw form objects in the Bootstrap way. The Bootstrap Control
class exposes a number of utility classes to add Bootstrap class to the object, the label, the wrapper, and even
some internal wrappers in special situations., (*13)
-
Specific Bootstrap type QControls to draw particular things on the screen. Examples include:, (*14)
- Carousel
- Navbar
- Menu button
- Alert
- Accordion
-
Extensions of base QCubed controls with additional Bootstrap functionality. Includes:, (*15)
- Checkbox to draw checkboxes the bootstrap way with the label wrapping the checkbox
- TextBox to add the ability to draw it as an inline-group with another object
-
Defines that give you easy access to all the various Bootstrap class names via PHP constants. Those are located
in the Bootstrap.php file., (*16)
Wallogit.com
