YII BOOTSTRAP ¶
Yii-Bootstrap is the Yii wrapper for the lovely Bootstrap UI toolkit from Twitter. It includes a theme and several widgets for template generation.
Changelog ¶
v0.2
- Update to Bootstrap v2
- New widgets according to Bootstrap additions
- Created behavior that can be attached to base Controller class
v0.1
- Initial version
Installation ¶
Match the directory structure to that of your Yii application, by uploading themes/bootstrap to /path/to/your/app/themes and protected/extensions/bootstrap-theme to ext (/path/to/your/app/protected/extensions).
After that, you will have to do the following modifications to your application's files
Add these lines to your base controller class (usually found in protected/components/Controller.php
<?php
public function init() {
$this->attachBehavior('bootstrap', new BController($this));
...
}
?>
And the following lines in the application config
<?php
return array( // this row should already exist
...
'theme'=>'bootstrap',
...
'import' => array(
...
'ext.bootstrap-theme.widgets.*',
'ext.bootstrap-theme.helpers.*',
'ext.bootstrap-theme.behaviors.*',
),
...
'modules' => array(
...
'gii' => array(
...
'generatorPaths'=>array(
'ext.bootstrap-theme.gii',
),
),
...
),
...
);
?>
Usage ¶
You can now extend the base application by overwriting the files in themes/bootstrap or add new functionality using gii. Code generators have been set up in order to make all new views look Bootstrap-themed.
Bug tracker ¶
Have a bug? Please create an issue here on GitHub!
https://github.com/tetele/Yii-Bootstrap/issues
Author ¶
Tudor Sandu
Copyright and license ¶
Copyright (c) 2011, Tudor Sandu. All rights reserved.
Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
- Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
- Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
An tip
hi,
congrats on this extension
will be great set a variable in config to indicate what folder will hold assets
how we have: theme/name/js theme/name/css and so...
i like to put all this inside a resources folder
so:
theme/name/resources/js theme/name/resources/css
Thanks
Widget BMenu
Widget code:
<?php Yii::import('zii.widgets.CMenu'); class BMenu extends CMenu { public function init() { parent::init(); $cs = Yii::app()->clientScript; $cs->registerScriptFile(Yii::app()->theme->baseUrl.'/js/bootstrap-dropdown.js', CClientScript::POS_END); } }In view:
<?php $this->widget('BMenu', array( 'items' => $this->menu, 'htmlOptions'=>array('class'=>'tabs'), 'activateParents'=>true, )); ?>Menu array:
$this->menu = array( array( 'label'=>'Irem', 'url'=>array('item'), ), array( 'label'=>'Page', 'url'=>array('#'), 'itemOptions'=>array('class'=>'dropdown', 'data-dropdown'=>'dropdown'), 'linkOptions'=>array('class'=>'dropdown-toggle'), 'submenuOptions'=>array('class'=>'dropdown-menu'), 'items'=>array( array( 'label'=>'Create', 'url'=>array('/page/create') ), array( 'label'=>'Admin', 'url'=>array('/page/admin'), ), array( 'label'=>'Trash', 'url'=>array('/page/trash') ), ), ), );Methods (getPageCaption, setPageCaption) for Controller
How about it with a behavior class to extend an controller as a part of the code libraray?
Thanks for the feedback!
@snake @gsd great suggestions, guys, thanks! I'll make sure and include them in the next version.
@volkmar sounds like a good idea upfront, but i've never worked with behaviors before. I'll have to study them a bit first. Thanks for the tip!
Bug in CGridView
Hi,
CRUD form and controller generates great but filters dont work
the spin img shows forever and results never got filter
but if you use advanced search it works!
Thanks
Re: Bug in CGridView
@sn4k3 I'll be looking into it, thanks for the bug report.
More bugs?
i think css from popovers are missing/bugged
because black border dont show for content
only title and footer line have a black border
that means content left and right have no border
also i will post my contriution on this:
Widget BTwipsy
<?php /** * BTwipsy class file * * @author Tudor Sandu <tm.sandu@gmail.com> * @link https://github.com/tetele/Yii-Bootstrap * @copyright Copyright (c) 2011, Tudor Sandu. All rights reserved. * @license http://www.opensource.org/licenses/bsd-license.php BSD * * Redistribution and use in source and binary forms, with or without modification, * are permitted provided that the following conditions are met: * - Redistributions of source code must retain the above copyright notice, this list * of conditions and the following disclaimer. * - Redistributions in binary form must reproduce the above copyright notice, this list * of conditions and the following disclaimer in the documentation and/or other materials * provided with the distribution. * * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS * OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY * AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL * DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER * IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT * OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. * */ /** * BTwipsy is a widget that provides a simple interface for adding popovers to your application * * @author Tiago Conceição * @version 0.1 * @package bootstrap * @since 0.1 */ class BTwipsy extends CWidget { /** * @var jQuery selector for element(s) */ public $selector='a[rel=twipsy]'; /** * @var apply a css fade transition to the tooltip */ public $animate = true; /** * @var delay before showing tooltip (ms) */ public $delayIn = 0; /** * @var delay before hiding tooltip (ms) */ public $delayOut = 0; /** * @var text to use when no tooltip title is present */ public $fallback = ''; /** * @var how to position the tooltip - above | below | left | right */ public $placement = 'above'; /** * @var allows html content within tooltip */ public $html = false; /** * @var use event delegation instead of individual event handlers */ public $live = false; /** * @var pixel offset of tooltip from target element */ public $offset = 0; /** * @var attribute or method for retrieving title text */ public $title = 'title'; /** * @var how tooltip is triggered - hover | focus | manual */ public $trigger = 'hover'; public function init() { Yii::app()->clientScript->registerScriptFile(Yii::app()->theme->baseUrl.'/js/bootstrap-twipsy.js', CClientScript::POS_END); } public function run() { $options = array( 'animate'=>(bool)$this->animate, 'delayIn'=>(int)$this->delayIn, 'delayOut'=>(int)$this->delayOut, 'fallback'=>$this->fallback, 'placement'=>$this->placement, 'html'=>(bool)$this->html, 'live'=>(bool)$this->live, 'offset'=>(int)$this->offset, 'title'=>$this->title, 'trigger'=>$this->trigger, ); Yii::app()->clientScript->registerScript('BTwipsy#'.$this->selector,'$("'.$this->selector.'").twipsy('.CJSON::encode($options).');',CClientScript::POS_READY); } }in view:
<a href="#" rel="twipsy" title="Hi there!">Hover me</a> $this->widget('BTwipsy', array( 'live'=>true, ) );be free to use, include, modify, what you want ;)
Widget Popover
<?php /** * BPopover class file * * @author Tudor Sandu <tm.sandu@gmail.com> * @link https://github.com/tetele/Yii-Bootstrap * @copyright Copyright (c) 2011, Tudor Sandu. All rights reserved. * @license http://www.opensource.org/licenses/bsd-license.php BSD * * Redistribution and use in source and binary forms, with or without modification, * are permitted provided that the following conditions are met: * - Redistributions of source code must retain the above copyright notice, this list * of conditions and the following disclaimer. * - Redistributions in binary form must reproduce the above copyright notice, this list * of conditions and the following disclaimer in the documentation and/or other materials * provided with the distribution. * * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS * OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY * AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL * DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER * IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT * OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. * */ /** * BPopover is a widget based on the excellent jQuery.tipsy plugin written by Jason Frame; * Twipsy is an updated version, which doesn't rely on images, uses css3 for animations, and data-attributes for title storage! * * @author Tiago Conceição * @version 0.1 * @package bootstrap * @since 0.1 */ class BPopover extends BTwipsy { /** * @var jQuery selector for element(s) */ public $selector='a[rel=popover]'; /** * @var how to position the tooltip - above | below | left | right */ public $placement = 'right'; /** * @var attribute or method for retrieving content text */ public $content = 'data-content'; /** * @var how tooltip is triggered - hover | focus | manual */ public $trigger = 'hover'; public function init() { parent::init(); Yii::app()->clientScript->registerScriptFile(Yii::app()->theme->baseUrl.'/js/bootstrap-popover.js', CClientScript::POS_END); } public function run() { $options = array( 'animate'=>(bool)$this->animate, 'delayIn'=>(int)$this->delayIn, 'delayOut'=>(int)$this->delayOut, 'fallback'=>$this->fallback, 'placement'=>$this->placement, 'html'=>(bool)$this->html, 'live'=>(bool)$this->live, 'offset'=>(int)$this->offset, 'title'=>$this->title, 'content'=>$this->content, 'trigger'=>$this->trigger, ); Yii::app()->clientScript->registerScript('BPopover#'.$this->selector,'$("'.$this->selector.'").popover('.CJSON::encode($options).');',CClientScript::POS_READY); } }in view:
$this->widget('BPopover', array( 'selector'=>'.popovers', 'html'=>true, 'placement'=>'below', ) );be free to use, include, modify, what you want ;)
Found popover bug!
Hi again,
error is simple
bootstrap.css and application.css
have a redefenition of .content
application use it for main content
and bootstraps for .popover .content
how to fix: i have rename my html and css to .maincontent under application.css
bug: margin: 0 -20px; / negative indent the amount of the padding to maintain the grid system /
its a twitter bootstraps bug because they use that in thier demos...
Wow, thanks!
I'll implement these in v0.2. Just so you know, you can fork the code from github anytime you want and edit it, then send back a pull request.
Git
yes, i know i can, but my skill with git is none, never tried...
also there are some form components missing, like checkboxList and radoButtonList
New version
new version v1.4 from twitter released
please update
nice
very nice :)
v0.2 out
I forgot to mention it here in the comments as well. v0.2 is out, with upgrade to Bootstrap 2 and more widgets. Also installation process is simpler.
better, but..
Hi
It's incredible better solution than "bootrap" ext (http://www.yiiframework.com/extension/bootstrap) where ewerything is a widget... I don't know why...
But i have some problem, when I load standard web application, i have some errors: "Declaration of BHtml::linkButton() should be compatible with that of CHtml::linkButton()"
etc.
Do you know how to solve this problem?
Regards
Standard app bugs
@ykee
Let me get this straight... you followed the steps provided in the installation section and you get that error message?
What version of Yii are you using? Have you by any change modified the core files of the framework?
Also, if possible, please use this form to submit individual bug reports. Keeping track of bugs here, in the comments, is not that easy. Thank you for your understanding!
have a bug when php-5.4.5
http://boot2.dev2.bigxu.com/index.php?r=site/contact
known issue
@bigxu it's an open issue I will fix in future versions. Thanks!
bug?
A button that has an icon but no label (text), has a smaller size than those that have a label. Is this a bug? I'd like to have an "accept" button with label text, and another one to "cancel" but with just an icon and no label text, but the size is different unless I add text to the icon-only button... any ideas? thank you.
white line
When a button doesn't have a label text, but has an icon, there is an horizontal white line that appears when you hover the mouse over the button. This happens on Firefox but not in Google Chrome. Please see the screenshot:
http://i.imgur.com/DSHU7.png
Can this be fixed? thank you!
Popovers issue on IE9 and older
Just a small notice, for those, who hasn't get to know this yet (I was surprised): Popovers doesn't work under Internet Explorer 9 and earlier.
Tested them to work like a charm under newest FF and Chrome, but no luck under IE.
Events examples please
I tried to search over the internet, but still did not find any example of how to use 'events' to trigger tabs change on mouseover instead of default 'on click'.
Here my code :
$this->widget('bootstrap.widgets.TbTabs', array( 'type'=>'tabs', 'placement'=>'left', // 'above', 'right', 'below' or 'left'б 'events'=>array('mouseover'=>'tab'),//? 'tab' is incorrect but i do not know what to put instead 'tabs'=> $array(array(),array()) ) );Can anyone provide an example please. Thank you in advance
Events examples please
I tried to search over the internet, but still did not find any example of how to use 'events' to trigger tabs change on mouseover instead of default 'on click'.
Here my code :
$this->widget('bootstrap.widgets.TbTabs', array( 'type'=>'tabs', 'placement'=>'left', // 'above', 'right', 'below' or 'left'б 'events'=>array('mouseover'=>'tab'),//? 'tab' is incorrect but i do not know what to put instead 'tabs'=> $array(array(),array()) ) );Can anyone provide an example please. Thank you in advance
If you have any questions, please ask in the forum instead.
Signup or Login in order to comment.