QCubed plugin to simplify the integration of Twitter Bootstrap
- Install both the plugin and twitter bootstrap using Composer. To install, add the following to the corresponding sections of your composer.json root file:
"repositories": [
{
"type": "vcs",
"url": "https://github.com/qcubed/plugin_bootstrap"
}
],
and
"require": {
"qcubed/plugin/bootstrap": "dev-master"
"twbs/bootstrap": "~3.3@dev"
},
- Next, you might want to set up some configuration settings in your configuration.inc.php file.
The default setting for this file is:
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.
- Point the base class to Bootstrap classes so that they add their functionality.
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:
abstract class QControl extends QCubed\Plugin\Bootstrap\Control {
See the examples pages for details. The main functionality includes:
-
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.
-
Specific Bootstrap type QControls to draw particular things on the screen. Examples include:
- Carousel
- Navbar
- Menu button
- Alert
- Accordion
- Extensions of base QCubed controls with additional Bootstrap functionality. Includes:
- 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.