Can’t wait for this! It is looking really good.
Can’t wait for this! It is looking really good.
Thanks for the wonderful extension.
I’m new to yii as well as bootstrap.
Would like to know if it is possible to have a simple login form (username, password) on the BootNav?
In the upcoming release it will be possible. However, in 0.9.7b it isn’t yet possible.
Hi Chris,
this looks like another great extension coming from you (I love Rights!), I’m looking forward to the next release which I will try to use in a current project. 
However, I would like to switch my whole project to the Bootstrap framework and to avoid duplication CSS code etc., I’d like to ask for… well, a best practice. 
Normally, I would download the bootstrap files from Twitter’s Github Page (I’m not allowed to put any links with my three posts ) and then simply use this in my theme. So I would create a theme in application/themes/mynewtheme/, and save the css-files there.
Now, if I’d like to use this awesome extension, there are css-files delivered with it, too.
Maybe the first question would be:
Are the CSS-Files in /vendors/bootstrap/ actually used, or only this one: /assets/css/bootstrap.min.css?
I think this .css would not contain anything which is not also available within the new bootstrap-based theme I’d create, is that right?
Then, I think the only thing that changes when already using the Bootstrap framework for layout purposes is that I would simply leave out…
<head>
.....
<?php echo Yii::app()->bootstrap->registerCoreCss(); ?>
</head>
…and afterwards do everything else as documented?
Or is there something I have to look out for because it’s not as simple as that?
@christoph: The css files under vendors/bootstrap/… are not used. This is because you need to publish files under your protected folder in order to use them.
You have a couple of options, you can register the bootstrap.min.css by using Yii::app()->bootstrap->registerCoreCss() ( registerCss() since 0.9.8 ) and register your own style afterwards in which you can override the rules defined by bootstrap. This is by far the easiest solution.
Alternatively you can use LESS by creating a less folder under your www root and create a blank styles.less file there. On the first line of your in that file you can then import bootstrap.less:
@import "../protected/extensions/bootstrap/vendors/bootstrap/lib/bootstrap.less";
Your less here ...
This way you can use all the variables, mixins, etc. provided by Bootstrap in your LESS. Of course you’re not quite done yet, you still need compile your LESS so that the browser understands it.
For compiling LESS I normally use my Yii LESS extension:
http://www.yiiframework.com/extension/less/
You could also use the native LESS compiler:
I’d recommend learning LESS over using the CSS as it gives a lot more control over Bootstrap and it allows you to fairly easy customize Bootstrap for your needs.
I hope this helps.
Hi Chris,
thanks a lot, this is indeed very helpful.
looking forward to the release.
<?php $this->widget('BootNavbar', array(
'items'=>array(
array(
'class'=>'bootstrap.widgets.BootMenu',
'items'=>array(
array('label'=>'Home', 'url'=>array('site/index')),
array('label'=>'About', 'url'=>array('site/page','view'=>'about')),
array('label'=>'Gallery', 'url'=>'#', 'items'=>array(
array('label'=>'Action', 'url'=>'#'),
array('label'=>'Another action', 'url'=>'#'),
array('label'=>'Something else here', 'url'=>'#'),
array('label'=>'Separated link', 'url'=>'#'),
)),
array('label'=>'Contact', 'url'=>array('site/contact')),
),
),
'<form class="navbar-search pull-left" action="">
<input type="text" class="search-query span2" placeholder="Search">
</form>',
array(
'class'=>'bootstrap.widgets.BootMenu',
'htmlOptions'=>array('class'=>'pull-right'),
'items'=>array(
array('url'=>Yii::app()->getModule('user')->loginUrl, 'label'=>Yii::app()->getModule('user')->t("Login"), 'visible'=>Yii::app()->user->isGuest),
array('url'=>Yii::app()->getModule('user')->registrationUrl, 'label'=>Yii::app()->getModule('user')->t("Register"), 'visible'=>Yii::app()->user->isGuest),
array('url'=>Yii::app()->getModule('user')->profileUrl, 'label'=>Yii::app()->getModule('user')->t("Profile"), 'visible'=>!Yii::app()->user->isGuest),
array('url'=>Yii::app()->getModule('user')->logoutUrl, 'label'=>Yii::app()->getModule('user')->t("Logout").' ('.Yii::app()->user->name.')', 'visible'=>!Yii::app()->user->isGuest),
),
),
),
)); ?>
The only javascript error i encountered was:
Uncaught TypeError: Object [object Object] has no method ‘on’
$(function () { $('body').on('click.button.data-api', '[data-toggle^=button]', function ( e ) { $(e.target).button('toggle') }) })}( window.jQuery )
@guoliang86: Bootstrap requires jQuery 1.7.1, you’re running an older version of Yii (1.1.9 comes with jQuery 1.7.1). Please update your framework and try again. This limitation is not in my extension but in Bootstrap itself as it uses jQuery.on.
Hi, i really appreciate your work, but i have a question: Could i use my own .js files, it’s because i have one script.js for all the libraries i use in my project and i don’t want to “create” all the js dinamically, just one call to server, not one per file. Thank you very much!!!
I see your point but that’s not the correct solution. Instead of you should have ClientScript to combine all the JavaScript into a single file and optionally optimize it as well.
Check out the EClientScript extension:
Bootstrap 0.9.8 BETA2 is now live!
Download it here:
http://www.yiiframework.com/extension/bootstrap/files/bootstrap-0.9.8-beta3.zip
(Updated link to point to the newest BETA release)
Please upgrade and try out the new improvements. I’d love to get some feedback before the official release. I’m sorry that aren’t any installation instructions available yet. I will post them here when they’re ready.
What’s new?
Upgraded to Bootstrap 2
Supports all native Bootstrap JavaScript plugins
Automatic plugin registration
Plugin registration API
BootActiveForm improvements (with support for all different form types)
BootNavbar (BootNav) improvements (with support for Collapse and BootMenu)
BootMenu rewrite (with support for Dropdowns)
BootTabbed (BootTabs) rewrite (uses BootMenu)
BootThumbs (BootMediaGrid) rewrite
And much more!
If you haven’t seen the new demo, go check it out:
http://www.cniska.net/yii-bootstrap/
Enjoy!
Hi,
Thank you very much for updating this extension and working on it so quickly.
I’ve upgraded to the latest beta and have two questions right off the bat:
How do I get AJAX content in the tabs? The when I click on a tab that makes an AJAX call, the request isn’t performed. This used to work fine using the zii tabs.
I see your demo is now responsive. That’s great! Care to share the secret? 
I’ve grabbed a copy of bootstrap-responsive.css, and now when I collapse my browser my BootNav doubles in height but the ‘pulldown’ button on the right doesn’t appear. Nor do my grids collapse at all. I’ve looked at the Twitter docs / examples on Github and my rendered source looks good (to me), but I hope it’s a piece of the docs you could expand on.
The default filters boxes on grid columns are set to a static 210px which is HUGE when you’re dealing with a 1 letter column.
Thanks again, Chris!
Hi Chris,
I’m new to yii and am trying to install your extension to my current setup (yii-1.1.9). I have gotten pass the installation steps up to “Add the following to your main layout”:
<head>
.....
<?php echo Yii::app()->bootstrap->registerCoreCss(); ?>
</head>
And get the following error:
Bootstrap and its behaviors do not have a method or closure named "registerCoreCss".
My config:
<?php
// uncomment the following to define a path alias
// Yii::setPathOfAlias('local','path/to/local-folder');
// This is the main Web application configuration. Any writable
// CWebApplication properties can be configured here.
return array(
'basePath'=>dirname(__FILE__).DIRECTORY_SEPARATOR.'..',
'name'=>'My Web Application',
// preloading 'log' component
'preload'=>array(
'log',
'bootstrap',
),
// autoloading model and component classes
'import'=>array(
'application.models.*',
'application.components.*',
'ext.bootstrap.widgets.*',
),
'modules'=>array(
// uncomment the following to enable the Gii tool
'gii'=>array(
'class'=>'system.gii.GiiModule',
'password'=>'1qaz',
// If removed, Gii defaults to localhost only. Edit carefully to taste.
'ipFilters'=>array('127.0.0.1','::1'),
'generatorPaths'=>array(
'bootstrap.gii', // since 0.9.1
),
),
),
// application components
'components'=>array(
'user'=>array(
// enable cookie-based authentication
'allowAutoLogin'=>true,
),
// uncomment the following to enable URLs in path-format
'urlManager'=>array(
'urlFormat'=>'path',
'rules'=>array(
'<controller:\w+>/<id:\d+>'=>'<controller>/view',
'<controller:\w+>/<action:\w+>/<id:\d+>'=>'<controller>/<action>',
'<controller:\w+>/<action:\w+>'=>'<controller>/<action>',
),
'showScriptName'=>false,
'caseSensitive'=>false,
),
'db'=>array(
'connectionString' => 'sqlite:'.dirname(__FILE__).'/../data/testdrive.db',
),
// uncomment the following to use a MySQL database
/*
'db'=>array(
'connectionString' => 'mysql:host=localhost;dbname=testdrive',
'emulatePrepare' => true,
'username' => 'root',
'password' => '',
'charset' => 'utf8',
),
*/
'errorHandler'=>array(
// use 'site/error' action to display errors
'errorAction'=>'site/error',
),
'log'=>array(
'class'=>'CLogRouter',
'routes'=>array(
array(
'class'=>'CFileLogRoute',
'levels'=>'error, warning',
),
// uncomment the following to show log messages on web pages
/*
array(
'class'=>'CWebLogRoute',
),
*/
),
),
'bootstrap'=>array(
'class'=>'ext.bootstrap.components.Bootstrap',
),
),
// application-level parameters that can be accessed
// using Yii::app()->params['paramName']
'params'=>array(
// this is used in contact page
'adminEmail'=>'webmaster@example.com',
),
);
I unzip the extension inside protected/extensions/bootstrap. What could have caused this problem? Thanks.
Nevermind Chris. My bad, I’m using the steps for 0.9.7b on 0.9.8-beta2
Thanks for this awesome extension!
Hi,
use:
<?php echo Yii::app()->bootstrap->registerCss(); ?>
100% with,
Chris,
Not sure if you want beta issues here or in bitbucket, but a couple things I’ve noticed on the beta2 demo:
On Chrome and iOS, hint text in the BootActiveForm samples don’t clear on focus.
On Firefox, the BootActiveForm link on the BootNavBar wraps, and gets pushed down over the content of the demo.
Also, this is freaking awesome. Freaking. Awesome.
-Foo
Hey All,
I’ve finished the setup instructions for the 0.9.8 BETA and they can now be found here:
http://www.cniska.net/yii-bootstrap/setup.html
I have also uploaded a new BETA release which can be downloaded here:
http://www.yiiframework.com/extension/bootstrap/files/bootstrap-0.9.8-beta3.zip
Please report any issues you find here or on Bitbucket.
Thanks in advance to those that help with the beta testing. I really appreciate it.
@rums: Bootstrap’s tab plugin does not support AJAX so for now it’s not possible to load tabs with AJAX.
As for the responsive layout, grab the latest release, 0.9.8 BETA 3. In the Bootstrap component configuration set responsiveCss to true and in the BootNavbar widget configuration set collapse to true. That’s it.
PS. To remove the padding-top from the body element (that you might have added to compensate for the height of the navbar) on narrow layouts you can add the following CSS to the end of your stylesheet:
@media (max-width: 980px) {
body {
padding-top: 0px;
}
}
@foo: It sounds like those bugs you’ve encountered are directly releated to Bootstrap itself. I tried the demo on the newest Firefox on windows and everything seemed to look as it should.