[EXTENSION] Bootstrap

Yii 1.1 Extensions
521

Hi!

I’m having great difficulties in customizing the markup produced by the extension. For example, I want to create BootMenu tabs with an empty <i></i> next to the label text, in order to show an icon there. We’re using CSS sprites, so just putting the icon as the label background and adding some padding won’t do.

So here’s what I want to achieve:


<ul class="nav nav-tabs ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">

  <li class="active ui-state-default ui-corner-top ui-tabs-selected ui-state-active">

    <a href="#tabs-1"><i></i> View</a>

  </li>

  <li class="ui-state-default ui-corner-top">

    <a href="#tabs-2"><i></i> Edit</a></li>

</ul>

This is what I tried, but it encodes the ‘<’ and ‘>’ as html entities and just shows the <i></i> as text:


$this->widget('ext.bootstrap.widgets.BootMenu', array(

                'type' => 'tabs',

                'stacked' => false,

                'items' => array(

                    array('label' => "<i></i>".Yii::t('app', 'View'), 'url' => 'view', 'active' => true),

                    array('label' => "<i></i>".Yii::t('app', 'Edit'), 'url' => 'edit'),

                ),

            ));

This is not the only occation we had the need to tweak the Bootstrap markup a little bit, and it’s always a bit too difficult, in my opinion: extending classes, overriding low-level functions etc.

522

This is Sparta Bootstrap!

Bootstrap is already using CSS sprites to display all Glyphicons. No need to re-invent the wheel here. Check the demo page to find out how to do it. Of course, if you want to use your own sprites and set of icons, you need to overwrite all icon-related styles accordingly or use your very own css classes instead.

Displaying HTML tags inside labels is easy. Just set "encodeLabel" to false:


$this->widget('ext.bootstrap.widgets.BootMenu', array(

    'type' => 'tabs',

    'stacked' => false,

    'encodeLabel' => false,

    'items' => array(

         //your items

    ),

));

Good luck!

523

Did you try adding the parameter "icon"?

Like this:




$this->widget('ext.bootstrap.widgets.BootMenu', array(

                'type' => 'tabs',

                'stacked' => false,

                'items' => array(

                    array('icon' => 'eye-open', 'label' => Yii::t('app', 'View'), 'url' => 'view', 'active' => true),

                    array('icon' => 'pencil', 'label' => Yii::t('app', 'Edit'), 'url' => 'edit'),

                ),

            ));

You can check the available icons here:

twitter.github.com/bootstrap/base-css.html#icons

You don’t need to add the “icon-” and if you need the white version of the icon just use as:




'icon' => 'eye-open white'

I hope this helps you

524

Wow! Thanks for the both of you, really helpful and quick! Yeah, we want to use our own icons, but also some of bootstrap’s default ones… The ‘encoding => false’ really helps in quite many other things, too!

525

Hi Alanselvam

My situation is the same.

In my local dev machine (OSX, Yii 1.1.10, MAMP) the dropdown menu works ok but in the development server (Ubuntu 10.04, LAMP, Yii 1.1.10) the dropdownlist is not working.

Do you already solve this problem?

526

When I add bootstrap extension to my config preload, then in debug window Chrome show error:

bootstrap.min.js: a("body").on("click.alert.data-api", b, c.prototype.close)

Error message is Object [object Object] has no method ‘on’

Probably, because of this error CJui dialog is not working (also bootstrap modal window is not). When I remove bootstrap from preload, then CJui dialog is opening corectly.

I am using bootstrap for my backend that sits in a seperate folder (I have two folders - one for frontend, another for backend). Maybe some js or something is not loading correctly for backend folder?

I HAVE SOLVED THIS ISSUE WHEN UPDATED MY YII VERSION.

527

Hi there!

I’m trying to use the Carousel plugin but it doesn’t work.

Why the BootCarousel widget doesn’t register the needed js plugin file (/js/bootstrap-carousel.js) or where should they be registered?

I’ve searched all the extension code, but could not find the place where js files for plugins are registered.

Am I missing something?

Thank you

Regards

528

What yii-bootstrap version do you use?

From 0.9.12 onwards there’s only 1 minimized JS file (24kb!) - no more plugins need to be registered - and the carousel works just fine.

529

Any news about the integration of Bootstrap Datepicker ? :)

(can’t repost the link as this is my first posting on the forums, see a couple of pages ahead)

530

Thanks for replying, 0.10.1 version, total lost in the dark…after some tests in localhost, even registering manually, it does not work…i’m wondering there must be something wrong with the environment, will try tomorrow in my hosting and post here if it works

thanks again

regards

531

Just downloaded the latest 0.10.1, used the carousel from the demo page, and tested it on Yii 0.1.10 and 0.1.11-dev. Carousel’s working fine. Again, no plugin needs to be registered - just 1 bootstrap.min.js.

Are there any error messages in firebug on your side? Do you at least see the carousel or does Yii return whatever widget-related error message? Are you using the demo code (carousel)? Do all the other JS elements of Yii-Bootstrap (still) work?

Good luck!

532

it’s weird, no messages in firebug, no errors from Yii

the html markup is generated, the js code also $(’.carousel’).carousel(), but the widget shows the content as common <ul> list (images and text)

haven’t tested other js components

given the urgence of delivering this to the client, I’ve decided to put nivoslider to do the job and latter will investigate this deeply

again, thanks very much for your time and your help

=))

533

Hi!

I need two submit buttons, but both should do submit to different url.




// this button submits to action update and this is fine

			$this->widget('bootstrap.widgets.BootButton', array(

				'buttonType'=>'submit',

				'type'=>'primary',

				'label'=>$model->isNewRecord ? 'Create' : 'Save',

			));		


// i need this button to submit to action confirm and not update, but this doesn't work !!!!!!!!!


			$this->widget('bootstrap.widgets.BootButton', array(

				'url' => array('confirm', 'id' => $model->id),   

				'buttonType'=>'submit',

				'type'=>'primary',

				'label'=>Yii::t('shop', 'Save&Confirm'),

			));
534

Has anyone implemented the bootstrap.widgets.BootTabbable tabs with dynamic content in the tabs using AJAX requests and can hint me in the right direction on how to implement this?

535

How can I insert an attribute in the link generating through following code ? (htmlOptions not working in this case)

<?php $this->widget(‘bootstrap.widgets.BootMenu’, array(

‘type’=>‘list’,

‘items’=>array(

array(‘label’=>‘LIST HEADER’),

array(‘label’=>‘Home’, ‘icon’=>‘home’, ‘url’=>’#’, ‘htmlOptions’=>array(‘data’=>‘any’)),

),

)); ?>

536

If the HTML element is a link, you need to use ‘linkOptions’ instead of ‘htmlOptions’.

537

I want to use Bootstrap extension only in one module of my app

How should I change default code in config


'preload'=>array(

    .....

    'bootstrap', // preload the bootstrap component

),

'modules'=>array(

    .....

    'gii'=>array(

        .....

        'generatorPaths'=>array(

            'bootstrap.gii', // since 0.9.1

        ),

    ),

),

'components'=>array(

    .....

    'bootstrap'=>array(

        'class'=>'ext.bootstrap.components.Bootstrap', // assuming you extracted bootstrap under extensions

    ),

),

I’ve tried to do it in different ways but couldn’t get a result

538

Hello Al… I have problem with my fresh bootstraps installation…

this my error message:





CException


Description

Property "CUrlManager.bootstrap" is not defined




Source File

Applications/XAMPP/xamppfiles/htdocs/yii/framework/YiiBase.php(208)

Could u help me?

539

Set it up as normally, then only use the widgets etc in the module. There is nothing that forces you to use it outside of the module even if you install bootstrap normally.

540

Set it up as normally, then only use the widgets etc in the module. There is nothing that forces you to use it outside of the module even if you install bootstrap normally.