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 andimg
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/
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 ¶
- Updated js to bootstrap 2.0.4
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 ¶
- Added responsive EBootstrapNavigation
- Fixed small HTML bug in EBootstrapBreadcrumbs
0.3.8 ¶
- Added icons to EBootstrapNavigation
0.3.7 ¶
- Added Modals
0.3.6 ¶
- New widget: progress bar
- New form element: appended/prepended password
- Search bar template for the top-bar navigation
- Infinite carousel option (little hack, does not look like this is provided by bootstrap itself),
- Bug fix where an icon does not appear
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
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.
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.
Good!
I will try it soon.
Is this extension complementary or overlapping to this one?
http://www.yiiframework.com/extension/bootstrap
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.
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.
@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.
Welcome Message
Special thanks to you.
i have got the point.
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!
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 !
@yiqing95
I'm very sure that they can coexist without problems.
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 ! ^-^
Forum post
I've started a new topic in the forum. If you have any questions feel free to post your questions there.
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.
@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.
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.
@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!
@bit0123
Hi, the search input is already integrated (not in the demo), the progress bar will follow next;)
good work..
Good work done on these widgets.. thanks.
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?
@jzhong5
You can change the style by adding custom css code and overwrite the default styles.
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!
@rahmat.awaludin
Please try again with
'filter' => false
. I think you can't resize the rows because of the input fields.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)
hero tag
@kmindi
fixed
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.
If you have any questions, please ask in the forum instead.
Signup or Login in order to comment.