bootstrap

Yii-Bootstrap - Bringing together Yii and Bootstrap, Twitter's HTML, CSS and JavaScript toolkit

Current version 0.9.12

Bootstrap brings together Yii and Bootstrap, Twitter's HTML, CSS and JavaScript toolkit. The extension contains a wide range of Yii-widgets that allow you to easily use Bootstrap with Yii. All widgets have been developed following Yii's conventions and work seamlessly together with Bootstrap and its jQuery plugins.

Links ¶

Donate ¶

Want to say thanks for the time and efforts put on this project?

Donate with PayPal

Setup ¶

Installation instructions can be found here: Yii-Bootstrap home.

What's included? ¶

Bootstrap contains the following widgets:

BootActiveForm - Bootstrap ActiveForm
BootAlert - Flash messages
BootBadge - Bootstrap badges
BootBreadcrumbs - Breadcrumbs
BootButton - Bootstrap buttons
BootButtonGroup - Button groups
BootCarousel - Image carousel
BootDetailView - Bootstrap detail view
BootGridView - Bootstrap grid view
BootHero - Page head
BootLabel - Bootstrap labels
BootListView - Bootstrap list view
BootMenu - Menu
BootModal - Modal dialog
BootNavbar - Navigation bar
BootPager - Bootstrap pager
BootProgress - Progress bars
BootTabbable - JavaScript tabs
BootThumbnails - Media grid (e.g. photo gallery)
BootTypeahead - JavaScript autocomplete

What's next? ¶

Complete code review (looking for volunteers, contact me if you're interested)

Changes ¶

May 13, 2012 ¶

Release 0.10.0 BETA
- Major improvements to BootActiveForm and BootInput
- Changed BootGridView and BootListView to automatically rebind popovers and tooltips
- Fixed vertical form validation styles (#30)
- Fixed BootCarousel binding (#78)
- Fixed BootBreadcrumbs homeLink

Apr 25, 2012 ¶

Release 0.9.12
- Upgraded to Bootstrap 2.0.3
- Changed to use bootstrap.min.js instead of separate files
- Fixed BootModal JavaScript options
- Fixed Bootstrap Gii templates (#66)
- Added support for add-ons on password fields (#64)
- Fixed disabling of BootBreadcrumbs homeLink (#61)
- Fixed BootNavbar static positioning (#60)
- Fixed BootActiveForm textfield validation (#54)
- Fixed resolving of BootInput checkbox and radio attributes (#52)

Apr 14, 2012 ¶

Release 0.9.11
- Added BootLabel, BootBadge
- BootTabbable improvements
- BootButton, BootButtonGroup improvements
- BootNavbar, BootMenu improvements
- BootGridView, BootDetailView improvements
- Fixed BootTabbable events
- Added missing CSS for Yii components
- Renamed BootButton::fn to buttonType

Mar 13, 2012 ¶

Release 0.9.10
- Upgraded to Bootstrap 2.0.2
- Added BootHero, BootCarousel, BootProgress, BootTypeahead
- BootButton and BootButtonGroup improvements
- BootBaseMenu, BootMenu, BootDropdown improvements
- Renamed BootCrumb to BootBreadcrumbs
- Renamed BootThumbs to BootThumbnails

Feb 17, 2012 ¶

Release 0.9.9
- Upgraded to Bootstrap 2.0.1
- Integrated Bootstrap's native jQuery plugins
- Plugin API
- Renamed BootNav to BootNavbar
- Renamed BootTabs to BootTabbed
- Renamed BootTwipsy to BootTooltip
- Renamed BootMediaGrid to BootThumbs

Dec 25, 2011 ¶

Release 0.9.7b
- Fixed some minor issues

Dec 24, 2011 ¶

Release 0.9.7
- Added BootNav (Topbar navigation)
- Added support for dropdown menus in BootMenu (and BootNav)
- Fixed import paths

Dec 19, 2011 ¶

Release 0.9.6b
- Fixed an issue with sorting in BootGridView
- Fixed the order hint and error are rendered by BootInput
- Changed the script files and scripts to be registered correctly
- Corrected the close text for BootAlert

Dec 16, 2011 ¶

Release 0.9.6
- Added BootTabs (JavaScript tabs)
- Fixed a few minor bugs

Dec 2, 2011 ¶

Release 0.9.5b
- Fixed a bug in the Bootstrap Gii generator

Nov 30, 2011 ¶

Release 0.9.5
- Added support for input lists
- Combined BootTabs and BootPills to BootMenu
- Moved all widgets under the same folder
- Removed BootHtml
- Renamed BootInputBlock to BootInput
- Renamed the block methods in BootActiveForm to row

Nov 14, 2011 ¶

Release 0.9.4
- Updated to Bootstrap 1.4.0

Oct 23, 2011 ¶

Release 0.9.3
- Added BootModal, BootTabs, BootPills
- Renamed BootFlash to BootAlert
- Replaced the jQuery plugins with completely new jQuery UI widgets
- Added support rendering of captcha rows

Oct 21, 2011 ¶

Release 0.9.2
- Added BootPopover (rich content tooltip widget)
- Fixed a few bugs in the BootCrumb widget
- Improved the jQuery plugins

Oct 3, 2011 ¶

Release 0.9.1
- Added BootFlash (flash message widget)
- Added BootstrapGenerator (Gii CRUD templates)
- Various improvements to BootActiveForm

Sep 26, 2011 ¶

Release 0.9.0
- Initial release

Total 20 comments

#8241

schmunk at 2012/05/21 04:15am

@johnrey1219: Check your config

It's very likely, that you've merged some parts in your config/main.php in the wrong way.

#8237

johnrey1219 at 2012/05/21 02:02am

cexeption

hello guys, i've tried implementing this extoension and i encountered this error:

Property "CWebApplication.0" not defined.

what do i do? can someone help me?

#8189

jwerner at 2012/05/16 02:55am

GridView Delete Items

Hi,

Thanks very much for this great extension!!!

Deleteing an ActiveRecord in the GridView doesn't work in 0.10.0. I used the default Gii bootstrap templates.

It seems that the Delete button generates a GET request, however the controller delete action requires a POST request.

How can this be fixed?

Thanks & regards,

Joachim

#8186

duncanmapes at 2012/05/15 09:58am

@Chris83 bug in carousel

I will let you know if i find anything. Also, I am not running the beta, but @version 0.9.12.

Thanks again for the extension.

#8175

Chris83 at 2012/05/14 10:10pm

@duncanmapes

That's a bug in the BETA, if you have any idea what is causing it please tell and I'll fix it.

#8170

duncanmapes at 2012/05/14 03:07pm

carousel - no transition

since upgrading to the latest version, carousel no longer has a transition, i checked your demo page, it doesn't have a transition anymore either (although the twitter bootstrap demo does). Is this intentional? Or can it be fixed?

Thanks

#8165

yiqing95 at 2012/05/14 09:16am

any idea about co-work with CForm ?

@Chris83
when i use the BootActiveForm with CForm formBuilder

the ui is not so good . so do you have any good idea about this ;

$formConfig = array(
            'title' => 'formTest',
            'activeForm'=>array('class'=>'ext.bootstrap.widgets.BootActiveForm',
            'htmlOptions'=>array('class'=>'well'),
                'type'=>'horizontal',
            ),
            'attributes' => array(
                'id' => DynamicFormModel::getFormId(), //'testSearchForm',
            ),
            'elements' => array(
                'keywords' => array(
                    'type' => 'text',
                    'maxlength' => 32,
       .....

#8160

duncanmapes at 2012/05/13 06:27pm

Carousel linked images

Would it be possible to add an option for linking the entire image/item in the carousel? I can make additional changes myself, but I would prefer to stay in line with your releases.

Thanks for the extension.

#8152

yiidf at 2012/05/13 03:35am

@CyberMama ... google-pretty-print

No need to add this to Yii-Bootstrap. Checkout CTextHighlighter!

Simply try this:

<?php
$jsLighter = new CTextHighlighter();
$jsLighter->language = 'JAVASCRIPT';
 
echo $jsLighter->highlight("$(document).ready( function()
{
    // show myModal
    $('#showMyModal').bind('click', function() {
        $('#myModal').modal(\"show\");
    });  
});"); ?>

Note: The JS portion of the code isn't highlighted properly here; but it will be in the rendered view file.

#8133

CyberMama at 2012/05/12 01:46pm

Bootstrap Datepicker

Support suggestion about bootstrap datepicker and google-pretty-print

#8122

duncanmapes at 2012/05/11 06:21pm

great extension - links for carosel?

Let me say I love the extension, makes my initial site SO much nicer.

I wonder if you would be interested in adding slide links to the bootcarosel?

I was just going to code them into your widget, but I didn't want to break any future upgrades.

Thanks.

#8055

yiiesss at 2012/05/07 10:59am

validation issues

Hi chris ,

I use horizontal forms . When validatin form , if there'is errors the coloration of fields don't work properly.

I findout a workaround . this is it ! i hope that's helps you

on BootInput class i changed in the getContainerCssClass() method : i comment

CHtml::resolveName($this->model,

/**
     * Returns the container CSS class for the input.
     * @return string the CSS class.
     */
    protected function getContainerCssClass()
    {
        if ($this->model->hasErrors(/*CHtml::resolveName($this->model,*/ $this->attribute/*)*/))
            return CHtml::$errorCss;
        else
            return '';
    }

#8016

giannis at 2012/05/03 05:06pm

bootbutton fix, state active vs disabled

Hi Chris83, you have done a very nice job here, I just wanted to say that in bootbutton class, you should change the "active" attribute to "disabled", because I think this is the way bootstrap handles now Disabled state. Keep up the good work

#7943

Chris83 at 2012/04/27 12:21pm

@peterjkambey

BootTabbable has undergone a lot of improvements. In the newest version the active tab can now be set using the item's "active" parameter (in the same manner as it's used in menus).

Also BootAlert doesn't support options because the bootstrap-alert plugin doesn't take any options (options correspond to the JS plugin options) and has therefore been removed.

#7932

schmunk at 2012/04/27 02:42am

@Charger

A workaround is to use another less compiler, e.g. http://incident57.com/less/ for OS X. The underlying PHPLESS library hasn't been updated yet.

#7930

Charger at 2012/04/27 01:05am

How modify css?

How I can correct change css for bootstrap? I install LESS extension and define in /less/style.less:

@import "../protected/extensions/bootstrap/lib/bootstrap/less/bootstrap.less";
@navbarBackground: @grayLight;

and in /layouts/main.php

<title><?php echo CHtml::encode($this->pageTitle); ?></title>
    <link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/css/style.css" />

When i refresh page, then get: Error 500 #grid > .core is undefined

#7929

peterjkambey at 2012/04/26 11:18pm

what happen with bootstrap.widgets.BootTabbable in version 0.9.12

Hi Chris.

1. I dont know what might happen with bootstrap.widgets.BootTabbable in this new release. On the previous release, bootstrap.widgets.BootTabbable will display first tab content automatically when URL opened. It is not happen on new release?. have to add new option?

2. Boot alert on New Release not support options array anymore. is it OK ? I think i still like the "X" close button on option array..

#7898

edoardo849 at 2012/04/25 06:43am

@yiidf

so obvious... thank you man!

#7897

yiidf at 2012/04/25 06:38am

@edoardo849

You cannot do "'fixed'=>true" - here the value of true is "1" hence the "navbar-fixed-1". Try using "top" or "bottom" instead and depending on where the navbar should be fixed at.

$this->widget('bootstrap.widgets.BootNavbar', array(
    'fixed'=>'top',
    ...

$this->widget('bootstrap.widgets.BootNavbar', array(
    'fixed'=>'bottom',
    ...

#7896

edoardo849 at 2012/04/25 06:18am

Problem with bootNavBar

Hello, I came up with this strange problem: in the source file BootNavbar there is this line:

$validFixes = array(self::FIXED_TOP, self::FIXED_BOTTOM);
 
        if (in_array($this->fixed, $validFixes))
            $class[] = 'navbar-fixed-'.$this->fixed;

Problem is, when I declare the widget 'fixed'=>true, it gives me a css class of navbar-fixed-1 instead of navbar-fixed-top (I think because the local variable "$fixed" is overwritten by the same variable "$fixed" in the widget properties) . Is this a bug? For now I've modified the code like this:

$validFixes = array(self::FIXED_BOTTOM,self::FIXED_TOP);
 
if (in_array($this->fixed, $validFixes))
   $class[] = 'navbar-fixed-'.$validFixes[$this->fixed];

Please login to leave your comment.