[EXTENSION] Bootstrap

I’m not sure what you mean but the Bootstrap 2.1.0 navbar is implemented in the latest alpha.

I’m talking about here is the thing: https://github.com/twitter/bootstrap/issues/424

It says that in 2.1.0-wip is realized, you probably have an earlier build bottstrap, do not include this functionality.

I still don’t understand what you mean. Could you clarify?

So far I’ve implemented the navbar style changes but I haven’t added the multi-level support yet, it’s on my todo nevertheless.

Hi chris83,

Firstly, I’d like to thank you for developing this useful extension.

I really appreciate your effort!

I’m using the alpha 1.0.0 and for what I’ve seen it works well.

I just have two questions regarding some modifications made on bootstrap css:

  1. Why most of the line-heigth are 20px instead of 18px ?

example:


li{line-height:20px;}

This is causing aligning issues when using icons.

  1. The general theme is ‘gray/white’ instead of the original ‘dark’. Why ?

Thank you.

Both of these changes have been made to Twitter Bootstrap itself, something that I have zero control over.

EDIT: My extension is only a wrapper around the toolkit and doesn’t provide any style (except some Yii-specific style) itself. As Don Felipe replied below you can feel free to override the styles provided by Bootstrap or use an older version of Bootstrap on the project in question.

Of course there’s always the options to either render your own css in combination with less - another extension by chris83; see the link in his signature -, or just overwrite these styles in your webapp’s stylesheet, or - the least flexible! - generate a customized bootstrap.css here and replace it. Ironically, they still use the grayDarker theme and 18px for “@baseLineHeight” as default values.

Hi. First of all, thank you for a wonderful extension.

I’m using another version of jquery/ui and stylesheets. My plan is to use bootstrap extension ONLY for specific controller. I make a new Controller named SomeController that extends Controller component, and import the extension within its init function()




	public function init()

	{

		Yii::import('ext.bootstrap.widgets.*');

	}



How do I load the extension (or only some part of it) within my controller without using preload on configuration file? Thanks.

You could call Yii::app()->getComponent(‘bootstrap’) to run the init function manually.

Thank you very much! It works.




<?php

/**

 * SomeController is base controller for all Some Pages controller 

 */

class SomeController extends Controller

{

    /**

     * @var string the default layout for the controller view. Defaults to '//layouts/column1',

     * meaning using a single column layout. See 'protected/views/layouts/column1.php'.

     */

	public $layout='//layouts/bootstrap/main';

    

    

	public function filters()

	{

		return array(

		    'accessControl', // perform access control for CRUD operations

		);

	}


	public function accessRules()

	{

		//some access rules

	}

	

	public function init()

	{

		Yii::app()->getComponent('bootstrap');

	}


}



Hi! @Chris83

first of all, thank you for the extension, it’s very useful.

but I just have ONE PROBLEM.

I have an action which include a CJSON logic,before install bootstrap it was working well… but now it works only once, why? I don’t know…

here’s my code

in the view I use the renderpartial function with BootTabbable…





<?php 

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

			'type'=>'tabs',

			'placement'=>'above', 

			'tabs'=>array(

				array('label'=>'Peticion ET','content' => $this->renderPartial('//peticionet/ver_peticiones', array('model_pc' => $model,),$this),'id' => 0,'active'=>true),

				array('label'=>'Ingreso ET','content' => $this->renderPartial('//et/ver_et', array('model' => $model,),$this),'id' => 1,),

				array('label'=>'Base Licitacion' ,'content' => $this->renderPartial("//procesocompra/_formBL", array('model' => $model), $this),'id' => 2	),

				array('label'=>'Solicitud Compra','content' => $this->renderPartial("//solicitudcompra/ver_solicitudes", array('model_pc' => $model,), $this),'id' => 3),

				array('label'=>'Envio Base' ,'content' => $this->renderPartial("//enviobase/ver_enviobases", array('model_pc' => $model), $this), 'id' => 4),

				array('label'=>'Adquisicion' ,'content' => $this->renderPartial("//adquisicion/ver_adquisiciones", array('model_pc' => $model), $this), 'id' => 5,),

			),

)); ?>



here’s the code from one of the views (‘ver_et’) which creates a model using ajax




<?php echo CHtml::ajax(array(

            'url'=>Yii::app()->createUrl("et/editar", array("id"=>$model->et->id)),

            'data'=> "js:$(this).serialize()",

            'type'=>'post',

            'dataType'=>'json',

            'success'=>"function(data)

            {

                if (data.status == 'failure')

                {

                    $('#div_et').html(data.div);

					$('#div_et').show();

                    $('#div_et form').submit(editET);

                }

                else

                {

                    $('#div_et').html(data.div);

					$('#div_et').hide('slow');

				location.reload();	

		        }

			

			

            } ",

            ))?>;



there are 3 request :




it seems be ok 

jquery-ui.min.js

/dep1.4/assets/9df29552/jui/js


it seems be ok too because I'm using bootstrap

bootstrap.min.js

/dep1.4/assets/a61484b7/js


another js? ok, but  How many js i should expect?

jquery.js

/dep1.4/assets/9df29552


finally my ajax call... the last will be the first

2.html

/dep1.4/et/editar



EDIT: when I was writing this reply I added this piece of code to the controller( and now it’s working again… now I can pass my code to production)


Yii::app()->clientScript->scriptMap['jquery.js'] = false;

Hi Chris,

I have started using this extension, but i got stuck in the initial stage. I want to open modal on click of an item in navigation bar. I was using the below piece of code.




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

    'type'=>'inverse',

    'brand'=>Yii::app()->name,

    'brandUrl'=>array('/site/index'),

    'collapse'=>true,

    'items'=>array(

        array(

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

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

            'items'=>array(

            	 	array(

            	 	     'label'=>'Login',

            	 	     'url'=>'#',

            	 	     'id'=>'login_link',

            	 	     'htmlOptions'=>array('data-toggle'=>'modal','data-target'=>'#myModal')

            	 	),

		        array('label'=>'SignUp As', 'url'=>'#', 'items'=>array(array('label'=>'New User', 'url'=>'#'),'---',array('label'=>'Corporate', 'url'=>'#'))),

            ),

        ),

    ),

)); 

?>



Here when i click on the ‘Login’ item i want to open model, i tried to pass htmlOptions, when i saw the generated html using firebug noticed that apart from label and url its not accepting any of the attributes that i have passed. Is there a way to address this.

I m facing error

Alias "bootstrap.widgets.BootAlert" is invalid. Make sure it points to an existing directory or file.

when i call

<?php

Yii::app()->user->setFlash(‘success’, ‘<strong>Well done!</strong> You successfully read this important alert message.’);

Yii::app()->user->setFlash(‘info’, '<strong>Heads up!</strong> This alert needs your attention, but it\‘s not super important.’);

Yii::app()->user->setFlash(‘warning’, '<strong>Warning!</strong> Best check yo self, you\‘re not looking too good.’);

Yii::app()->user->setFlash(‘error’, ‘<strong>Oh snap!</strong> Change a few things up and try submitting again.’);

?>

<?php $this->widget(‘bootstrap.widgets.BootAlert’); ?>

in site/index.php file

Below is config/main.php

config/main.php

<?php

// uncomment the following to define a path alias

// Yii::setPathOfAlias(‘local’,‘path/to/local-folder’);

// This is the main Web application configuration. Any writable

// CWebApplication properties can be configured here.

return array(

'basePath'=&gt;dirname(__FILE__).DIRECTORY_SEPARATOR.'..',


'name'=&gt;'My Web Application',


'theme'=&gt;'bootstrap',





// preloading 'log' component


'preload'=&gt;array(


    'log',


    'bootstrap', // preload the bootstrap component


),





// autoloading model and component classes


'import'=&gt;array(


	'application.models.*',


	'application.components.*',


	'ext.bootstrap-theme.widgets.*',


    'ext.bootstrap-theme.helpers.*',


    'ext.bootstrap-theme.behaviors.*',


),





'modules'=&gt;array(


	// uncomment the following to enable the Gii tool


	


	'gii'=&gt;array(


		'class'=&gt;'system.gii.GiiModule',


		'password'=&gt;'Enter Your Password Here',


	 	// If removed, Gii defaults to localhost only. Edit carefully to taste.


		'ipFilters'=&gt;array('127.0.0.1','::1'),


		'generatorPaths'=&gt;array(


            'ext.bootstrap-theme.gii',


            ),


	),


	


),





// application components


'components'=&gt;array(


	'user'=&gt;array(


		// enable cookie-based authentication


		'allowAutoLogin'=&gt;true,


	),


	// uncomment the following to enable URLs in path-format


	/*


	'urlManager'=&gt;array(


		'urlFormat'=&gt;'path',


		'rules'=&gt;array(


			'&lt;controller:&#092;w+&gt;/&lt;id:&#092;d+&gt;'=&gt;'&lt;controller&gt;/view',


			'&lt;controller:&#092;w+&gt;/&lt;action:&#092;w+&gt;/&lt;id:&#092;d+&gt;'=&gt;'&lt;controller&gt;/&lt;action&gt;',


			'&lt;controller:&#092;w+&gt;/&lt;action:&#092;w+&gt;'=&gt;'&lt;controller&gt;/&lt;action&gt;',


		),


	),


	*/


	'db'=&gt;array(


		'connectionString' =&gt; 'sqlite:'.dirname(__FILE__).'/&#46;&#46;/data/testdrive.db',


	),


	// uncomment the following to use a MySQL database


	/*


	'db'=&gt;array(


		'connectionString' =&gt; 'mysql:host=localhost;dbname=testdrive',


		'emulatePrepare' =&gt; true,


		'username' =&gt; 'root',


		'password' =&gt; '',


		'charset' =&gt; 'utf8',


	),


	*/


	'errorHandler'=&gt;array(


		// use 'site/error' action to display errors


        'errorAction'=&gt;'site/error',


    ),


	'log'=&gt;array(


		'class'=&gt;'CLogRouter',


		'routes'=&gt;array(


			array(


				'class'=&gt;'CFileLogRoute',


				'levels'=&gt;'error, warning',


			),


			// uncomment the following to show log messages on web pages


			/*


			array(


				'class'=&gt;'CWebLogRoute',


			),


			*/


		),


	),


),





// application-level parameters that can be accessed


// using Yii::app()-&gt;params['paramName']


'params'=&gt;array(


	// this is used in contact page


	'adminEmail'=&gt;'webmaster@example.com',


),

);

You confuse 2 available extensions: yii-bootstrap vs bootstrap. They both have a different approach on how to implement bootstrap and how to use it in view files. You’re implementing “yii-bootstrap” but use the “bootstrap” way (BootAlert) in your view file. This is the forum of “bootstrap” btw.

Try linkOptions instead of htmlOptions in items list and it’ll do the trick. In general…

  • htmlOptions can be used to add options for a single element - e.g. CMenu.

  • linkOptions can be used to add options for an element in an array of elements - e.g. items in CMenu.

Cheers.

Hi Don,

Thanks a ton your solution has worked, after replacing htmlOptions to linkOptions even when i navigate to other page EX:to home page or to aboutus still my navigation item selection is with login item.

Shouldnt a theme be included with this?

Hi Guys,

I’m using the BLOG demo, and they have the CAutoComplete widget in the _form view, I’d like to implement the compatible “bootstrap” view for this, so that it can fit in with the rest of the text fields (which have been set to horizontal, and therefore looking nice and neat, with this 1 exception completely out-of-line.)




<div class="row">

  <?php echo $form->labelEx($model,'tags'); ?>

  <?php $this->widget('CAutoComplete', array(

 	'model'=>$model,

 	'attribute'=>'tags',

 	'url'=>array('suggestTags'),

 	'multiple'=>true,

 	'htmlOptions'=>array('size'=>50),

  )); ?>

  <p class="hint">Please separate different tags with commas.</p>

  <?php echo $form->error($model,'tags'); ?>

</div>



Does someone know a work-around for this? or have a solution in order to make this input have the same look and feel and alignment as all the other "bootstrap" fields.

Regards,

Hi Laapsaap,

If you implement this extension and change all your view files so that stuff like:




<?php $form=$this->beginWidget('CActiveForm'); ?>



is changed to the bootstraps compatible widget:





<?php $form = $this->beginWidget('bootstrap.widgets.BootActiveForm', array(

    'id'=>'horizontalForm',

    'type'=>'horizontal',

)); ?>



and this:





<?php echo $form->labelEx($model,'title'); ?>

<?php echo $form->textField($model,'title',array('size'=>80,'maxlength'=>128)); ?>

<p class="hint">this is a hint...</p>



is changed to the bootstrap compatible:




<?php echo $form->textFieldRow($model,'title',array('width'=>180,'maxlength'=>128,'hint'=>'this is a hint...')); ?>



(notice how 3 lines are changed to 1 line above)

then you will see that your entire app will look like the bootstrap. If you would then like to customise the colours, then implement LESS and follow the details on this post… http://www.yiichina…post__p__166421

But yeah, I too wish there was an easier way to change colours and maybe a few different themes… If you do create any, make it available for all, and let me know ;)

Hope this helps, and I hope I’m kinda right with my assumptions :)

Regards,

To get some nice bootstrap themes I suggest:

http://bootswatch.com/

or to create your own:

http://bootswatchr.com/

English

Hi, I am new to Yii and I want to install this extension, but I get this error, could you tell me how to fix it?

spanish

hola, soy nuevo en yii y me interesa instalar esta extension, pero me sale este error, podrian decirme como lo arreglo?

CException

Alias "ext.bootstrap.components.Bootstrap" is invalid. Make sure it points to an existing PHP file and the file is readable.

thanks