[EXTENSION] Bootstrap

Chris83 · March 12, 2012, 8:56am

Hey Sampa,

Would it be that your tooltips doesn’t have the “rel” attribute set to “tooltip”? They changed the default tooltip selector in Bootstrap 2.0.0.

Chris83 · March 12, 2012, 8:59am

Hey achmad,

You shouldn’t edit the files in the lib folder, instead you should create your own css (or less) files in which you override the Bootstrap styles. If you want a solid color navbar then you can do it with css but if you need some advanced css3 features then you should read this.

Chris83 · March 13, 2012, 11:06am

Version 0.9.10 is now live, thanks to everyone who helped testing the BETA release.

What’s new?

Upgraded to Bootstrap 2.0.2
BootHero, BootCarousel, BootProgress, BootTypeahead
BootButton and BootButtonGroup improvements
BootBaseMenu, BootMenu and BootDropdown improvements
Renamed BootCrumb to BootBreadcrumbs
Renamed BootThumbs to BootThumbnails

Get the new version here:

http://www.yiiframework.com/extension/bootstrap/files/yii-bootstrap-0.9.10.r160.zip

tof · March 13, 2012, 12:03pm

Hey Chris,

Thank you very much for this new release !

But I’m trying to use some new feature of Bootstrap 2.0.2 (hidden-phone class), and it seems that you forgot to “compile” bootstrap CSS & JS in 0.9.10.

The "assets" folder still contains 2.0.1 (lib/bootstrap is ok).

I’m trying to compile it myself, but I have an error :


lessc ./less/bootstrap.less > bootstrap/css/bootstrap.css

NameError: #grid > .core is undefined in /home/boulain/workspace/yii-bootstrap/lib/bootstrap/less/grid.less:2:0

1 // Fixed (940px)

2 #grid > .core(@gridColumnWidth, @gridGutterWidth);

3

Of course, i can just download css & minified css from bootstrap directly, but I wonder if I’m doing something wrong here…

BTW, my lessc version is 1.2.2

Thanks

mukeshsoni · March 13, 2012, 12:11pm

Hi Chris,

I am facing a strange problem. If i set the showScriptName property of urlManager component to false, the menu dropdown stops working. I get a javascript error of the type -

unrecognized expression - /<controller>/index

<controller> is my controller.

Thanks,

Mukesh

Chris83 · March 13, 2012, 12:31pm

@tof: Gaah… thanks for noticing that the assets weren’t updated. It’s now fixed and I’ve uploaded a new package.

Everyone who downloaded yii-bootstrap-0.9.10.r155.zip please download the new package and you’ll have the correct assets available.

Sorry for the inconvenience.

Raoul · March 13, 2012, 12:41pm

Hi Chris,

the download link you’ve provided does not work for me …


The requested file does not exist.

ciao

Chris83 · March 13, 2012, 12:42pm

Try it now, it should be updated. Let me know if it still doesn’t work.

Raoul · March 13, 2012, 12:46pm

works fine now … thanks

tof · March 13, 2012, 12:59pm

Thanks. I’d also dropped a note on the issue I’ve made this morning, but since it was already closed, I think you haven’t seen it

[s]Do you have an idea why I can’t compile from less ??

It doesn’t work with a fresh bootstrap installation neither. I guess this comes from my less compiler (installed with npm)[/s]

Solved… Bootsrap 2.0.2 needs less >= 1.3.0

WebDevPT · March 13, 2012, 2:39pm

I’m testing this extension, but i’m facing some issues.

Let me know if i’m missing something on the config.

I’ve followed the extension instructions and i noticed how my default layout got changed, but when i’m using the bootstrap crud generator, i’m facing the issue that you can see on the pic bellow.

as you can see above the index.php?r=model_name/admin links shows the gridview outside the area where it should be, also the column 2 appears on the wrong position.

I’m using the latest version r160 with yii 1.1.10, and i’m also using LESS latest version. Do I need to change something else to let bootstrap generate the layout like it should, or do i need to adapt the css.

WebDevPT · March 13, 2012, 3:35pm

After changing these settings




'coreCss'=>true,

'responsiveCss'=>true,

I notice a few changes, the column2 is now displayed correctly but the gridview is still shown as the above pic.

Edit: Do I need to change the CSS, or change anything on my views/layouts/main.php?

tof · March 13, 2012, 4:10pm

I’m not sure you can use the standard yii 2-columns (or 1 column) layout without modifying them.

They are based on blueprint css grid (24 columns), not bootstrap one (12 columns)

tackle · March 13, 2012, 7:58pm

Is it possible to use HTML in labels for a BootMenu item?

For example, perhaps I want to prepend my label text with an icon:


<i class="icon-search"></i>

If not - what would be the best way to implement this, but still using the BootMenu widget?

To clarify, I’ve tried setting ‘encodeLabel’=>false, but at this point I have my menu item look like this:


<i class="icon-search"></i> This is my label

Chris83 · March 13, 2012, 8:44pm

tackle:

Is it possible to use HTML in labels for a BootMenu item?

For example, perhaps I want to prepend my label text with an icon:
<i class="icon-search"></i>
If not - what would be the best way to implement this, but still using the BootMenu widget?

To clarify, I’ve tried setting ‘encodeLabel’=>false, but at this point I have my menu item look like this:
<i class="icon-search"></i> This is my label

Just provide ‘icon’ in the menu item configuration:




array('icon'=>'search', 'label'=>'This is my label', 'url'=>'#')

Are you sue that encodeLabel false doesn’t work? Could you please test it and report back. Thanks.

Okeanos · March 13, 2012, 9:42pm

Chris83:

Just provide ‘icon’ in the menu item configuration:
array('icon'=>'search', 'label'=>'This is my label', 'url'=>'#')
Are you sue that encodeLabel false doesn’t work? Could you please test it and report back. Thanks.

Interesting, didn’t know about the icon setting but I can testify that encodeLabel => false works as well.

Btw. regarding the Navbar/Menu – is it possible to highlight the navigational tree instead of simply the active item? Currently, if a drop down item is selected it receives the active class, however, the parent does not.

ncramer · March 14, 2012, 1:54am

Chris and Co,

Thanks for all the hard work on this extension.

While converting over from the Yii CTabView widgets it appears I lost the ability to set the activeTab when initializing the Bootstrap Tabbable widget.

Am I missing something simple or is this not currently available?

Edit:

In trying to hack through this myself I discovered an apparent bug in BootTabbable. The active tab is set based on the index $i === 0. The index only appears to be incremented if the id for the tab is not set at line 154. This means if all tabs are given an explicit id they will all be set to class=active. I believe a simple else statement will fix this issue. eg




				if (!isset($item['id']))

					$item['id'] = $id.'_tab_'.++$i;

				else $i++;

Cheers,

nc

Also: Would you please point me to a donation link or provide a paypal address. All that hard work deserves at least a beer or three.

Chris83 · March 14, 2012, 5:31am

Icon works for BootMenu and BootButton, if you want a white icon then simply append the class “white”, e.g. “search white”. Also, the parent item should receive an active class. Could you confirm that it doesn’t and I’ll take a look at it.

Chris83 · March 14, 2012, 7:15am

ncramer: I’ve added a donate link to the project page. Thanks in advance, all help is greatly appreciated.

tackle · March 14, 2012, 8:31am

Chris83:

Just provide ‘icon’ in the menu item configuration:
array('icon'=>'search', 'label'=>'This is my label', 'url'=>'#')
Are you sue that encodeLabel false doesn’t work? Could you please test it and report back. Thanks.

I can’t “re-test” right now, but I’m 99% sure it doesn’t help for my issue (which is solved now with the icon property!).

The difference is that with encodeLabels set to true, my HTML tags is output like < and >, while set to false it’s output just like I write it in the PHP code snippet that embeds the widget.

I suppose it’s how Yii works in general anyway?