Yii Framework Forum

[EXTENSION] Bootstrap


(Cniska) #1

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.yiiframework.com/extension/bootstrap/

Fork me Bitbucket:

https://bitbucket.org/Crisu83/yii-bootstrap/

More about Bootstrap here:

http://twitter.github.com/bootstrap/

Try out the demo here:

http://www.cniska.net/yii-bootstrap/demo/

Enjoy!


(Mukeshsoni) #2

blueprint on steroids. Thanks for the extension


(Bigardone) #3

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!


(Cniska) #4

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) #5

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!


(Cniska) #6

@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) #7

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) #8

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…


(Cniska) #9

@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) #10

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.


(Cniska) #11

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


(Jacob Moen) #12

Really awesome extension!

Totally needed for a totally non-designer like me. :lol:


(Cniska) #13

Thanks for all the feedback on this extension.

Version 0.9.1 is now live:

http://www.yiiframework.com/extension/bootstrap/files/bootstrap-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) #14

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 :)


(Cniska) #15

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.


(Cniska) #16

Bootstrap can now be forked on Bitbucket:

https://bitbucket.org/Crisu83/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


(Alexey Naydenko) #17

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.


(Cniska) #18

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


(Alexey Naydenko) #19

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?


(Cniska) #20

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