[Chris83]

Hello,

This is the discussion thread for my latest extension, Bootstrap.

What is Bootstrap?
Bootstrap is a toolkit to kickstart development of web applications. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation and more. Bootstrap has been developed by Twitter, it is open source and can be found on Github.

Why an extension?
After trying out Bootstrap I immediately decided that it was time to write an extension to allow developers to easily implement this awesome toolkit in their existing and upcoming Yii-projects.

Download the extension here:
http://www.yiiframew...sion/bootstrap/

Fork me Bitbucket:
https://bitbucket.or.../yii-bootstrap/

More about Bootstrap here:
http://twitter.github.com/bootstrap/

Try out the demo here:
http://www.cniska.ne...bootstrap/demo/

Enjoy!

[Mukesh]

blueprint on steroids. Thanks for the extension

[bigardusklei]

Hi!!! I'm using also bootstrap on a couple of projects, but I'm using it with less.js... is your extension compatible with it?

Thanks!

[Chris83]

bigardusklei, on 26 September 2011 - 05:36 AM, said:

Hi!!! I'm using also bootstrap on a couple of projects, but I'm using it with less.js... is your extension compatible with it?

Thanks!

I'm actually also using it with LESS but I'm using it trough my own less extension (that I haven't published yet) which uses Agar's LESS compiler, less.php (https://github.com/agar/less.php).

However, I don't see why you couldn't use less.js with the extension. The less-files are included in the less-folder.

Let me know if you run into any issues.

[thyseus]

Are you already developing a "topbar" widget? If not - i would do it and send it to you.

The CMenu Widget is already working fine using this layout:

<div class="topbar">
	<div class="topbar-inner">
		<div class="container">
		<?php $this->widget('zii.widgets.CMenu',array(
			'items'=>array(
				...
			),
		)); ?>

		</div>
	</div>
</div>

But it would even be cooler using a Widget. I think about something like this:

 $this->widget('ext.bootstrap.widgets.topbar',array(
			'items'=>array( ... ) );

Of course, you do not always ONLY want a Menu in there. For example, you want infos about
the current logged in user, a search input field, and so-on. This could be accomplished
by something like this:

 $this->widget('ext.bootstrap.widgets.topbar',array(
			array( 
'class' => 'CMenu',
'items' => ...
),
array(
'class' => 'Searchbox'     // render a search box
),
array(
'class' => 'UserInfo'      // render info about the current logged in user
'template' => Yii::t('You are currently logged in as {username}', array('{username}' => $user)),
),
),

What do you think?

Edit: with a little bit of adjustment i also got the drop-down menu working. Nice !
Would also go into the navbar extension. "secondary nav" is also supported by bootstrap!

[Chris83]

@thyseus: Initially I thought that the top bar is a bit too complicated to be a widget but I need to re-think it. Maybe it would be possible to do it as a widget after all. It could also be done with beginWidget / endWidget, but then it would be really simple.

Edit: Another solution could be to use a template string to achieve this.

Any thoughts about the extension in general?

[thyseus]

Chris83, on 26 September 2011 - 06:54 AM, said:

Any thoughts about the extension in general?

The extension in general Rocks!

Especially i like the BootActiveForm and the one-liner-widgets xxxxBlock Widgets. They
make form building even easier and quicker than the standard CActiveForm.

I will make a "topbar" widget. The template string is a very good idea, i will do it this way. I post it as soon as it is done
for you to check.

Another idea would be to do 'gii' templates that generate ready-to-use BootActiveForm _form.php files.

[thyseus]

As promised, here my first pre-test-alpha version attached to this post.

Please let me know if this works for you.

Usage _should_ be self-explanatory - but if you are going to include this in your bootstrap package i will write
examples and Documentation for it...

Attached File(s)

•  BootTopbar.php (6.26K)
  Number of downloads: 90

[Chris83]

@thyseus: Seems a bit complicated, wouldn't it have been better to extend CMenu? The idea with BootWidget was to provide common functionality for registering JavaScript libraries for the widgets. The topbar doesn't require any extra JS so it could as well extend CMenu. I'll see what I can do about the topbar but it isn't highest on my priority list. I'd also like separate widgets for the searchbox, menu, topbar, etc.

[thyseus]

Not exactly. There is a small javascript snippet that needs to be inserted by the assetManager, and some special
css classes need to be appended to the <ul> and <li>. Also a <a> with a special class needs to be assigned.

This is not possible with the vanilla CMenu. And i did not want a special Class just for the Menu. Moving
these few functions into the widget should do it, i think.

So it could extend from CWidget, thats true

Of course, if you got a better approach with separate widgets, i would glad use them.
Until then i stick to my approach.

[Chris83]

@thyseus: Fair enough, I'll see what I can do once I have time to take a look at the topbar.

[jacmoe]

Really awesome extension!
Totally needed for a totally non-designer like me.

[Chris83]

Thanks for all the feedback on this extension.

Version 0.9.1 is now live:
http://www.yiiframew...trap-0.9.1.zip/

What's new?

• BootFlash (flash message widget)
  
• BootstrapGenerator (Gii CRUD templates)
  
• Various improvements to BootActiveForm

Enjoy!

Please note that the BootGridView has been moved into the following sub-package:
ext.bootstrap.widgets.grid

[zitter]

hi, is there a way to disable/do not display <label> and/or outer div.clearfix for some inputs? Sometime I need to get two or more inputs on the same row and it seems it is impossible now.
The "single line of code" is cool, but sometime it cannot be very flexible

EDIT: Looking at the code it seems it is possible. Now I have to find out how to pass $label=false from view

[Chris83]

zitter, on 06 October 2011 - 03:48 PM, said:

hi, is there a way to disable/do not display <label> and/or outer div.clearfix for some inputs? Sometime I need to get two or more inputs on the same row and it seems it is impossible now.
The "single line of code" is cool, but sometime it cannot be very flexible

EDIT: Looking at the code it seems it is possible. Now I have to find out how to pass $label=false from view

The idea with the one-line widget was to only cover the most common cases, so in your case I would just write the code the old fashion way.

[Chris83]

Bootstrap can now be forked on Bitbucket:
https://bitbucket.or...3/yii-bootstrap

Feel free to send me pull requests and I will review your patch to see if it should be merged into the master branch.

Bootstrap can also be found on Ohloh so please go tell Ohloh if you use this project by pressing the "I USE THIS" button.

https://www.ohloh.net/p/yii-bootstrap

[lehandr]

Great extension! Thank you.

I want to see a twipsy tip on some input form element on focus event, but jquery.boottwipsy.js does not take into account a "trigger" option.

Also the default $selector is '.twipsy', but bootstrap.min.css has declared class .twipsy in it. So when I add this class to any form input element, I see that font decrease to 11px.

[Chris83]

lehandr, on 12 October 2011 - 10:21 AM, said:

Great extension! Thank you.

I want to see a twipsy tip on some input form element on focus event, but jquery.boottwipsy.js does not take into account a "trigger" option.

Also the default $selector is '.twipsy', but bootstrap.min.css has declared class .twipsy in it. So when I add this class to any form input element, I see that font decrease to 11px.

@lehandr: Twipsy was originally only meant for links but I can see why you'd like to have it on a focus event. I have to think about adding the functionality when I have time. Regarding your selector issue, you have two options. You can either specify the selector yourself by giving it as an "argument" to the widget or you can override the .twipsy class in your own CSS.

[lehandr]

I have a form with many input fields. I want to use ajax validation for fields "username" and "email", but not for other fields!
When I use CActiveFrom I set:

<?php
$form=$this->beginWidget('CActiveForm', array(
...	
'enableAjaxValidation'=>true,
...
)) ?>

and on the fields that not required ajax validation:

<?php echo $form->error($model,$attribute,array(),false); ?>

where the last parameter false allow to disable ajax validation for field.

I saw in the BootInputBlock::run() to line 105:

$error = $this->form->error($this->model, $this->attribute); 

So when I use BootActiveForm I have not a possibility to disable ajax validation for some fields.
Is there another decision to resolve it or maybe all error's parameters can be added to all inputBlock methods in the next releases?

[Chris83]

@lehandr: In your case I wouldn't use BootInputBlock. The widget was designed to cover only the most common cases to keep it simple. I hope this answers your question.