This extension brings together Yii and Bootstrap, Twitter's HTML, CSS and JavaScript toolkit. It provides a wide range of 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.
Note before upgrading to 2.0.x
Bootstrap should no longer be preloaded, instead you should define a path alias, bootstrap, in your application configuration (an example can be found here).
Links ¶
- Read the docs
- Join the discussion
- Share your ideas
- Fork me on Bitbucket
- Report an issue
- Bootstrap home
Donate ¶
Do you want to say thanks for the time and efforts put on this project?
Requirements ¶
Yii 1.1.10 or above (Bootstrap requires jQuery 1.7.1 or newer).
Setup ¶
Installation instructions can be found here: Yii-Bootstrap home.
What's included? ¶
Bootstrap contains the following widgets:
- TbAffix - Affix wrapper
- TbActiveForm - ActiveForm
- TbAlert - Flash messages
- TbBadge - Badges
- TbBreadcrumbs - Breadcrumbs
- TbButton - Buttons
- TbButtonGroup - Button groups
- TbCarousel - Image carousel
- TbCollapse - Collapse wrapper
- TbDetailView - Detail view
- TbGridView - Grid view
- TbHeroUnit - Page head
- TbLabel - Labels
- TbListView - List view
- TbMenu - Menu
- TbModal - Modal dialog
- TbNavbar - Navigation bar
- TbPager - Pager
- TbProgress - Progress bars
- TbScrollSpy - Scrollspy wrapper
- TbTabs - JavaScript tabs
- TbThumbnails - Image grid
- TbTypeahead - Autocomplete
Changes ¶
Version 2.1.0 (March 17, 2013) ¶
- Upgrade to Bootstrap 2.3.1
Version 2.0.3 (Jan 1, 2013) ¶
- Fixed less import issue
Version 2.0.2 (Dec 22, 2012) ¶
- Fixed some bugs
Version 2.0.1 (Dec 19, 2012) ¶
- Fixed some old bugs
Version 2.0.0 (Dec 19, 2012) ¶
- Upgraded to Bootstrap 2.2.2
- Added support for form builder
- Added Bootstrap base theme
- Added affix widget
- Restructured assets and remove lib
- Changed the way some plugins are registered
- A lot of other minor improvements
Version 1.2.0 (Nov 1, 2012) ¶
- Upgraded to Bootstrap 2.2.1
Version 1.1.0 (Sep 20, 2012) ¶
- Upgraded to Bootstrap 2.1.1
Version 1.0.0 (Aug 22, 2012) ¶
- Upgraded Bootstrap to 2.1.0
- Changed class prefix to Tb
- Added collapse and scrollspy widgets
- Rewrote the alert widget
- Rewrote menus to extend CMenu
- Renamed tabbable to tabs
- Improved the active form widget
- Added for the nested menu items
- Added support for dropups
- Numerous other minor improvements
- Fixed a huge bunch of bugs
- Completely reworked the demo
Version 0.10.0 BETA (May 13, 2012) ¶
- 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
Version 0.9.12 (Apr 25, 2012) ¶
- 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)
Version 0.9.11 (Apr 14, 2012) ¶
- 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
Version 0.9.10 (Mar 13, 2012) ¶
- 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
Version 0.9.9 (Feb 17, 2012) ¶
- 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
Version 0.9.7 (Dec 24, 2011) ¶
- Added BootNav (Topbar navigation)
- Added support for dropdown menus in BootMenu (and BootNav)
- Fixed import paths
Version 0.9.6 (Dec 16, 2011) ¶
- Added BootTabs (JavaScript tabs)
- 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
Version 0.9.5 (Dec 2, 2011) ¶
- Fixed a bug in the Bootstrap Gii generator
- 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
Version 0.9.4 (Nov 14, 2011) ¶
- Updated to Bootstrap 1.4.0
Version 0.9.3 (Oct 23, 2011) ¶
- Added BootModal, BootTabs, BootPills
- Renamed BootFlash to BootAlert
- Replaced the jQuery plugins with completely new jQuery UI widgets
- Added support rendering of captcha rows
Version 0.9.2 (Oct 21, 2011) ¶
- Added BootPopover (rich content tooltip widget)
- Fixed a few bugs in the BootCrumb widget
- Improved the jQuery plugins
Version 0.9.1 (Oct 3, 2011) ¶
- Added BootFlash (flash message widget)
- Added BootstrapGenerator (Gii CRUD templates)
- Various improvements to BootActiveForm
Version 0.9.0 (Sep 26, 2011) ¶
- Initial public release
Thank you
Thank you so much for your hard work on this extension. I've enjoyed using your Bootstrap 2.0 implementation since the beta early february.
Carl
Thanks for the work
that's a problem. i can't init the "CWebLogRoute" when i use yii-bootstrap 0.9.9
@huanghuibin
I don't see how the extension could be the cause of CWebLogRoute failing. Could you give me some more details so that I can look into it.
About BootCaptcha options (0.9.10)
Chris,
Don't know if you saw my comment , but it worth to be mentionned that this recent change slightly breaks BC.
If anyone uses CaptchaRow with htmlOptions, you must change your call:
// Before : echo $form->captchaRow($model, 'verifyCode', array('class' => 'something')); // In 0.9.10 : // Add an empty (or some CCaptcha options) array before your htmlOptions echo $form->captchaRow($model, 'verifyCode', array(), array('class' => 'something'));Anyway, this is really a great extension
Yii 1.1.9 required
Hi, just as note: The latest version from bitbucket is not compatible with Yii 1.1.8, since it's not shipped with jQuery 1.7.
Please enough renaming
It`s wonderful extension,you're doing a great job, but darling, you are so often change the names of the widgets
Hi, Please help me ASAP.
How can i use this Popover with an input box.
I want to show the popover when the cursor focusing on the input box.
The popover is working fine with CHtml::link().
How can i apply popover on $form->textFieldRow() ?
I have tried like this, but not working.
<?php echo $form->textFieldRow($model,'email',array('size'=>32,'maxlength'=>100,'class'=>'span5','data-title'=>'Heading', 'data-content'=>'Content ...', 'rel'=>'popover'));?>
**
Thanks in advance,
Roopz.
Popover with Inputfiled
Yes. I have found the solution.
Edit main.php as follows.
'bootstrap'=>array(
'class'=>'ext.bootstrap.components.Bootstrap', // assuming you extracted bootstrap under extensions 'coreCss'=>true, // whether to register the Bootstrap core CSS (bootstrap.min.css), defaults to true 'responsiveCss'=>false, // whether to register the Bootstrap responsive CSS (bootstrap-responsive.min.css), default to false 'plugins'=>array( // Optionally you can configure the "global" plugins (button, popover, tooltip and transition) // To prevent a plugin from being loaded set it to false as demonstrated below 'transition'=>false, // disable CSS transitions 'tooltip'=>array( 'selector'=>'a.tooltip', // bind the plugin tooltip to anchor tags with the 'tooltip' class 'options'=>array( 'placement'=>'bottom', // place the tooltips below instead ), ),'popover'=>array( 'selector'=>'input', // bind the plugin tooltip to anchor tags with the 'tooltip' class 'options'=>array( 'placement'=>'right', // place the tooltips below instead ), ), // If you need help with configuring the plugins, please refer to Bootstrap's own documentation: // http://twitter.github.com/bootstrap/javascript.html ), ),Please note the popeover section above.
@CyberMama
That's the reason the extension hasn't made version 1.0.0 yet. But the good news is that there shouldn't be any upcoming naming changes. Nevertheless, I'm sorry for the inconvenience I may have caused you.
can u show the CWebLogRoute on your project with yii-bootstrap?
that is my config
...... 'log'=>array( 'class'=>'CLogRouter', 'routes'=>array( array( 'class'=>'CFileLogRoute', 'levels'=>'error, warning, log', ), /* 'debug'=>array( 'class'=>'ext.yii-debug-toolbar.YiiDebugToolbarRoute', 'ipFilters'=>array('127.0.0.1'), ), // uncomment the following to show log messages on web pages */ 'web'=>array( 'class'=>'CWebLogRoute', ), ), ), ......Bootstrap Modal Ajax
Dynamic Modal, how would you do it? any idea?
"+1" to previous question....
I added +1 to previous question.
Now I use fancybox ext for modal with ajax-loaded content, but I think it dublicates BootModal =\
2 brylgen
I use jui dialog. Unfortunatly BootModal has problem with positioning after load dynamic content, and it not draggable, not resizable. I didn`t use it.
bootGridView witth filters
Do anyone has problem with filters in bootGridView? When I enable filters, my grid-table expands to overflow content div and browser window... Is it normal and i must to hardcode width and height all cells?
ps: sorry for my Eng
@Flam bootGridView witth filters
you have to use the following into your .css
.filter input, .filter select {
width:100%;
margin: 1px;
}
How do you use Import in this extension
Hi, I'm making a website where it has a fluid-layout, in bootstrap documentation theres a import "responsive.less", how do you import this using this plugin
@bryglen
Just set 'responsiveCss' in your Bootstrap component config :
'bootstrap'=>array( 'class'=>'path.to.ext.bootstrap.components.Bootstrap', 'coreCss'=>true, 'responsiveCss'=>true, // ... ),BootGridView type
Hi
for BootGridView example page has this code:
<?php $this->widget('bootstrap.widgets.BootGridView', array( 'type'=>'striped bordered condensed', 'dataProvider'=>$gridDataProvider, 'template'=>"{items}", ...but there is no type property in last version of BootGridView.
itemsCssClass is used instead.
E.g.
<?php $this->widget('bootstrap.widgets.BootGridView', array( 'itemsCssClass'=>'table table-striped table-bordered table-condensed', 'dataProvider'=>$gridDataProvider, 'template'=>"{items}", ...Nice Extension Chris
I have been using the breadcrumbs and the BootTabs and I love them.
Using BootTabs...
Has anyone else noticed a bug where in IE8 the active css class doesn't deactivate when the new tab becomes active unless you mouseover it?
Any ideas what might cause this or how to fix it?
css3pie
css3pie was causing strange things to happen with BootTabs in IE8. Just an FYI for anyone who might try that route.
Thanks again Chris!
CSS bridge between Bootstrap and Yii
Very very interesting!!!! Maybe the best feature you can code!!!
Any ETA? I cannot wait to see it... :-D
@vitalets
You are correct, I updated the docs with the wip BootGridView class. That was unintentional. BootGridView will be improved quite a lot in the next version. Ill correct the mistake ASAP. Thanks for noticing.
@aleksdj
I've written a first version of the CSS that add the missing Yii styles for e.g. grid view and detail view. It can be found in the 1.0.0-wip branch on Bitbucket.
BootCollapse ?
Hi Chris!
thanks for your efforts!
What about BootCollapse widget?
Togglable tabs: Active Pane
Hi Chris,
it would be nice to have the menu:active connected to the active pane in normalizeTabs. And just force it when no active item is set. So you could choose the pane to start with.
Thanks for your effort!
@danielmeisl
In version 0.9.11 you can set the active tab by setting the active property to true for the tab you want to activate.
@Chris83
Just saw it. Thanks for the update!
combine label on bootMenu with bootBadge
hi chris,
for bootMenu list-type is a perfect widget for sidebar, i want to add/concat bootbadge notification after its label. how can i do that?
In IE does not work
http://www.cniska.net/yii-bootstrap/#bootModal and
http://www.cniska.net/yii-bootstrap/#bootCarousel in IE does't work ,
win7 + ie9 I tested ，It does't work 。
@smarteng
Right, that's because of the console.log calls (console is undefined in IE unless the developer tools are open). I'll fix it when I have time. Thanks for spotting this.
Integrate boottypeahead in a bootactiveform
Hi,
I have just modified lightly boottypeahead code to use it in a bootactiveform as below:
public $form; public $model; public $attribute; public function run() { if (isset($this->form) && isset($this->model) && isset($this->attribute)) { echo $this->form->textFieldRow($this->model, $this->attribute, $this->htmlOptions); } else { echo CHtml::tag('input', $this->htmlOptions); } $id = $this->id; $options = !empty($this->options) ? CJavaScript::encode($this->options) : ''; Yii::app()->clientScript->registerScript(__CLASS__.'#'.$id, "jQuery('#{$id}').typeahead({$options});"); }Any comment welcome :)
how to specify custom template ?
the BootActiveForm use
<?php echo $form->xxxRow($model, 'textField', array(..));generate the formInput row , but if want change your default template , how should i do ?
i see in the BootActiveForm::inputsList :
if (isset($htmlOptions['template'])) $template = $htmlOptions['template']; else $template = '<label class="{labelCssClass}">{input}{label}</label>';but for other input rows ?
BootGridView do not show pager
Hello,
How to show pager for BootGridView ? The code below show grid, but do not show pager. The default YII zii.widgets.grid.CGridView show pager without additional settings. Sure data provider has pagination configured.
$this->widget('bootstrap.widgets.BootGridView', array( 'type'=>'striped bordered condensed', 'dataProvider' => $dataProvider, 'template'=>"{items}", 'columns'=>array( array('name'=>'ID', 'header'=>'#', 'htmlOptions' => array('style' => 'width: 10px;')), array('name'=>'DateOf', 'header'=>'Date Of', 'htmlOptions' => array('style' => 'width: 10px;')), array( 'class'=>'bootstrap.widgets.BootButtonColumn', 'htmlOptions'=>array('style'=>'width: 50px'), ), ), ));BootGridView do not show pager
You explicitly disabled it in:
'template'=>"{items}",Try not to set this property.
@WTF
'template => '{items} {pager} {summary}'
Suggestion for extra widgets
Could this be interesting to implement in bootstrap extension for yii?
Textarea:
http://jhollingworth.github.com/bootstrap-wysihtml5/
Datepicker:
http://www.eyecon.ro/bootstrap-datepicker/
another color and datepicker
http://www.eyecon.ro/colorpicker-and-datepicker-for-twitter-bootstrap.htm
thanks for a great extension.
Would be great!
@ortenheim datepicker extension would be great!!
@ortenheim
+1
bootstrap-wysihtml5 would be a great addition to bootstrap.
@ortenheim
The datepicker, colorpicker and wysiwyg is a bit outside of the extensions scope because they aren't officially part of Bootstrap. However, I'll still consider adding them due to high demand. We'll see...
@ortenheim
Hi,
If you dont like standard Yii JQueryUI standard theme (\framework\web\js\source\jui\css\base theme), you can change into this
http://addyosmani.github.com/jquery-ui-bootstrap/
You also have to change \framework\zii\widgets\jui\CJuiWidget.php in line:
public $theme='base'; to
//public $theme='new_theme_folder_name_above';
with very minimal change, standard theme DatePicker change into bootstrap style..
i'm sorry, i know this may not a good practise, but i really dont like standard Yii JqueryUI theme and this is the only I know to do..
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];@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', ...@yiidf
so obvious... thank you man!
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..
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
@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.
@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.
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
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 ''; }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.
Bootstrap Datepicker
Support suggestion about bootstrap datepicker and google-pretty-print
@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.
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.
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, .....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
@duncanmapes
That's a bug in the BETA, if you have any idea what is causing it please tell and I'll fix it.
@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.
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
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?
@johnrey1219: Check your config
It's very likely, that you've merged some parts in your config/main.php in the wrong way.
Tab menu
Can I have tab menu at the bottom ?
@hrachya - tab menu at the bottom
valid values for the "placement" option are:
above, below, left, right
<?php $this->widget('bootstrap.widgets.BootTabbable', array( 'type'=>'tabs', 'placement'=>'below', 'tabs'=>array( ... ), ), )); ?>of course, it works for (types) "tabs" and "pills"
Exclude from custom layout
Hi all,
my project has two base layout: one "main" for the public website and one called "admin" for the backend admin area. I just want to use bootstrap on the admin layout.. is there a way to exlude it from the main layout?
EDIT: SOLVED!
Just set to false the properties of the Bootstrap component in config/main.php
'bootstrap'=>array( 'class'=>'ext.bootstrap.components.Bootstrap', 'coreCss'=>false, 'responsiveCss'=>false, 'yiiCss'=>false, 'enableJS'=>false, ),Then in my Admin controller:
public function init() { Yii::app()->bootstrap->registerCss(); Yii::app()->bootstrap->registerResponsiveCss(); Yii::app()->bootstrap->registerYiiCss(); Yii::app()->bootstrap->registerCorePlugins(); }BootGridView::afterAjaxUdate trigger bugs , if i set some js handler firebug report errors
i use this code to settle the bugs:
// in BootGridView::init $afterAjaxUpdate = " jQuery('.popover').remove(); jQuery('{$popover}').popover(); jQuery('.tooltip').remove(); jQuery('{$tooltip}').tooltip(); "; if (isset($this->afterAjaxUpdate)) { if (strrpos($this->afterAjaxUpdate, '}') === false) { // js:callback(id,data); $afterAjaxUpdate = "js:function(id, data){ \n $afterAjaxUpdate \n }"; $firstCurlyBracePos = strpos($afterAjaxUpdate, '{'); $this->afterAjaxUpdate = substr_replace($afterAjaxUpdate, CJavaScript::encode($this->afterAjaxUpdate), $firstCurlyBracePos + 1, 0); } else { //js: function(id,data){} $firstCurlyBracePos = strpos($this->afterAjaxUpdate, '{'); $this->afterAjaxUpdate = substr_replace($this->afterAjaxUpdate, $afterAjaxUpdate, $firstCurlyBracePos + 1, 0); } } else { $this->afterAjaxUpdate = "js:function(id, data){ \n $afterAjaxUpdate \n }"; }original implements :
$afterAjaxUpdate = "js:function() { jQuery('.popover').remove(); jQuery('{$popover}').popover(); jQuery('.tooltip').remove(); jQuery('{$tooltip}').tooltip(); }"; if (isset($this->afterAjaxUpdate)) $this->afterAjaxUpdate .= ' '.$afterAjaxUpdate; else $this->afterAjaxUpdate = $afterAjaxUpdate;Validation errors not getting correct class
When having validation errors upon submission, the error class does not get appended to the container div
The error is in the BootInput Class, getContainerCssClass() method.
$attribute = $this->attribute; return $this->model->hasErrors(CHtml::resolveName($this->model, $attribute)) ? CHtml::$errorCss : '';This should be replaced with
$attribute = $this->attribute; return $this->model->hasErrors($attribute) ? CHtml::$errorCss : '';Very Nice!
Pretty awesome extension!
Made a couple minor changes however so far (haven't used all components yet): The breadcrumbs adding a separator should not be based on the active or not (as you can have non active items along the way too). Instead I just added the separator to the implode statement, much simpler.
I also gave BootActiveForm a "TYPE_RAW" to simply output whatever you specify as "data". It's quite hard (or at least I haven't found a way) to use a CAutoComplete or a DateTimePicker with your classes otherwise.
EBootstrapGridView htmlOptions not working
Hi, thanks for great extensions.
Anyway, 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 workingBut it won't resize.
Anyone have solutions?
Thanks!
EBootstrapGridView?
Hey Rahmat,
Is it possible you are commenting on the wrong extension? The gridview from bootstrap is simply called BootGridView and I know from experience that
'htmlOptions'=>array('style' => 'width: 100px')works, as I've used it myself before already.
Edit: modified code. Used the wrong copy/paste and yiidf is correct. It does work perfectly however
@rahmat.awaludin
'htmlOptions'=>array('style'=>'width:10px;')Oh, Blizz is probably right that you're confusing 2 different extensions: bootstrap (this) vs yii-bootstrap-widgets (the other one). You may want to reconsider using the real (this) bootstrap extension because it's not ignoring the htmlOptions. Lol!
Just in case here's the links to the 2 different online demos:
this bootstrap vs yii-bootstrap-widgets.
how to add icon in navbar?
@blizz
Wow, thanks for last comment. Anyway, is it possible to add icon for my navbar?
Icons in BootNavbar via BootMenu
In this bootstrap extension you can easily add icons to BootMenu that can be part of BootNavbar. Just study this code...
<?php $this->widget('bootstrap.widgets.BootMenu', array( 'type'=>'list', 'items'=>array( array('label'=>'LIST HEADER'), array('label'=>'Home', 'icon'=>'home', 'url'=>'#', 'active'=>true), array('label'=>'Library', 'icon'=>'book', 'url'=>'#'), array('label'=>'Application', 'icon'=>'pencil', 'url'=>'#'), array('label'=>'ANOTHER LIST HEADER'), array('label'=>'Profile', 'icon'=>'user', 'url'=>'#'), array('label'=>'Settings', 'icon'=>'cog', 'url'=>'#'), array('label'=>'Help', 'icon'=>'flag', 'url'=>'#'), ), )); ?>...or check out the demo link I've posted a few minutes ago, see below.
how to render menu?
@yiidf
Awesome!
You're right, i'm confusing different extensions.
Now i want to create side menu from my $menu variable as stated in my views:
$this->menu=array( array('label'=>'List File', 'url'=>array('index')), array('label'=>'Create File', 'url'=>array('create')), );Is there a way to render it nicely using bootstrap?
*I see such menu in demo link you put in last comment (Widgets menu on the right)
Thanks a million!
@Rahmat: render menu nicely
Hi Rahmat, so I'm assuming you have secretly switched to use this bootstrap extension. Welcome on board! Here's what you're looking for:
<div class="subnav well"> <?php $this->widget('BootMenu', array( 'type'=>'list', 'items'=>array( array('label'=>'Actions'), array('label'=>'List File', 'url'=>array('index')), array('label'=>'Create File', 'url'=>array('create')), ), )); ?> </div>Class "well" comes with bootstrap.css. You just need to add some styles for "subnav", or whatever you may call it, to position the box; e.g. fixed or relative position, padding, etc.
.subnav {font-size:12px; padding:9px 0; position:fixed; right:20px; top:60px; width:160px; z-index:1030; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px;} .subnav .label {font-size:0.8em; line-height:16px; vertical-align:top;}That's from the original demo. Sorry, I don't have time to put it line by line now but you'll figure it out. You can also browse the entire source code on bitbucket.
@yiidf
Ooppsss.. I got caught! :D
Thanks man, it solved my problem.
Paths for BootNavbar do not include the base path
Thanks for such cool extension! :)
I have a question/possible bug report regarding the BootNavbar: the rendered URL is relative to the domain name and not the installation. If I use the default Yii navigation, all links are generated properly.
Here's an example of what I am talking about:
BootNavbar:
array('label' => 'Sample link', 'url' => 'sample-link'), // This renders the same link array('label' => 'Sample link', 'url' => array('sample-link')),Rendered:
~~~
[html]
Sample link
~~~
Default Yii:
~~~
[html]
Sample link
~~~
Is this a bug or I'm doing something wrong?
Thanks!
Great!
its great extention. but my ajaxvalidation are not working. does the setup for the the beta is different from the previous stable one ? if then where i will find those? thanks!
Add Links to BootCarousel
I love this extension...would be great if you added links to the images of the BootCarousel.
I have made this modification to the widget. It is all it would take to implement to add support for linked images.
replace
echo CHtml::image($item['image'], $item['alt'], $item['imageOptions']);with
echo CHtml::link(CHtml::image($item['image'], $item['alt'], $item['imageOptions']),$item['link']);ProgressBar inside BootGridView
Hi, see this little tip on how to add BootProgress inside BootGridView column.
http://www.yiiframework.com/wiki/347/bootprogresscolumn-progress-bar-inside-gridview-column-compatible-with-bootstrap-extension/
enable visible attribute into BootButtonGroup
Great extension.
I have added theses lines of code into BootButtonGroup.php (after line 79). It's just to use the visible attribute.
if (isset($button['visible']) && !$button['visible']){ continue; }@barcelona23
just an idea for a more flexible way would be adding a css class...
[css] .myInvisibleElement { display:none; }...and setting the class in htmlOptions of the particular item or any other element (not just in BootButtonGroup).
array('label'=>'Button', 'htmlOptions'=>array( 'class' => ( 'foo' != 'bar' ? 'myInvisibleElement' : '') )),Keep in mind Bootstrap (twitter and yii) are being updated quite frequently. You don't really wanna mess around the original php scripts; especially not for something that you can easily do in a more flexible way.
Add on: Maybe that won't look so nice when hiding the first or last element because of the round corners. D'oh!
@yiidf
I got your point and you're right.
However, Use css styles as [display:none] not always is good, for security.
array('label'=>'Button','visible'=>Yii::app()->user->isGuest),@barcelona23
Ideally Chris83 adds the visible option to each and every element of all widgets where it makes sense and is not yet available... in one of the next updates. So I like to take back my "more flexible way" approach as it is not more flexible at all. I need sleep.
Form input error
BootInput doesn't correctly append the error class to the container.
protected function getContainerCssClass() { if ($this->model->hasErrors(CHtml::resolveName($this->model, $this->attribute))) return CHtml::$errorCss; else return ''; }should be
protected function getContainerCssClass() { if ($this->model->hasErrors($this->attribute)) return CHtml::$errorCss; else return ''; }Processing Search Box
'
',What can I put in the action to process what ever was entered in the search box?
@Bman900: how to use the search-box
<form class="navbar-search" action="/site/search"><input type="text" name="term" class="search-query span2" placeholder="Search"></form>Next step, you will need to add a new action (actionSearch for the example above) in your DefaultController, and check for the variable "term" (get or post depending on form method), do whatever you need to find matching results (if any) and redirect to another view accordingly.
@yiidf Thank you
Thank you, that's what I was looking for.
Missing a dot
I believe that line 64 of BootPager.php should be:
$this->htmlOptions['class'] .= ' '.$classes;Instead of:
$this->htmlOptions['class'] = ' '.$classes;Found this while trying to center the pagination, wich by the way is not working.
Here is what I did to try to center it:
$this->widget('bootstrap.widgets.BootGridView', array( 'type'=>'striped bordered condensed', 'id'=>'Candidato-grid', 'dataProvider'=>$dataProvider, 'filter'=>$model, 'ajaxUpdate'=>false, 'emptyText'=>'<div class="empty">Nenhum registro encontrado!</div>', 'summaryText'=>'Exibindo de {start} a {end} de {count}.', 'pager'=>array( 'class'=>'bootstrap.widgets.BootPager', 'displayFirstAndLast'=>true, 'alignment'=>'centered', ), 'columns'=>...No luck. Any ideias on how to center the pager for a grid?
Centering the pager
@jjmf
Pager can be centered using hmtl tags inside the 'template' definition.
$this->widget('bootstrap.widgets.BootGridView',array( 'id'=>'...', 'dataProvider'=>$model->search(), 'template'=>'<table><tr><td style="text-align:center">{pager}</td></tr></table>{items}', 'columns'=>array( ...or like this (no blank line between the pager and the items)
'template'=>'<div style="text-align:center">{pager}</div>{items}',@jjmf
If you are using the latest BETA you can center the pager by setting alignment to centered.
Eupdatedialog with bootstrap modal
Hi, nice extension, congratulations.
I would look forward to a nice bootstrap module which works like the EUpdatedialog extension.
Bye
position of JS file
Hi!
Great work! Why not allowing to change the position (or put it at the end by default) of the JS file(s)?
I see the registerJS function has a $positions parameter, but not used in registerCoreScripts and set to POS_HEAD by default...
So sad...
Registered CSS files not cached
Hi!
Right after installing this awsome extension (using the less.js file to compile), 'bootstrap.min.css' and 'bootstrap-responsive.min.css' are not cached (Firebug says : "Status : 304 Not Modified"), whereas all the other included files ('I.bootstrap-yii.css.pagespeed.cf.dcH83zNl4W.css', 'jquery.js.pagespeed.jm.GHSJPiCHAi.js', 'bootstrap.min.js.pagespeed.jm.FQ5hlvPIRh.js', 'less-1.3.0.min.js.pagespeed.jm.gFt5T5NWtP.js' and 'style.less') are all read from cache (Firebug says : "Status : 304 Not Modified").
Any idea?
Cheers!
ajax request should avoid register core css and js again!
class Bootstrap extends CApplicationComponent { .. /** * Initializes the component. */ public function init() { // Register the bootstrap path alias. if (Yii::getPathOfAlias('bootstrap') === false) Yii::setPathOfAlias('bootstrap', realpath(dirname(__FILE__).'/..')); if(Yii::app()->getRequest()->getIsAjaxRequest()){ //if is ajax mode shouldn't register css and js files again ! return ; } // Prevents the extension from registering scripts and publishing assets when ran from the command line. if (php_sapi_name() === 'cli') return; ....i don't know if this is correct :)
DatePicker
Any datepicker from bootstrap? I get ajax validation problem on using CJuiDatePicker with boostrap.
DatePicker
I found this extension some time ago: http://aymkdn.github.com/Datepicker-for-Bootstrap/
1.0.0 alpha
Besides the new prefix (why why why?), can you please tell us about other changes and adjustments in 1.0.0 alpha?
Thanks.
@yiidf
First I'd like to comment on the prefix change. As I've been developing pre 1.0.0 for the past year now I felt that the prefix chosen back then was not good enough so with 1.0.0 coming out soon (finally!) I decided to "fix" the prefix now as it's basically the last possible moment to do so. I'd rather do it now than be sorry about it later.
I know that this possesses problems when upgrading existing projects to use 1.0.0 but after all it's a simple find and replace ('widgets.Boot => 'widgets.Tb should take care of 99% of the cases). I have to do these changes to all my project as well. Of course there's also the option to take the widgets from 1.0.0 and rename them.
Regarding other changes I can mention that all menus have been rewritten to extend CMenu and there will be some major improvements for the form and input components. That, plus a number of bug fixes (about 20-30 or so). I'm still working on the more challenging fixes but it shouldn't be long before 1.0.0 is out.
bug report in 1.0.0 alpha
In TbNavBar, when I declare the widget and set collapse=true I got the following error message
"PHP Fatal error: Undefined class constant 'TYPE_DEFAULT' extensions/bootstrap/widgets/TbNavbar.php on line 160"
Thanks for the great extension
@giannis
Thanks for letting me know but I've already fixed that and it should work fine in the newest alpha release.
Navbar subitems
What about TbNavbar->items->++sub_items?
Like in screenshot
I think it will be nice
@fad
As far as I know this isn't a part of bootstrap (yet) so unless there's a really simple solution to provide this I won't support it before bootstrap itself actually supports it. I can't help but wonder why they don't support it though.
TbGridView not working with Yii 1.11
Hello,
I have a strange problem with the Alpha version of Bootstrap and the new Yii version (1.11): TbGridView does not work with AJAX. When trying to filter or sort it loads the entire page and does not perform an AJAX refresh.
I think it's a compatibility problem because when I downgrade to Yii 1.10 (downgrading Bootstrap is now difficult due to the change of prefix) everything works fine.
It does not seem a yii 1.11 bug either because if I switch to the normal zii widget (CGridView) everything is ok and the ajax loading works.
Any idea or bug-fixing on this?
Thanks
@edoardo849
Hey, I upgraded the demo to Yii 1.1.11 and tried paging a grid view. For me the AJAX loads worked perfectly. Could the problem be caused by cached data or similar?
TbGridView not working with Yii 1.11 because of class
@Chris83
Hey Chris, I've checked your website but you are using the old jquery.yiigridview.js (or at least you have that one loaded by default).
In the new one, there are this variables (around line 73-74):
[javascript] sortSelector = '#' + id + ' .' + settings.tableClass + ' thead th a.sort-link', inputSelector = '#' + id + ' .' + settings.filterClass + ' input, ' + '#' + id + ' .' + settings.filterClass + ' select';so, if I try to console.log the click event, with the zii.widget.CGridView works, but not with TbGridView. That is because the event is binded to a class
~~~
[css]
.sort-link
~~~
in
~~~
[html]
<a>that is not present in TbGridView. Now, if I add this class to TbGridView everything works as it should (no new page loaded, only AJAX).[SOLVED] TbGridView not working with Yii 1.11 because of class
@Chris83
I've added a css class to the file TbDataColumn on method renderHeaderCellContent()
OLD (line 31):
echo $sort->link($this->name, $label);NEW (line 31)
echo $sort->link($this->name, $label,array('class'=>'sort-link');@edoardo849
Hey, thanks for hunting down the cause of this issue. You forgot a parenthesis from your fix but otherwise it worked fine.
Checkboxlist ajax validation
Hi Chris, at start thanks for this awesome extension.
I have problem with client validation of checkboxlist and radio list ? Its doesnt work or i do it wrong?
@baranek
I've heard from all around that there are problems with AJAX validation but I haven't been able to reproduce this yet. If someone could look into this I would really appreciate it.
@Chris83 problems with ajax valildation
Yea, indeed the first problem I encoutered (I don't know if its the same as people reported) is that you only validate by ajax (even javascript) when using BootActiveForm of type Vertical. Im using Inline type and it doesnt work... thats a pity.
CException in setup for your new website demo
Chris check this: http://www.cniska.net/yii-bootstrap-dev/setup.html
@aleksdj
Thanks for noticing. I've fixed the demo now.
@Chris83
Did you read my fb comments on your demo page? do you usually read them (to keep posting there)
@aleksdj
I do read them once in a while. Not that often though.
Problems on demo
Hi Chris, the modal button is not working on the demo.
@mwotton
Thank you for letting me know. I added some javascript to prevent the page from scrolling up when clicking links and buttons. Seems like my script was a bit too eager to prevent click actions. This should now be fixed.
Collapse NavBar in the DEMO
Hi Cris,
I don't know if it's a expected behavior in the DEMO site, but in www.cniska.net/yii-bootstrap-dev/ when the NavBars are collapsed and you click in the collapse toggle button, it reacts to all the NavBars in the page.
GridView Button Column / afterDelete
It seems adding a custom afterDelete function in a GridView button column doesn't work in 1.0.0.
Printing the $this->buttons['delete'] array in TbButtonColumn / initDefaultButtons shows that the custom JS function is set correctly the first time.
However, the initDefaultButtons seems to be called a second time - then the JS code is just
function(){};???Regards,
Joachim
Good job!
I like it very much!
firefox & opera problems
Hi, all!
I have some problems in last versions firefox and opera.
In firefox: main menu random blink between dark and light when mouse over...
Look like this
In opera: modal doesn't work.
anyone has the same troubles?
It is not problem this nice ext, it's problem original bootstrap too.
ps: I use Win8 release previw.
Sorry for my English =\
@Flam: firefox & opera problems
I really can't see what should be wrong (except the colors). Can you try explaining the problem again? What random link? Where?
Yes, it's definitely an Opera 12 (Win/Mac) issue with Twitter Bootstrap. It has already been reported as issue - not sure why it's closed again - and there seem to be many other issues with Opera 12, too. Opera 11 had have no problems with TB btw.
Cheers, df
@yiidf: firefox & opera problems
Thanks for answer!
I mean abnormal mouseover effects of menu items. They blink(no link) when cursor moves over the menu.
U can see on the picture, that background (sometimes text color) of random elements changed. And when mouseout, styles not return to normal view. Its wrong behavior...
Popover
Hi Cris,
The Popover widget is not working when you set the buttonType to "submit".
Looks like the bootstrap.js expects an tag and the submit buttonType generates a tag.
Thanks for this great extension!
@Flam
Ooops, blink not link... I swear it was just "link" a few hours ago! jk :)
This seems to be a very unusual problem! All the menu bars are working just fine in different browsers incl. FF 14 on MacOs and it's hard to imagine why it's blinking on your side (Win)?
However, as you mentioned before this is not about Yii extension but Twitter Bootstrap in the first place, so please submit the issue to TB's github page if it hasn't been reported yet.
Devyn
Wanna say ~ Huge Thanks Chris83 ~
Very useful extension for everyone :)
I have one minor bug report!
Code generation in _search.php,
a commais missing after 'buttonType'=>'submit'<div class="form-actions"> <?php $this->widget('bootstrap.widgets.TbButton', array( 'buttonType'=>'submit' 'type'=>'primary', 'label'=>'Search', )); ?> </div>Thanks again!
ajax sort in bootGridView
in file: BootDataColumn.php, line: 31
CHANGE:
echo $sort->link($this->name, $label);TO:
echo $sort->link($this->name, $label, array('class'=>'sort-link'));class "sort-link" is required for ajax sorting. This css class is a handle for "{sort}" option in CGridView's "updateSelector" property.
Where is the Tabbable?
I see the alpha version has no TbTabbable widget? What I need to use to make the tabs?
One more question
I have several modules in my project. Some of them have to use your extention (back-end), some other - have not (front-end). How I can "block" loading bootstrap.css, bootstrap.js, etc. in my modules those don't need to use bootstrap?
@m00nk
Most recently someone asked a similar question in the forum and chris83 answered it - use
Yii::app()->getComponent('bootstrap')in init() of the controller where you need it; e.g. module's main controller. Of course, you need to change the main config file, too, so that bootstrap is not loaded for the entire webapp by default.
@m00nk: Where is the Tabbable?
TbTabs
Btw, it's mentioned in the list of recent changes for alpha version above, and TbTabs is also used in the new demo page though the Tabular section there is much shorter than in the old demo version. Cheers.
@yiidf, @m00nk
The reason tabbable was renamed was because it was more suitable from both Bootstrap's and Yii's side (think CJuiTabs). The 1.0.0 documentation is still under development. It will be more extensive once it's finished so stay tuned.
great
Thank you very much for the answers, and for that great extension too ;)
Hide Missing from Classes on Modal
Chris,
I was having a problem with modals covering my main navigation. In the twitter docs I see the Modal is created with a hide class to make it initially invisible and unclickable in the dom.
To fix in Yii Bootstrap I've altered line 48 of BootModal.php to read:
$classes = 'hide modal fade';
fancybox conflict?
Hi Chris
Thumbs up for your great work..
Maybe I'm the only one with this problem, but it seems that when i "load" bootstrap in my config/main - it conflicts with my fancybox2 widget.
Suddenly the jquery just doesnt work anymore, and the iframe is showed like it is not a popup.
Dont know if you have any idea at all what could be the reason for this?
Much thanks
Thank you for the new demo page. It is much helpful now than before.
V1.0.0 LIVE DEMO
Well done @chris... it's really starting to become fully fledged.
The live Demo is ALOT better thanks! I use it as reference all the time while developing. With a link to more info... I LIKE! PERFECT!
WELL DONE!! Keep up this stellar work!
Awesome
Just thought I would pass you yet another comment saying how great this extension is. New demo looks great.
Great Extension. Ran into one problem though...
First off, great work! This extension looks great, works great and will save me a ton of time!
I did run into one problem with the TypeAhead plugin. In your sample, you have "name" under the options array. The example wouldn't work this way for me. I had to move it to 'htmlOptions' to get your example to work.
<?php $this->widget('bootstrap.widgets.TbTypeahead', array( 'options'=>array( 'source'=>array('Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'), 'items'=>4, 'matcher'=>"js:function(item) { return ~item.toLowerCase().indexOf(this.query.toLowerCase()); }", ), 'htmlOptions'=>array( 'name'=>'typeahead', ) )); ?>Update: Forgot to mention I'm using the latest versions of this extension (1.0.0) and Yii (1.1.2).
Not sure if it's something on my end or not, but hopefully this will help someone out who may be struggling with the same issue.
Great extension! Authors website needs to be supported: Bandwidth limit exceeded
I'm checking the authors website and surprised that the http://www.cniska.net/yii-bootstrap/ website is not accessible anymore because of bandwidth limit exceeded!
Please give support to them. This extension helped me save tons of time in designing my apps too. And I'm pretty sure yours too. So I'm planning to give some donation through paypal.
Thanks to chris83
How much
How much you have to pay ? between i can give you some webspace for your donwloads 2 terrabyte in month downloads
@DocSnyder
Currently I pay 69€ per year and I now have a monthly bandwidth limit of 50GB. I do not have any downloads on my domain so the traffic is normal website traffic. It should now be good but feel free to donate if you wish to support this project.
disabled button
Hi, all!
I have one question...
When i add "disabled" property to button
$this->widget('bootstrap.widgets.TbButton', array('buttonType'=>'submit', 'type'=>'primary', 'label'=>'Submit', 'disabled' => TRUE ));
I get button with class "disabled" (looks like disabled) but this button yet works...
I can properly disable button only if I add htmlOptions => array('disabled' => 'disabled')
May be automatically adding "disabled" attribute to "input" will be better?...
ps: once more sorry for my English
cioxideru: no worry about it
cioxideru
you no need to worry about it. just open all file inside bootstrap folder with your favorite editor, then Find and Replace All all Word "Tb" to "Boot". several widget on your view might be error but it is less than you have to change all sintaks in view...
Bootstrap using along with giix extension
I am already using Giix extension with
'generatorPaths' => array( 'ext.giix-core', // giix generators ),Now how can I use bootstrap extension?
Problem with manage
After make a crud using the last version of bootstrap, I found a problem with the manage area. The screen don´t renderize well.
remote option in TbModal
Can U show me how to load dinamic content in modal window? please
Navbar
the navbar is always full width. no way to fixed width!
Width and responsive
Hi ShiblY KhaN
Firstly, please place all questions under the following forum so that we can help... and secondly, search the forum as I'm sure someone has already asked this question.
Here is the link to the forum... http://www.yiiframework.com/forum/index.php?/topic/23982-extension-bootstrap/
To answer your Q:
set protected/config/main.php
'bootstrap'=>array( 'class'=>'ext.bootstrap.components.Bootstrap', // assuming you extracted bootstrap under extensions 'responsiveCss'=>false, // or true if you want it to be responsive (i.e. change as screen becomes bigger and smaller) ),And then when you place your actual navbar, play around with the different settings to see what happens...
<?php $this->widget('bootstrap.widgets.BootNavbar',array ( 'brand'=>CHtml::encode(Yii::app()->params['navTitle']), 'brandOptions'=>array ( 'class'=>'brand', ), 'collapse'=>false, // change to true if you wish to collapse 'fixed'=>'false', // change to 'top' or 'bottom' or completely remove this line 'fluid'=>false, // if responsive and you wish to make fluid, change to true 'items'=>array... // the rest of the code ....some nice examples can be found here...
http://www.cniska.net/yii-bootstrap/
upgrading to v1.0.0
Is it painful to upgrade to newest version?
On first view, looks like widget configurations are same. Only class names should be changed?
Thank you!
upgrade
@Maris
for me it was absolutely easy. I really just had to change the Widget-Names...
thanks
@plm Thank you! ;)
How can i use this extenion only in a module?
hi,
How can i use this extenion only in a module? .when im preloading the bootstrap component inside config/main.php ie.,
'preload'=>array('log','bootstrap')its is also available in my modules also but the thing is i dont want the bootstrap style getting affected on my main app's layout.i only need bootstrap style inside a single module.
it tried this inside my AdminModule.php
$this->setComponents(array( 'bootstrap'=>array( 'class'=>'admin.extensions.bootstrap.components.Bootstrap', /* assuming you extracted bootstrap under extensions */ ), )); $this->preload=array( 'bootstrap' );it doesnt worked.please help me.
hi guys.it worked.
hi i used the preinit() function inside my AdminModule.php file.
class AdminModule extends CWebModule { public $preload=array('bootstrap'); protected function preinit() { $this->setComponents(array( 'bootstrap'=>array( 'class'=>'admin.extensions.bootstrap.components.Bootstrap', /* assuming you extracted bootstrap under extensions */ ), )); }Now the bootstrap style are applying only to my module
Thanks.
-Sirin
@sirin k
This also works in AdminModule.php:
public function init() { (...) $this->configure(array( 'preload'=>array('bootstrap'), 'components'=>array( 'bootstrap'=>array( 'class'=>'admin.extensions.bootstrap.components.Bootstrap', 'coreCss'=>true, 'responsiveCss'=>true, 'yiiCss'=>true, 'enableJS'=>true, ), ) )); $this->preloadComponents(); (...) }cool
cool.thanks for the reply.
-Sirin
bootstrap in one module
I just remove the 'bootstrap' from 'preload' from main.php and add the line
Yii::app()->getComponent('bootstrap');in my module into init() and now bootstrap works in my module only.
minified JS and CSS
Why not load *.min.js, even if YII_DEBUG==false?
How to load minified JS and CSS?
highlight form validation errors
If i use widget TbActiveForm(vertical type) with enable client validation, divs "control-group" no get class "error" or "success" by client validation (after submit form only)...
Horizontal type form highlight works right
With version 1.1 doesnt compile LESS
hello, I updated to new 1.1 version but it now throws this error:
LessCompiler: Failed to compile less file with message: parse error: failed at
@props: ~"@{arguments}".replace(/[\[\]]|\,\sX/g, '');bootstrap/less/../../../protected/extensions/bootstrap/lib/bootstrap/less/mixins.less on line 253.@aleksdj
This is because Bootstrap 2.1.1 uses inline javascript and it's not supported in lessphp. I haven't had time to check if the lessphp developer has implemented a fix for this but I know that he's aware of the issue.
Bootstrap Icons
Number of icons that you can use with Bootstrap elements is really impressive (140!). I wasn't able to find complete list of it in extension documentation, so I prepared my own list and want to share it:
adjust, align-center, align-justify, align-left, align-right, arrow-down, arrow-left, arrow-right, arrow-up, asterisk, backward, ban-circle, barcode, bell, bold, book, bookmark, briefcase, bullhorn, calendar, camera, certificate, check, chevron-down, chevron-left, chevron-right, chevron-up, circle-arrow-down, circle-arrow-left, circle-arrow-right, circle-arrow-up, cog, comment, download, download-alt, edit, eject, envelope, exclamation-sign, eye-close, eye-open, facetime-video, fast-backward, fast-forward, file, film, filter, fire, flag, folder-close, folder-open, font, forward, fullscreen, gift, glass, globe, hand-down, hand-left, hand-right, hand-up, hdd, headphones, heart, home, inbox, indent-left, indent-right, info-sign, italic, leaf, list, list-alt, lock, magnet, map-marker, minus, minus-sign, move, music, off, ok, ok-circle, ok-sign, pause, pencil, picture, plane, play, play-circle, plus, plus-sign, print, qrcode, question-sign, random, refresh, remove, remove-circle, remove-sign, repeat, resize-full, resize-horizontal, resize-small, resize-vertical, retweet, road, screenshot, search, share, share-alt, shopping-cart, signal, star, star-empty, step-backward, step-forward, stop, tag, tags, tasks, text-height, text-width, th, th-large, th-list, thumbs-down, thumbs-up, time, tint, trash, upload, user, volume-down, volume-off, volume-up, warning-sign, wrench, zoom-in, zoom-out
Hope, this will be usefull to someone.
Problem with manage
This problem was reported by zanforli in post 9718.
The problem is in the generated TbButton in the _search.php file.
The original code is:
<div class="form-actions"> <?php $this->widget('bootstrap.widgets.TbButton', array( 'buttonType'=>'submit' 'type'=>'primary', 'label'=>'Search', )); ?> </div>There is a missing comma and the following line should read:
'buttonType'=>'submit',Bootstrap icons list
@Trejder, I usually use this list to find out the icon I need.
Thanks
OMG @Sobit ... I wish I found that list 2 months back!!
But thanks, will defs help in the future!
Re: minified JS and CSS
@fad: Things like this should be reported on Bitbucket in issues list, if you only have a BB account.
I've added your idea as comment to issue #169. Hope this will be fixed soon, so we can use not only minified, but also responsive version of CSS (ach,
'responsiveCss'=>truein extension configuration will do the trick for responsive layout!).Re: Bootstrap icons list
@Sobit and @gdesmedt1: That is the only reason, I put this list here, as a comment. Because I wasn't aware that such list already exists. It is a little bit hard to be found, right.
BTW: here is a jsFiddle with code that use can use on your own site, to have a quick access to such list.
Bootswatch
There is a Bootswatch project, that contains pretty (free?) custom styles to Bootstrap.
The only problem, for me right now, is how to change *.less files, required to change overall look, without digging in extension sourece code. Could this be done outside extension?
@Trejder
Sure you can use bootswatch by setting coreCss to false and including the files manually. You can basically disable any css / js by configuring the extension.
Update?
Is there any update on this Plugin?
where?
Sorry guys, where is the extension link to download it?
Download link
@Giacomo: it's in the upper-right corner, just below the big green button. How does someone miss stuff like that?
Thanks!
@Sam Stenvall: you're right! i'm f***ing tired and it's my first ext! =D
Coffee is GOD! :]
@Sam Stenvall: Have you ever coded at around 2 a.m. or actually during your sleep over a keyboard? :] Hey, relax -- everyone sometimes does a stupid mistakes. After all, this is one of not so many things that distinguish us from the machines, right? :]
@Trejder @Giacomo @Sam ... funny!!!
One could use the browser's find function - like asking your browser where it hides the download button. Anyway, every once in a while one can't see the forest for all the trees.
yii-bootstrap with yii-booster
Hi Chris,
is there any plan to merge this extension with yii-booster?
@betelgeuse, @Chris
This would be a classic use-case for composer ;)
If yii-bootstrap would supply a composer file, YiiBooster could simple require yii-bootstrap and eg. yii-bootstrap-editable as a dependency.
Yii2 will force this (hopefully) anyway.
Yii-Booster
@betelgeuse, @schmunk: AFAIK Yii-Booster already contains Bootstrap (rewritten and extended) and yii boostrap editable. Plus a lot more. What would you like to merge to it?
@Trejder
in this case development efforts :)
Rewritten or required?
If yii-bootstrap is rewritten in yii-booster, then composer is not a real option I think.
If yii-bootstrap components are just required by yii-booster, eg. through class
BoosterXyz extends BoostrapXyz, then my use-case would apply. There's no need to merge the two projects, one simply requires the others.As mentioned, this will be the future way ... but we could do this now already :)
@schmunk
From Yii-Booster extension description ("Important" section): "Even though the library was built on top of Yii-Bootstrap and we have kept the configuration of YiiBooster and the naming conventions in honor of Chris, it is not compatible with it. We have made lots of changes plus many enhancements".
So it seems, that they have their own version (so called) of Twitter Bootstrap, but it is nearly completely compatibile with original Chris' Yii-Boostrap.
Though the idea of composer file is great, as for me, I don't see any way, it could be used in either Yii-Booster or Yii-Bootstrap. There is not dependency between these two extensions, if I'm not mistaken.
@Trejder @schmunk
Isn't it weird to say it seems to be nearly compatible when the developer had already said it is not? In terms of how to use features that both have in common as of now, there may not be any (or huge) differences but I wouldn't rely on it; especially not in the future. Booster already offers way more and may update bootstrap independently (from bootstrap) in the future, when there's updates from TB. I don't assume booster will wait until bootstrap is up-to-date.
Ultimately, this question should be answered by @Chris (yii-bootstrap) and @Antonio (yii-booster) though.
@all
Sorry for missing this discussion.
The thing is that when I started building YiiBooster I used Chris extension as I was required to build a boilerplate for projects startups and thought his work was a good asset to it.
After and due to the needs and requirements of developers at Clevertech the library of widgets I was building started to grow up to 60 widgets (and there are more to come: TbExtendedFilter, JSONStorage, TbColorPicker, etc) and I was forced to change the original library. From the original I have 'gii' totally untouched (once we reach a more 'relax' state, I am planning to change the templates to make something more 'realistic' for developers than the regular CRUD operations have in Yii).
The nature of Yii-Bootstrap didn't allow me to 'inject' my widgets without not modifying the original. In order for YiiBooster to be able to plug-into Yii-Bootstrap, the original should be refactored in order to allow something like a 'plugin' widget addition to it, otherwise I fear that at the growth YiiBooster is going it would be impossible.
I have made changes to Bootstrap component, TbActiveForm, TbInputHorizontal, TbInputVertical, and also the community has done a lot of work on it: including more widgets, enhancements like the Form Builder support and much more, up to 62 fixed issues and growing. So I am not really sure how can we do this right now.
When I first started creating YiiBooster with the idea to share it with all of you, I tried to communicate with Chris without success. He was very busy as we all are sometimes :), and we couldn't discuss this step from the very beginning. I decided and communicated my intentions to Clevertech that Chris should always be promoted like his work deserved and that's why his Yii-Bootstrap site together with him as the developer are present in YiiBooster site, and also, I kept the name of 'Bootstrap' together with 'Tb' naming conventions in his honor, instead of refactoring and name it 'Booster'.
The issue now is that YiiBooster has grown over the initial expectations and I do not know how can we create a win-to-win situation for both, this great extension and YiiBooster.
All ideas welcome
Bootstrap 2.2
Will this work with the new bootstrap version 2.2.1? Thanks
Stable release Twitter Bootstrap
Stable release 2.2.1 / October 31, 2012;
Yii-Bootstrap Last updated: Sep 19, 2012
@aaadkins, @Porcelanosa
I've upgraded the extension to include the latest release (2.2.1) of Bootstrap.
@Antonio and others regarding Yii-Booster and Yii-Bootstrap
I'm more than willing to merge all changes that Yii-Booster requires in order to keep this extension alive. I will continue working on this widget to provide the base for the Bootstrap integration for Yii, but this extension won't include any 3rd party libraries. That's where Yii-Booster could come in. We're still discussing this with Antonio so stay tuned.
Update
Great job!
nice extension
Such an awesome ext + great contribution.
Keep up your great job !
my take
Your extensions works great, thanks for the update.
If you are considering merging with booster, I must say I for one support the idea 100%. booster is more appealing with all the new additions that are available, and it will probably be really nice if you would work together on improving that one.
Thanks for keeping this up to date!
You guys are awesome!
Great works!
Thanks for nice extension.
mrs
TbMenu / TbDropdown labels always encoded
I'm trying to show a thumbnail as part of a TbMenu / TbDropdown but can't find a way to include markup that doesn't get encoded. Using 'label' and 'encodeLabel'=>true is still encoded, using a string instead of an array for an 'item' is ignored. TbNavbar accepts using a string instead of an array for an 'item'. Shouldn't TbMenu / TbDropdown?
File Field button
How to style a form file field button to primary-btn?
How to disable bootstrap for a single view?
How to disable bootstrap styles for a single view?
@sirin k, @swampone, @Stageline
Comment system is not for support questions! Do not report here not working websites or ask typical support-like questions. Use this forum topic instead. Comments here are related only to propose new features, report bugs or similar cases. Thanks!
Loading Bootstrap on Specific Actions
I modified the loading of this extension to allow more control over which actions initialize bootstrap. The wiki is located at: http://www.yiiframework.com/wiki/434/load-the-yii-bootstrap-extension-on-specific-actions/
test of 2.0
hi, Chris,
thanks for this update!
Just tested new 2.0.1 version under default yii app.
Have two questions:
1.bootstrap theme does not work until I manually call
Is it correct behavior or there is some config option to load bootstrap always?
2.In firebug console I have this message:
404 Not Found - http://localhost/webapp/assets/lib/bootstrap/less/mixins.less
Sure there is no lib directory I my assets. May be something wrong with paths?
Thank you.
@Vitalets
As of 2.0.0 Bootstrap shouldn't be preloaded anymore. This was previously causing some headaches with e.g. unit tests. Instead you need to define the 'bootstrap' path alias (being the relative path to where you unzipped bootstrap). You can find an example of this on the new Setup page.
This means that you need to register its files (css, js) manually. This can be done through the public methods in the Bootstrap component. So now instead of Bootstrap being loaded everywhere you can actually control where you want to load it without any hacks.
Also the lib folder was removed because the less-files were moved under assets so that they would be published with the other assets. Bootstrap now hashes it's assets by path so you can import less files from assets in your own less files.
As for the theme question, that's a minor bug. The method should indeed be called in the main layout (views/layout/main.php).
If you have any more questions look me up on irc (Crisu83) or leave a message and I'll get back to you as soon as possible.
mixines.less bug still here in 2.0.2
I still get "404 Not Found - http://localhost/webapp/assets/lib/bootstrap/less/mixins.less" with 2.0.2 version.
Re: mixines.less bug still here in 2.0.2
I fixed it by commenting first line in yii.css in assets folder of extension.
~~~
[css]
/@import url("../../lib/bootstrap/less/mixins.less");/
~~~
Filter vs Alias
I'm curious as to why you decided against using a filter as outlined in my wiki? http://www.yiiframework.com/wiki/434/load-the-yii-bootstrap-extension-on-specific-actions/
That way you get to keep the control of loading the necessary CSS and javascript files in the code of the extension, instead of loading everything at once in the template. Since you are generating bootstrap-CRUD code through Gii, it seems to be a better option.
Re: Re: mixines.less bug still here in 2.0.2
I fixed it by replacing
@import url("../../lib/bootstrap/less/mixins.less");by
@import url("../less/mixins.less");LESS import issue
The LESS import issue in yii.less was fixed in version 2.0.3. Thanks for pointing it out.
LESS import issue still exists in 2.0.3
Hi Christ, the LESS import issue still exists in version 2.0.3.
Btw what is the best way to register bootstrap css / js? Can this please be added to the doco?
Thanks
感谢提供！
新手一枚，我装上之后为什么页面加载要4s钟了？
Popover issue
Hi,
Can I place '$this->renderPartial('_view')' inside data-content attribute, or just raw text, kindly advise?
Regards,
Basem
Bug in yii.css
In the beggining of file yii.css is line:
@import url("../../lib/bootstrap/less/mixins.less");
Maybe this should be deleted?
less import
the bug still exists even on github.
to correctly import the file the path should be:
@import url("../less/mixins.less");but i don't see how it's useful importing a .less into a .css (resulting in browser warning)
Re: less import
Most likely Chris was using it with an on-the-fly compiler during development, but forgot to remove that line or compile it into CSS before release.
Either way, it's surely a bug which needs to be fixed. For now, the best solution would be to compile
yii.csswith a LESS compiler yourself, or remove the @import line completely.Load CSS/JS files
How and where to load the necessary CSS and JS files? Any best aproach?
TBGridView Disappear in paging, filtering and sorting
This issues was found in IE8
When i move from a page to other page with paging number. gridview not show correctly / disappear. also when i do the filter...
Any one can help me..?
Re: TBGridView Disappear in paging, filtering and sorting
@Andra, I had the same issue and fixed it by using renderPartial on ajax requests. The code is like:
$render = Yii::app()->request->isAjaxRequest ? 'renderPartial' : 'render'; $this->$render(...);@Sobit
Thanks friend...
It works now... :D
wizard function
your component is very well.
Can you implement the wizard function?
http://yii-booster.clevertech.biz/components.html#wizard
Re: wizard function
Why not just use YiiBooster then?
Re: wizard function
Because I have already started working with this widget and I get along well
@Giancarlo
You have sources of
YiiBoosterandYiiBootstrap. Why don't you fork the second one and implement this yourself? It should be a copy-paste process for 70% of work and coding, changing, adapting for the rest 30%.Can I use html tags in twitter-bootstrap popover data-content?
I like use html tags in popover.
I like use a similar syntax:
$desc = 'click me'; $content = CHtml::link('Google', 'http://www.google.com', array() ); return CHtml::link($desc, '#', array ('onclick'=>'return false;' ,'html'=>'true' //force to show data-content in html mode , 'data-content'=>$content ,'rel'=>'popover' ,'data-placement'=>'bottom' ,'data-original-title'=>'Title') );It's possible?
Re: Can I use html tags in twitter-bootstrap popover data-content?
Use
htmlspecialcharsto encode content.Re: Use htmlspecialchars to encode content
does not work
@giancarlo @pmaselkowski -- content with html tags in popover
Bootstrap adds a simple popover() call that is listening to rel=popover by default and it doesn't display any html. However, you can add your own js-popover call manually and make sure it does display html tags.
first, you have to change the value for the rel attribute
'rel'=>'myPopover'second, you have to call popover() manually
[javascript] $('[rel="myPopover"]').popover({ html: true });and then you can put whatever html tags inside data-content!
DateTime Picker with Append Calendar icon
A bit of contributing, here is a link for a CJuiDateTimePicker in Bootstrap style. I added an append to the end of the DateTimePicker with Calendar Icon:
Link to download datetimepicker
Re: DateTime Picker with Append Calendar icon
Edgar,
can you explain how to use?
Can you how to use?
Use CalendarWidget
Copy it to your Extensions folder and insert this code into your form:
$this -> widget('CJuiDateTimePicker', array( 'language' => Translate::dateLang(), 'model' => $model, // Model object 'attribute' => 'birthDate', 'options' => array( 'mode' => 'date', 'changeYear' => true, 'changeMonth' => true, 'yearRange' => '1900:2200', 'dateFormat' => 'yy-mm-dd', 'timeFormat' => '', 'showTimepicker' => false, ), 'htmlOptions' => array( 'placeholder' => 'Birtday Date', 'style' => 'width:180px !important;', 'class'=>'input' . ( $model->getError('birthDate') ? ' error' : '') ), ));Re: Use CalendarWidget
I have commented:
//Translate::dateLang(),because it return an error.
But now, i see the component in japanese language
TCKeditor and file upload
Hi,
before bootstrp I use ckeditor and kcfinder together to manage and upload images(inside ckeditor)
in bootstrap i have ckeditor and dont need to add ckeditor to extentions,
but i cant'nt attach kcfinder to bootstrap.ckeditor!
how can i do?
Navbar bootstrap.widgets.TbNavbar breaks cgridview under IE
Hi all,
I just like to highlight that after setting up Navbar (bootstrap.widgets.TbNavbar) it broke the cgridview in Yii. Namely, the issue is when you try to sort or filter the whole cgridview disappears.
If anybody has seen this and knows how to fix it please share.
Checkbox
pre define checked not working:
$form->checkBoxListRow($model, 'intervals',CHtml::listData($data['intervals'],'id','inumber'),array('checked'=>'checked')
suggestion for tooltip
i suggest you change the tooltip selector to $selector : 'a[rel*=tooltip]'; so that other items can be used in the Rel as well.
Loading CSS/JS Files
For some reason the extension doesn't include the necessary CSS/JS files when being used. You'll need to use this:
Is it possible to disable encoding of navbar label?
Hi. I'm trying to put html content into navbar label. Is it possible? I've tried the following:
<?php $this->widget('bootstrap.widgets.TbNavbar', array( 'items'=>array( array( 'class'=>'bootstrap.widgets.TbMenu', 'items'=>array( array( 'encodeLabel'=>false, 'linkOptions'=> array('encode'=>false), 'label'=> '<i class="icon-user"></i>' . $this->user->email, 'url'=>'', 'items'=>array( array('label'=>'Account info', 'url'=>'#'), '---', array('label'=>'Logout', 'url'=>'#'), ) ), ), ), ), )); ?>What am I doing wrong?
drop downs not working in collapse mode
in collapse mode when I click on a drop down the container does not auto extend and the expanded menu goes behind it and cannot be seen properly. Is anybody else experiencing this issue?
iPhone Navbar
Yes, it is discussed here and here. AFAIK the only workaround so far is to leave the menu open.
there is a fix
someone has already posted a fix:
in the TbNavbar.php file on line 140 (at least in phpstorm) the line should be:
'htmlOptions'=>array('class'=>'nav-collapse collapse'),this fixes the problem I think
Here is the fix itself:
https://bitbucket.org/Crisu83/yii-bootstrap/issue/221/responsive-tbnavbar-css-class
Without docs
Unfortunately their developer stop the project.
We not have no more bootstrap updatings.
We not have no more additional features.
We not have no more docs. The site is down.
Developers... come back.
@Victor Lacerda Azevedo
The developers moved on to another extension based on a more current version of Bootstrap. Check this out: yiistrap; official homepage:
http://www.getyiistrap.com/ (current bootstrap for yii)
Yiiwheels, an extension for yiistrap providing all kinds of plugins that are not part of the original bootstrap; e.g. extended grids, jquery stuff:
http://yiiwheels.2amigos.us/
Developer Is Not Professional
It would appear that the developer of this has moved on to a new version at Yiistrap (see the post #18694). The documentation there may be of some help. However, given how unprofessionally the transition from the old version was handled and the apparently very cavalier treatment of users, I won't use either the new or the old, and would not recommend it.
Documentation mirror
Having used this in an extensive project, finding out that the documentation has been completely taken offline is not really nice.
I've contacted Christoffer and he pointed out that there's a copy of the docs in the "demo" section of the BitBucket repository. I've put it online here: http://docs.siquo.net/yii-bootstrap/ and will keep it there for as long as I can.
Edited comment to be a bit nicer.
Docs availability
@Siquo thank you very much for setting up the documentation.
If you have any questions, please ask in the forum instead.
Signup or Login in order to comment.