Yii 1.1: yii-bootstrap-widgets

Collection of widgets and classes to apply the look&feel of bootstrap to yii.
44 followers

This extension is a collection of widgets that apply the look and feel of Twitter Bootstrap to Yii.

Please visit the demo to see what is possible until now. The aim is to transform all bootstrap components into yii widgets and vice versa.

I know there are already a few very good extension like this, but either it does not cover all components or its outdated. (And I had to do this anyway;) )

Requirements

I don't think there are any special requirements...

Installation

Bootstrap

You can skip this step if you already included bootstrap. You also should give less a try, but you don't need to. To get the bootstrap less files you have to download it from github.

  1. Download Bootstrap
  2. Copy the the css and and img folder to your theme directory.
  3. Include the css in your layouts/main.php
<?php Yii::app()->clientScript->registerCssFile(Yii::app()->theme->baseUrl.'/css/bootstrap.min.css'); ?>

Extension

  1. Download the extension
  2. Copy the widgets folder to your protected folder
  3. Import it in your config
'import'=>array(
    'application.models.*',
    'application.components.*',
    ...
    'application.widgets.bootstrap.*',
),

How to use

Please notice that you have to include the css (or less files) and icons by yourself. If you would like to add some responsive widgets you also have to include the responsive css/less file. The javascript is included in the project.

Please refer to the github wiki. There is also a demo available.

Bug Tracker

Please report your bugs to the github bug tracker.

Resources

  • Bootstrap: http://twitter.github.com/bootstrap/ - http://www.apache.org/licenses/LICENSE-2.0
  • Glyphicons Free: http://glyphicons.com/ - http://creativecommons.org/licenses/by/3.0/

Changelog

0.5.0

  • Updated JS to bootstrap 2.3.0
  • Created shorthands for the text- and passwordfield.
//Replace this:
<?php echo $form->beginControlGroup($model, 'title'); ?>
    <?php echo $form->labelEx($model,'title'); ?>
    <?php echo $form->beginControls(); ?>
        <?php echo $form->textField($model,'title'); ?>
        <?php echo $form->error($model,'title'); ?>
    <?php echo $form->endControls(); ?>
<?php echo $form->endControlGroup(); ?>
 
//with that:
<?php echo $form->bootstrapTextField($model, 'title'); ?>
//or
<?php echo $form->bootstrapPasswordField($model, 'password'); ?>

0.4.4

  • Important The default color of the navbar is now white! Set the option dark to true to keep the old design.
  • Updated js to bootstrap 2.1.0
  • Added the submenu to the button dropdowns
  • Added block support for buttons
  • See the github wiki page for help on how to use the new features.

0.4.3

0.4.2

  • Added ability to add links to the carousel images.

0.4.1

  • Added title for EBootstrapButtonColumn icons

0.4.0

  • Updated the JS to bootstrap 2.0.2

0.3.9

0.3.8

0.3.7

0.3.6

0.3.4

  • Added Button -groups, -toolbars and -dropdowns
  • Added prepend/append text fields
  • Added search field (rounded corners)
  • Right align navigation bar elements (Small change in the syntax, you have to specify dropdown elements with "dropdown" => true)

0.3.2

  • Added widget to display code with syntax highlighting. (Google code prettify)
  • Added collapse widget.
  • Changed EBootstrapListViewItem Class. Now extends CDetailView.
  • Added missing class to EBootstrapSidebar
  • Added comments to the source code
  • Several small bugs
  • Added source code to the demo website

0.2.1

  • Minified JS
  • Carousel widget

0.2.0

  • CListView wrapper
  • CGridView wrapper
  • CDetailView wrapper
  • Updated to Bootstrap 2.0.1

0.1.0

  • Initial commit

Total 20 comments

#12904 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.

#9575 report it
demo88 at 2012/08/24 03:28am
hero tag

@kmindi

fixed

#8763 report it
kmindi at 2012/06/25 08:35am
hero unit p tag

the hero unit should not wrap the body in a p tag, because i would not be able to use p tags inside that p tag or other block elements (to have valid html)

#8569 report it
demo88 at 2012/06/12 06:03am
@rahmat.awaludin

Please try again with 'filter' => false. I think you can't resize the rows because of the input fields.

#8563 report it
Rahmat Awaludin at 2012/06/12 02:51am
EBootstrapGridView htmlOptions not working

I'm trying to resize column width in EBootstrapGridView, Here is my code in admin.php :

<?php $this->widget('EBootstrapGridView', array(
    'id'=>'file-grid',
    'dataProvider'=>$model->search(),
    'filter'=>$model,
    'columns'=>array(
        array('name'=>'id','value'=>'$data->id',
            'htmlOptions'=>array('width'=>'10')
        ),
        array('name'=>'app_search','value'=>'$data->app0->name'),
        array('name'=>'group_search','value'=>'$data->app0->group0->name'),
        'file',
        'date',
        array(
            'class'=>'CButtonColumn',
        ),
    ),
    'pager' => array(
        'class' => 'EBootstrapLinkPager',
        'header' => false,
    ),
    'pagerAlign' => 'centered',
    'bordered' => true,
    'striped' => true,
    'condensed' => false,
)); ?>

I'm also trying to use

'htmlOptions'=>array('style'=>'width: 10') // with px or % is also not working

But it won't resize. Anyone have solutions? Thanks!

#7766 report it
demo88 at 2012/04/17 08:26am
@jzhong5

You can change the style by adding custom css code and overwrite the default styles.

#7764 report it
jiaming at 2012/04/16 03:53pm
Thanks....and some questions.

First, thanks for your amazing extension.

I have a question about how to customize the views...

If i have 10 controller, that means, more than 40 views, do I have to change them one by one? For example, the nab or operation panel or even the Breadcrumbs...

What should I do? Is there a way to regulates them in the same time?

#7603 report it
rookie84 at 2012/04/02 02:36pm
good work..

Good work done on these widgets.. thanks.

#7058 report it
demo88 at 2012/02/21 04:59pm
@bit0123

Hi, the search input is already integrated (not in the demo), the progress bar will follow next;)

#7056 report it
Chris83 at 2012/02/21 02:21pm
@demo88

Thanks for linking my LESS extension. :) And idd, sure the extensions can co-exist. However, if you change your mind and want to merge the Bootstrap extensions to provide the Yii community with a single polished Bootstrap integration, I'd gladly discuss it.

Keep up the good work!

#7040 report it
bit0123 at 2012/02/20 05:09pm
Slideshow !!!

Isn't it possible to create un-ended slideshow? Please update the GitHub demo with progressbar,search

I am eagerly waiting for every update. Sorry for disturbing through continious questioning.

#7020 report it
demo88 at 2012/02/19 05:19pm
@bit0123

You have to replace 'EBootstrap::thumbnailSrc()' with the src of the image. For example:

'items' => array(
        array('src' => 'http://www.yiiframework.com/files/logo/yii.png', 'caption' => 'Yii Logo', 'body' => 'This is a logo', 'active' => true),
),

or

'items' => array(
        array('src' => Yii::app()->request->baseUrl.'/images/gallery/1.jpg', 'caption' => 'Image 1', 'body' => 'This is image 1', 'active' => true),
),

EBootstrap::thumbnailSrc does nothing other than returning a link to an image.

#7016 report it
bit0123 at 2012/02/19 09:34am
Problem with EBootstrapCarousel for slideshow of picture

I am with trouble to give the url of picture.

$this->widget('EBootstrapCarousel', array(
    'items' => array(
        array('src' => EBootstrap::thumbnailSrc(940, 400, 'ccc'), 'caption' => 'Image Caption 1', 'body' => 'This is a thumnail. What a great picture.', 'active' => true),
        array('src' => EBootstrap::thumbnailSrc(940, 400, 'bbb'), 'caption' => 'Image Caption 2', 'body' => 'This is a thumnail. What a great picture.'),
        array('src' => EBootstrap::thumbnailSrc(940, 400, 'aaa'), 'caption' => 'Image Caption 3', 'body' => 'This is a thumnail. What a great picture.'),
        array('src' => EBootstrap::thumbnailSrc(940, 400, '999'), 'caption' => 'Image Caption 4', 'body' => 'This is a thumnail. What a great picture.'),
        array('src' => EBootstrap::thumbnailSrc(940, 400, '888'), 'caption' => 'Image Caption 5', 'body' => 'This is a thumnail. What a great picture.'),
        array('src' => EBootstrap::thumbnailSrc(940, 400, '777'), 'caption' => 'Image Caption 6', 'body' => 'This is a thumnail. What a great picture.'),
    ),
    'interval' => 6000,
    'htmlOptions' => array(),
));

This example only show the placeholder of image without the link ofpicture. Where to give the url of picture for slideshow? Thanks in advance.

#7014 report it
demo88 at 2012/02/18 08:50pm
Forum post

I've started a new topic in the forum. If you have any questions feel free to post your questions there.

#7012 report it
yiqing95 at 2012/02/18 08:21pm
thanks for your great works ! glad to hear that .( they can coexist without problems.)

you see the bootstap is so popular , and many people watch it . you should open a topic to discuss it . the comments are too much ! ^-^

#7011 report it
demo88 at 2012/02/18 08:14pm
@yiqing95

I'm very sure that they can coexist without problems.

#7010 report it
yiqing95 at 2012/02/18 08:06pm
can this go togerther with yii bootStrap extension ?

are this extension and Yii-Bootstrap exclusive or they can go togerther ? i v used the yii-Bootstrap extension so want to know that !

#7009 report it
iota at 2012/02/18 05:58pm
Awesome

Thanks so much for this - I was looking for a simple way to enhance a website without much effort and this did the trick!

#7008 report it
bit0123 at 2012/02/18 03:26pm
Welcome Message

Special thanks to you. i have got the point.

#7007 report it
demo88 at 2012/02/18 03:05pm
@bit0123

That means you have to download bootstrap and include it in your theme. Because it is very likely that you use bootstrap not only in combination with the widgets i've decided to not integrate it into the download.

I'm working on the slideshow widget in this moment, give me a few hours and I will upload a new version;) You can see what I will add in the near future at the github wiki.

Leave a comment

Please to leave your comment.

Create extension