[EXTENSION] Bootstrap

[yiidf (Don Felipe)]

Hello, can anyone explain to me how should I use BootThumbnails widget? What data I need to pass to ‘dataProvider’ parameter? And also how should ‘itemView’ file look like?

BootThumbnails extends BootListView that extends CListView.

How ‘data’ and ‘pagination’ is handled is based on CListView. This means, in the extra view file (_thumb) the information of the current item is available as $data. In the demo version $data only contains an ‘id’ => $data[‘id’].

<li class="span3">

    <a href="#" class="thumbnail" rel="tooltip" data-title="Tooltip for Id: <?php echo $data['id']; ?>">

        <img src="http://placehold.it/280x180" alt="">

    </a>

</li>

What is passed to CArrayDataProvider is up to you. You can create your own array ($rawData) or you can simply pass an entire model, too.

Hope it helps!

[yiidf (Don Felipe)]

BootModal not working.

…

I do see a button, but nothing happens when I click on it. I do not see any modal window on button click. I do not know where to look at to fix it.

Bootstrap seems to work - otherwise Yii would tell you - so most likely it’s jQuery/JS related.

Check if Firebug shows any error messages on page load and/or when clicking on the button.

[piSHOCK (Pishock Ru)]

BootThumbnails extends BootListView that extends CListView.

How ‘data’ and ‘pagination’ is handled is based on CListView. This means, in the extra view file (_thumb) the information of the current item is available as $data. In the demo version $data only contains an ‘id’ => $data[‘id’].

<li class="span3">

    <a href="#" class="thumbnail" rel="tooltip" data-title="Tooltip for Id: <?php echo $data['id']; ?>">

        <img src="" alt="">

    </a>

</li>

What is passed to CArrayDataProvider is up to you. You can create your own array ($rawData) or you can simply pass an entire model, too.

Hope it helps!

Thanks a lot!

[darkult (Rolando Guedes)]

Hi,

your code works fine on my sample app…Did you install ‘bootstrap’ into your extensions folder ? … just in case, note that ‘boostrap’ folder should be lower case.

With version 0.10.1-beta.r254 You should have following folder structure :

protected\extensions\bootstrap

     				+-----assets

         			+-----components

         			+-----lib

         			+-----gii

         			+-----widgets

You could also try to write :

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

	'links'=>array('Library'=>'#', 'Data'),

));

hope this helps…

LOL

Of course I added the bootstrap, I’m Newbie only in Yii forum.

I’ll try with ‘ext.bootstrap’

[yiidf (Don Felipe)]

LOL

Of course I added the bootstrap, I’m Newbie only in Yii forum.

I’ll try with ‘ext.bootstrap’

What Raoul was saying is you should double-check where and how you have extracted the zip file to. Your config and code looks okay and it works everywhere else (just like that). If the main “bootstrap” folder wasn’t there, the error message would be slightly different. Maybe the widgets folder cannot be found. So, check again:

/protected/extensions/bootstrap/assets

…

/protected/extensions/bootstrap/widgets

and not…

/protected/extensions/bootstrap/yii-bootstrap-0.9.11.r190/…

Good luck!

[scpyii (Scp)]

Having a problem with the Bootstrap NavBar after any AJAX call on the same page.

The dropdown menus work fine until any AJAX call is made. After that, the dropdowns no longer drop. The on page Ajax functions still continue to work.

View:

Bootstrap Navbar test:<br/>

<?php $this->widget('bootstrap.widgets.BootNavbar', array(

    'fixed'=>false,

    'brand'=>'Project name',

    'brandUrl'=>'#',

    'collapse'=>true, // requires bootstrap-responsive.css

    'items'=>array(

        array(

            'class'=>'bootstrap.widgets.BootMenu',

            'items'=>array(

                array('label'=>'Home', 'url'=>'#', 'active'=>true),

                array('label'=>'Link', 'url'=>'#'),

                array('label'=>'Dropdown', 'url'=>'#', 'items'=>array(

                    array('label'=>'Action', 'url'=>'#'),

                    array('label'=>'Another action', 'url'=>'#'),

                    array('label'=>'Something else here', 'url'=>'#'),

                    '---',

                    array('label'=>'NAV HEADER'),

                    array('label'=>'Separated link', 'url'=>'#'),

                    array('label'=>'One more separated link', 'url'=>'#'),

                )),

            ),

        ),

        '<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('label'=>'Link', 'url'=>'#'),

                '---',

                array('label'=>'Dropdown', 'url'=>'#', 'items'=>array(

                    array('label'=>'Action', 'url'=>'#'),

                    array('label'=>'Another action', 'url'=>'#'),

                    array('label'=>'Something else here', 'url'=>'#'),

                    '---',

                    array('label'=>'Separated link', 'url'=>'#'),

                )),

            ),

        ),

    ),

)); ?>


Standard nav bar above from working example.<br>

Drop downs work fine until ajax call then drop downs don't drop down. <br>

Simple Ajax call to load text from another file:


Change Text: <div id="changeMe">I will change</div>

<?php

echo CHtml::ajaxButton ("Ajax Update",

    CController::createUrl('Default/TestUpdateAjax'),

    array('update' => '#changeMe'));

?>

Controller:

    public function actionTestPage()

    {


        $this->layout='none';


        $this->render('testPage');

    }

    public function actionTestUpdateAjax()

    {

        $data = array();

        $data["myValue"] = "Content updated in AJAX";


        $this->renderPartial('_updateAjax', $data, false, true);

    }

Anyone else run across this? Love this extension BTW.

[yiidf (Don Felipe)]

Having a problem with the Bootstrap NavBar after any AJAX call on the same page.

The dropdown menus work fine until any AJAX call is made. After that, the dropdowns no longer drop. The on page Ajax functions still continue to work.

[…]

Controller:

 

    public function actionTestUpdateAjax()

    {

        $data = array();

        $data["myValue"] = "Content updated in AJAX";


        $this->renderPartial('_updateAjax', $data, false, true);

    }

Anyone else run across this? Love this extension BTW.

Checkout the console log in firebug and you see what happens…

The way you’re using renderPartial loads the _updateAjax file along with another jquery.js and bootstrap.min.js that leads to a conflict thus all additional js that uses jquery won’t function properly anymore. Try:

$this->renderPartial('_updateAjax', $data, false, false);

and Yii will "only" render the _updateAjax and not process any further client scripts.

[adatema (Annedatema)]

Hi everyone,

The bootstrap CSS ‘framework’ is something you have to love! It makes it so much easier to have a good starting point to develop a site that is responsive also.

I have a question about the order of which the different CSS style sheets are being ‘published’. The order that is documented by Twitter is:

<!-- Le styles -->

    <link href="../assets/css/bootstrap.css" rel="stylesheet">

    <style type="text/css">

      body {

        padding-top: 60px;

        padding-bottom: 40px;

      }

    </style>

    <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">

Important for the responsiveness to work well with the collapse-able NavBar, is that the 'body{padding-top:60px;} is right in between the normal sheet and the responsive sheet. Because some responsiveness has to overrule the padding of the body to be zero when the NavBar collapses.

The Bootstrap Module publishes only the two stylesheets and not the body padding. [size="3"]So how can this be implemented to work?[/size]

I have tried to do it like this in the header, with an extra media-query:

$cs = Yii::app()->getClientScript();

$cs->registerCss('bootstrap-extra', 'body { margin-top: 60px; }', '(min-width:980px)');

This works well in modern browsers, but it it should be also working in older browsers, like the example Twitter gives with their Bootstrap.

Greetings!

[scpyii (Scp)]

Checkout the console log in firebug and you see what happens…

The way you’re using renderPartial loads the _updateAjax file along with another jquery.js and bootstrap.min.js that leads to a conflict thus all additional js that uses jquery won’t function properly anymore. Try:

$this->renderPartial('_updateAjax', $data, false, false);

and Yii will "only" render the _updateAjax and not process any further client scripts.

That did it. Thanks a million!

[amuller81 (Anderson A Muller)]

First of all, great extension!

Now to the issue.

I downloaded the file yii-bootstrap-0.10.1.beta.r254.zip in Yii Bootstraap extension

and I found this bug in BootActiveForm.php:

	/**

	 * Renders a captcha row.

	 * @param CModel $model the data model

	 * @param string $attribute the attribute

	 * @param array $htmlOptions additional HTML attributes

	 * @return string the generated row

	 * @since 0.9.3

	 */

	public function captchaRow($model, $attribute, $htmlOptions = array())

	{

		return $this->inputRow(BootInput::TYPE_CAPTCHA, $model, $attribute, $htmlOptions);

	}

should be

		return $this->inputRow(BootInput::TYPE_CAPTCHA, $model, $attribute, null, $htmlOptions);

Should I use another source to download a more stable version?

[yiidf (Don Felipe)]

First of all, great extension!

Now to the issue.

I downloaded the file yii-bootstrap-0.10.1.beta.r254.zip in Yii Bootstraap extension

and I found this bug in BootActiveForm.php:

	/**

	 * Renders a captcha row.

	 * @param CModel $model the data model

	 * @param string $attribute the attribute

	 * @param array $htmlOptions additional HTML attributes

	 * @return string the generated row

	 * @since 0.9.3

	 */

	public function captchaRow($model, $attribute, $htmlOptions = array())

	{

		return $this->inputRow(BootInput::TYPE_CAPTCHA, $model, $attribute, $htmlOptions);

	}

should be

		return $this->inputRow(BootInput::TYPE_CAPTCHA, $model, $attribute, null, $htmlOptions);

Should I use another source to download a more stable version?

Use 0.9.12 (instead of the more recent beta version) where the function still looks like

public function captchaRow($model, $attribute, $htmlOptions = array(), $captchaOptions = array())

{

    return $this->inputRow(BootInput::TYPE_CAPTCHA, $model, $attribute, $captchaOptions, $htmlOptions);

}

I wonder why Chris83 has removed $captchaOptions? Maybe it just happened by mistake…

@Chris83: Will you fix this for the next stable version?

[suck-kay (Cha Ant Fb)]

need a litle help

how can i gave an id to bootMenu . i tried used htmloption but it doesnt work .

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

    'type'=>'tabs', // '', 'tabs', 'pills' (or 'list')

    'stacked'=>false, // whether this is a stacked menu

    'items'=>array(

        array('label'=>'Pegawai', 'url'=>'#', array('HtmlOptions'=>array('id'=>'pegawai')),'active'=>true),

        array('label'=>'Anak', 'url'=>'#',array('HtmlOptions'=>array('id'=>'anak'))),

        

    ),

)); ?>

need some advise

thanks

[yiidf (Don Felipe)]

need a litle help

how can i gave an id to bootMenu . i tried used htmloption but it doesnt work .

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

    'type'=>'tabs', // '', 'tabs', 'pills' (or 'list')

    'stacked'=>false, // whether this is a stacked menu

    'items'=>array(

        array('label'=>'Pegawai', 'url'=>'#', array('HtmlOptions'=>array('id'=>'pegawai')),'active'=>true),

        array('label'=>'Anak', 'url'=>'#',array('HtmlOptions'=>array('id'=>'anak'))),

    ),

)); ?>

need some advise

thanks

BootMenu

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

    'type'=>'tabs', // '', 'tabs', 'pills' (or 'list')

    'stacked'=>false, // whether this is a stacked menu

    'htmlOptions'=>array('id'=>'myIdentifier'),

    'items'=>array(

        array('label'=>'Pegawai', 'url'=>'#', array('HtmlOptions'=>array('id'=>'pegawai')),'active'=>true),

        array('label'=>'Anak', 'url'=>'#',array('HtmlOptions'=>array('id'=>'anak'))),

    ),

)); ?>

BootMenu inside BootNavbar:

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

    'fixed'=>'top',

    'collapse'=>true,

    'items'=>array(

        array(

	    'htmlOptions'=>array('id'=>'myIdentifier'),

            'class'=>'bootstrap.widgets.BootMenu',

            'items'=>array(

	        //menuItems...           

            ),

        ),

    ),

));

[suck-kay (Cha Ant Fb)]

thank you for helping me

but its realy my bad …

i should use linkOptions instead HtmlOptions

well its work now

thanks.

BootMenu

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

    'type'=>'tabs', // '', 'tabs', 'pills' (or 'list')

    'stacked'=>false, // whether this is a stacked menu

    'htmlOptions'=>array('id'=>'myIdentifier'),

    'items'=>array(

        array('label'=>'Pegawai', 'url'=>'#', array('HtmlOptions'=>array('id'=>'pegawai')),'active'=>true),

        array('label'=>'Anak', 'url'=>'#',array('HtmlOptions'=>array('id'=>'anak'))),

    ),

)); ?>

BootMenu inside BootNavbar:

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

    'fixed'=>'top',

    'collapse'=>true,

    'items'=>array(

        array(

	    'htmlOptions'=>array('id'=>'myIdentifier'),

            'class'=>'bootstrap.widgets.BootMenu',

            'items'=>array(

	        //menuItems...           

            ),

        ),

    ),

));

[yiidf (Don Felipe)]

thank you for helping me

but its realy my bad …

i should use linkOptions instead HtmlOptions

well its work now

thanks.

i thought you wanted to give the menu itself an Id and wasn’t paying attention to you list of items.

yup, the items/links need linkOptions.

[suck-kay (Cha Ant Fb)]

i thought you wanted to give the menu itself an Id and wasn’t paying attention to you list of items.

yup, the items/links need linkOptions.

this is the first time for me using bootstap extention …

i had more question if you dont mind

	<?php $this->widget('bootstrap.widgets.BootNavbar', array(

    'fixed'=>false,

    'brand'=>'',

    'brandUrl'=>'/index.php',

    'collapse'=>true, // requires bootstrap-responsive.css

    'items'=>array(

        array(

            'class'=>'bootstrap.widgets.BootMenu',

            'items'=>array(

                array('label'=>'Home', 'url'=>'/index.php/site/index', 'active'=>true),

				array('label'=>'Simpeg', 'url'=>'/index.php/pegawai',),

				array('label'=>'About', 'url'=>'/index.php/site/page?view=about',),

in the code above we can see active=>true are class i tried to changed the class using jquery ,its not working becouse its refreshing the script and it starting from begining.

how can i change that class based on menu that i click.

thanks .

[yiidf (Don Felipe)]

this is the first time for me using bootstap extention …

i had more question if you dont mind

	<?php $this->widget('bootstrap.widgets.BootNavbar', array(

    'fixed'=>false,

    'brand'=>'',

    'brandUrl'=>'/index.php',

    'collapse'=>true, // requires bootstrap-responsive.css

    'items'=>array(

        array(

            'class'=>'bootstrap.widgets.BootMenu',

            'items'=>array(

                array('label'=>'Home', 'url'=>'/index.php/site/index', 'active'=>true),

				array('label'=>'Simpeg', 'url'=>'/index.php/pegawai',),

				array('label'=>'About', 'url'=>'/index.php/site/page?view=about',),

in the code above we can see active=>true are class i tried to changed the class using jquery ,its not working becouse its refreshing the script and it starting from begining.

how can i change that class based on menu that i click.

thanks .

Try this:

'active' => $this->id=='site' && $this->action->id=='index'

'active' => $this->id=='pegawai'

'active' => $this->id=='site' && $this->action->id=='page'

To get the view either use $_GET or pass the value as additional parameter from the controller action to the view script. When using modules $this->module->id returns the module’s name.

You can use all kinds of conditions to set the status of the link or to show/hide the link in the first place (using the option ‘visible’).

array('label'=>'Login', 'url'=>'/index.php/site/login', 'visible'=>user()->isGuest, 'active'=>$this->id=='site'&&$this->action->id=='login')

Hope it helps.

[suck-kay (Cha Ant Fb)]

Try this:

'active' => $this->id=='site' && $this->action->id=='index'

'active' => $this->id=='pegawai'

'active' => $this->id=='site' && $this->action->id=='page'

To get the view either use $_GET or pass the value as additional parameter from the controller action to the view script. When using modules $this->module->id returns the module’s name.

You can use all kinds of conditions to set the status of the link or to show/hide the link in the first place (using the option ‘visible’).

array('label'=>'Login', 'url'=>'/index.php/site/login', 'visible'=>user()->isGuest, 'active'=>$this->id=='site'&&$this->action->id=='login')

Hope it helps.

lovely . thanks you so much

[alanselvam]

Hi All, Bootnavbar dropdownlist is not working for me. here’s my source. please help me.

main.php

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">


<title><?php echo CHtml::encode($this->pageTitle); ?></title>


<meta name="description" content="">


<meta name="author" content="">

</head>

<body>

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

'fixed'=>false,


'brand'=>'test',


'brandUrl'=>'#',


'collapse'=>true, // requires bootstrap-responsive.css


'items'=>array(


    array(


        'class'=>'bootstrap.widgets.BootMenu',


        'items'=>array(


            array('label'=>'All', 'visible'=>!Yii::app()->user->isGuest, 'url'=>CHtml::normalizeUrl(array('post/index')), 'active'=>true),


            //array('label'=>'Compose message', 'url'=>CHtml::normalizeUrl(array('message/index'))),


           


			array('label'=>'Alerts', 'visible'=>!Yii::app()->user->isGuest, 'url'=>CHtml::normalizeUrl(array('profile/alerts'))),


			array('label'=>'Dropdown', 'url'=>'#', 'items'=>array(


                array('label'=>'Action', 'url'=>'#'),


                array('label'=>'Another action', 'url'=>'#'),


                array('label'=>'Something else here', 'url'=>'#'),


            )),


           


        ),


    ),


    '<form class="navbar-search pull-left" action=""><input type="text" class="search-query span4" placeholder="Search favourite articles, authors and interests."></form>',


    array(


        'class'=>'bootstrap.widgets.BootMenu',


        'htmlOptions'=>array('class'=>'pull-right'),


        'items'=>array(


			array('label'=>'Logout ('.Yii::app()->user->name.')', 'url'=>array('site/logout'), 'visible'=>!Yii::app()->user->isGuest)


        ),


    ),


),

)); ?>

<div class="container">	


			<?php if(isset($this->breadcrumbs)):?>


				<?php 


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


						'links'=>$this->breadcrumbs,


					));


			


				?><!-- breadcrumbs -->


			<?php endif?>


</div>


<div class="container">	


	<?php echo $content; ?>


 </div>


 <div class="container">	


 	<div class="well">


		<div class="row">


				<div class="span7 pull-left">


					<p>Language: English(US) Copyright © <?php echo date('Y'); ?> by Socialpaper. Verison: 1.0.1</p>


				</div>


				<div class="span2 pull-right"><p>All Rights Reserved.</p></div>


		</div>


	</div>


	<div class="well">


		<div class="row">


			<div class="span3">


				<h4>Product</h4>


					<?php $this->widget('zii.widgets.CMenu',array(


						'items'=>array(


							array('label'=>'Send feedback', 'url'=>array('/site/feedback')),


							//


							//


			


							//


							array('label'=>'Privacy', 'url'=>array('/site/privacy')),


							array('label'=>'Terms', 'url'=>array('/site/terms')),


							array('label'=>'Help', 'url'=>array('/site/help')),


						),


						'htmlOptions'=>array(


							'class'=>'unstyled',


						),


					)); ?> 


			</div>


			<div class="span4">


				<h4>Company</h4>


					<?php $this->widget('zii.widgets.CMenu',array(


						'items'=>array(


							array('label'=>'About', 'url'=>array('/site/about')),


							array('label'=>'Contact Us', 'url'=>array('/site/contact')),


						),


						'htmlOptions'=>array(


							'class'=>'unstyled',


						),


					)); ?> 


			</div>


		</div>


	</div>


	


 </div>

</body>

</html>

[mattiv (Matti Vahatalo)]

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.