Yii 1.1: yii-bootstrap

Yii theme, widgets and automaric code generators for the Bootstrap UI toolkit from Twitter
35 followers

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

  • http://twitter.com/tetele
  • http://github.com/tetele

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.

Total 20 comments

#16825 report it
Alex_Ros at 2014/04/01 07:10am
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

#16824 report it
Alex_Ros at 2014/04/01 07:06am
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

#12905 report it
Trejder at 2013/04/19 06:42am
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.

#10471 report it
tomsea at 2012/10/30 01:09pm
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!

#10470 report it
tomsea at 2012/10/30 12:49pm
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.

#9595 report it
tetele at 2012/08/27 06:00am
known issue

@bigxu it's an open issue I will fix in future versions. Thanks!

#9593 report it
bigxu at 2012/08/27 04:28am
have a bug when php-5.4.5

http://boot2.dev2.bigxu.com/index.php?r=site/contact

#8857 report it
tetele at 2012/07/04 09:37am
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!

#8856 report it
RainMonk at 2012/07/04 09:26am
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

#7350 report it
tetele at 2012/03/16 04:37am
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.

#7347 report it
uiexp at 2012/03/16 02:18am
nice

very nice :)

#5814 report it
sn4k3 at 2011/11/15 09:44pm
New version

new version v1.4 from twitter released

please update

#5457 report it
sn4k3 at 2011/10/13 04:50pm
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

#5437 report it
tetele at 2011/10/12 04:44am
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.

#5422 report it
sn4k3 at 2011/10/10 09:08pm
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...

#5421 report it
sn4k3 at 2011/10/10 08:33pm
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 ;)

#5420 report it
sn4k3 at 2011/10/10 08:32pm
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 ;)

#5419 report it
sn4k3 at 2011/10/10 08:30pm
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:

#5404 report it
tetele at 2011/10/10 03:42am
Re: Bug in CGridView

@sn4k3 I'll be looking into it, thanks for the bug report.

#5402 report it
sn4k3 at 2011/10/09 09:48pm
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

Leave a comment

Please to leave your comment.

Create extension