Yii Framework Forum: [EXTENSION] Bootstrap - Yii Framework Forum

Jump to content

  • (45 Pages)
  • +
  • « First
  • 4
  • 5
  • 6
  • 7
  • 8
  • Last »
  • You cannot start a new topic
  • You cannot reply to this topic

[EXTENSION] Bootstrap Bringing together Yii and Twitter Bootstrap

#101 User is offline   Thadon 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 1
  • Joined: 28-January 12

Posted 07 February 2012 - 04:00 PM

 Chris83, on 07 February 2012 - 02:06 PM, said:

As mentioned above I'm developing the new release for this extension with support for Bootstrap 2.

Here's a working demo with some of the polished and new widgets in the upcoming release:

Enjoy!


Can't wait for this! It is looking really good.
0

#102 User is offline   ronanggl 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 6
  • Joined: 21-November 11
  • Location:Singapore

Posted 08 February 2012 - 04:40 AM

@Chris83

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?
0

#103 User is offline   Chris83 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 440
  • Joined: 27-February 10
  • Location:Helsinki, Finland

Posted 08 February 2012 - 04:47 AM

 ronanggl, on 08 February 2012 - 04:40 AM, said:

@Chris83

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.
Best regards,
Chris

My contribution to the Yii community:
Account | Yiistrap | Auth | Bootstrap | NordCms | Rights | LESS | SEO | Img

Follow me:
Twitter | GitHub | Bitbucket
0

#104 User is offline   christoph 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 8
  • Joined: 29-December 11

Posted 08 February 2012 - 11:46 AM

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?
0

#105 User is offline   Chris83 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 440
  • Joined: 27-February 10
  • Location:Helsinki, Finland

Posted 08 February 2012 - 01:44 PM

@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.yiiframew...extension/less/

You could also use the native LESS compiler:

http://lesscss.org/

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.
Best regards,
Chris

My contribution to the Yii community:
Account | Yiistrap | Auth | Bootstrap | NordCms | Rights | LESS | SEO | Img

Follow me:
Twitter | GitHub | Bitbucket
1

#106 User is offline   christoph 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 8
  • Joined: 29-December 11

Posted 08 February 2012 - 06:03 PM

Hi Chris,
thanks a lot, this is indeed very helpful. :)
0

#107 User is offline   ronanggl 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 6
  • Joined: 21-November 11
  • Location:Singapore

Posted 09 February 2012 - 02:03 AM

 Chris83, on 08 February 2012 - 04:47 AM, said:

In the upcoming release it will be possible. However, in 0.9.7b it isn't yet possible.


looking forward to the release.
0

#108 User is offline   ronanggl 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 6
  • Joined: 21-November 11
  • Location:Singapore

Posted 09 February 2012 - 03:29 AM

Quote

@guoliang86
Could you please post your code under the discussion thread so that I can take a look and figure out what's causing the issue. Please also check that you don't have any JavaScript errors on that page, because that would explain it.


<?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'

- bootstrap-button.js:93

$(function () {    $('body').on('click.button.data-api', '[data-toggle^=button]', function ( e ) {      $(e.target).button('toggle')    })  })}( window.jQuery )

0

#109 User is offline   Chris83 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 440
  • Joined: 27-February 10
  • Location:Helsinki, Finland

Posted 09 February 2012 - 05:56 AM

@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.
Best regards,
Chris

My contribution to the Yii community:
Account | Yiistrap | Auth | Bootstrap | NordCms | Rights | LESS | SEO | Img

Follow me:
Twitter | GitHub | Bitbucket
0

#110 User is offline   OniAkai 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 1
  • Joined: 07-February 12

Posted 09 February 2012 - 09:08 AM

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!!!
0

#111 User is offline   Chris83 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 440
  • Joined: 27-February 10
  • Location:Helsinki, Finland

Posted 09 February 2012 - 09:15 AM

 OniAkai, on 09 February 2012 - 09:08 AM, said:

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:
http://www.yiiframew.../eclientscript/
Best regards,
Chris

My contribution to the Yii community:
Account | Yiistrap | Auth | Bootstrap | NordCms | Rights | LESS | SEO | Img

Follow me:
Twitter | GitHub | Bitbucket
0

#112 User is offline   Chris83 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 440
  • Joined: 27-February 10
  • Location:Helsinki, Finland

Posted 09 February 2012 - 09:24 AM

Bootstrap 0.9.8 BETA2 is now live!

Download it here:
http://www.yiiframew...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!
Best regards,
Chris

My contribution to the Yii community:
Account | Yiistrap | Auth | Bootstrap | NordCms | Rights | LESS | SEO | Img

Follow me:
Twitter | GitHub | Bitbucket
0

#113 User is offline   rums 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 13
  • Joined: 23-December 10

Posted 09 February 2012 - 07:38 PM

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:

1. 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.

2. 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.

3. 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!
0

#114 User is offline   Osh 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 2
  • Joined: 10-February 12

Posted 10 February 2012 - 02:19 AM

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.
0

#115 User is offline   Osh 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 2
  • Joined: 10-February 12

Posted 10 February 2012 - 03:44 AM

Nevermind Chris. My bad, I'm using the steps for 0.9.7b on 0.9.8-beta2 :)
Thanks for this awesome extension!

 Osh, on 10 February 2012 - 02:19 AM, said:

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.

0

#116 User is offline   luc 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 211
  • Joined: 22-June 10
  • Location:france

Posted 10 February 2012 - 03:46 AM

Hi,
use:
<?php echo Yii::app()->bootstrap->registerCss(); ?>

Hey Ho !
Let's go !
1

#117 User is offline   Boula7ya El Fertass 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 17
  • Joined: 27-January 11
  • Location:The Netherlands

Posted 10 February 2012 - 03:38 PM

 joedwy, on 17 December 2011 - 03:25 PM, said:

Hey @Chris83 --- just wanted to drop by to say how much I appreciate your Bootstrap extension. Great stuff... it has saved me a bunch of time. Awesome! I'd have posted it to the extension page, but I'm too new. :-)

And now I see that you've made a LESS extension... thanks again! For anyone else out there using the Bootstrap extension, you might want to check out the LESS extension as well: http://www.yiiframew...extension/less/

Really liking the vibe here in the Yii community. Seems to be an unusual combination of talented, friendly, and helpful people. Some other frameworks I've used had a very different feel.



100% with,
0

#118 User is offline   foo 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 1
  • Joined: 07-February 12

Posted 10 February 2012 - 04:52 PM

Chris,

Not sure if you want beta issues here or in bitbucket, but a couple things I've noticed on the beta2 demo:

1) On Chrome and iOS, hint text in the BootActiveForm samples don't clear on focus.

2) 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
0

#119 User is offline   Chris83 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 440
  • Joined: 27-February 10
  • Location:Helsinki, Finland

Posted 10 February 2012 - 05:26 PM

Hey All,

I've finished the setup instructions for the 0.9.8 BETA and they can now be found here:
http://www.cniska.ne...trap/setup.html

I have also uploaded a new BETA release which can be downloaded here:
http://www.yiiframew...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.
Best regards,
Chris

My contribution to the Yii community:
Account | Yiistrap | Auth | Bootstrap | NordCms | Rights | LESS | SEO | Img

Follow me:
Twitter | GitHub | Bitbucket
0

#120 User is offline   Chris83 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 440
  • Joined: 27-February 10
  • Location:Helsinki, Finland

Posted 10 February 2012 - 05:29 PM

@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.
Best regards,
Chris

My contribution to the Yii community:
Account | Yiistrap | Auth | Bootstrap | NordCms | Rights | LESS | SEO | Img

Follow me:
Twitter | GitHub | Bitbucket
0

Share this topic:


  • (45 Pages)
  • +
  • « First
  • 4
  • 5
  • 6
  • 7
  • 8
  • Last »
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users