Collection of widgets and classes to apply the look&feel of bootstrap to yii.
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.
- Download Bootstrap
- Copy the the
css and and img folder to your theme directory.
- Include the css in your
layouts/main.php
<?php Yii::app()->clientScript->registerCssFile(Yii::app()->theme->baseUrl.'/css/bootstrap.min.css'); ?>
Extension ¶
- Download the extension
- Copy the
widgets folder to your protected folder
- 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 ¶
Total 20 comments
You can change the style by adding custom css code and overwrite the default styles.
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?
Good work done on these widgets.. thanks.
Hi, the search input is already integrated (not in the demo), the progress bar will follow next;)
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!
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.
You have to replace 'EBootstrap::thumbnailSrc()' with the src of the image. For example:
or
EBootstrap::thumbnailSrc does nothing other than returning a link to an image.
I am with trouble to give the url of picture.
This example only show the placeholder of image without the link ofpicture. Where to give the url of picture for slideshow? Thanks in advance.
I've started a new topic in the forum. If you have any questions feel free to post your questions there.
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 ! ^-^
I'm very sure that they can coexist without problems.
are this extension and Yii-Bootstrap exclusive or they can go togerther ? i v used the yii-Bootstrap extension so want to know that !
Thanks so much for this - I was looking for a simple way to enhance a website without much effort and this did the trick!
Special thanks to you. i have got the point.
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.
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.
@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.
I will try it soon. Is this extension complementary or overlapping to this one? http://www.yiiframework.com/extension/bootstrap
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.
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 login to leave your comment.