yii-bootstrap-widgets

Collection of widgets and classes to apply the look&feel of bootstrap to yii.
31 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/

Other

Throughout the project i'm using some resources which are not included in the extension but i would like to thank and mention though.

  • Less.js: https://github.com/cloudhead/less.js
  • Less.php: https://github.com/agar/less.php
  • Less Yii extension: https://bitbucket.org/Crisu83/yii-less

Changelog

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

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

#7006 report it
bit0123 at 2012/02/18 02:59pm
Understanding Problem

Is "Include the css (or less files) and the icons" indicates to copy the css and img file from Bootstarp to wideget/bootstarp(new one).

or including css file to the main class where to use the wideget. Isn't it possible to create slideshhow wideget using bootstarp-carusel.js? Thanks for quick reply.

#7005 report it
demo88 at 2012/02/18 02:34pm
to @bit0123 and @marcius

@bit0123 I will extend the Installation part, please tell me if its still not clear.

@marcius It's overlapping...;) All in all they should do the same, but both are different in detail. I will not say which one is better, I think both have their advantages.

#7004 report it
marcius at 2012/02/18 02:28pm
Good!

I will try it soon. Is this extension complementary or overlapping to this one? http://www.yiiframework.com/extension/bootstrap

#7003 report it
bit0123 at 2012/02/18 02:26pm
Problem of Understanding

In the 2nd installation step it is mentioned to 2. Include the css (or less files) and the icons

it's not clear to me. How to do that? Please help.

#7000 report it
yiimann at 2012/02/18 12:09pm
Yeahh

Awesome !! Thanks very much, I was switching my admin to boostrap this morning and the pain is to switch my html to bootstrap. With your extension this will be easier and faster. Thanks.

Leave a comment

Please to leave your comment.

Create extension