Sunday, November 24, 2013

How to add Bootstrap in Yii Framework



As bootstrap the most famous CSS framework in web designing and in the parallel side i-e web development the king of frameworks is Yii framework as it is fast and most secure one amongst others, anyone with the knowledge of both would surly like to combine the power of both in many projects but there are others which want to experiment or some are just the beginners in both, well you have came to right place. Enough talk lets roll it.

Requirements:

i will be assuming that you have installed and configured the Yii framework, if not then let me know i will write a post on how to install/configure Yii and get started with it.

Step 1:

 Extract all the files from the Bootstrap compressed file into your applications protected/extensions/bootstrap directory.

Step 2:

Open main.php from protected/config directory in any text editor like notepad++. in the very beginning of the file you will find this:

// uncomment the following to define a path alias
// Yii::setPathOfAlias('local','path/to/local-folder');
Type this under these lines:
Yii::setPathOfAlias('bootstrap', dirname(__FILE__).'/../extensions/bootstrap');
now scroll down and you will find
        // application components
	'components'=>array(
		'user'=>array(
			// enable cookie-based authentication
			'allowAutoLogin'=>true,
		),
.........
and in the components array add this:
'bootstrap'=>array(
			'class'=>'bootstrap.components.Bootstrap',
		   ),

like this:
        // application components
	'components'=>array(
		'user'=>array(
			// enable cookie-based authentication
			'allowAutoLogin'=>true,
		),
		'bootstrap'=>array(
			'class'=>'bootstrap.components.Bootstrap',
		   ),

Step 3:

Now the final Step, open the main.php located at protected/view/layouts and add the following line right before the closing head tag (</head>).

<?php Yii::app()->bootstrap->register(); ?>

Now you are good to go...

Example:

To use the Bootstrap fixed navbar in your project, open the main.php located at protected/view/layouts and find the main menu div which has id of "mainmenu" and replace its inner code with the following code. Voila! you have the Bootstrap fixed navigation menu now installed in your project.
        <?php $this->widget('bootstrap.widgets.TbNavbar',array(
            'type'=>'inverse',
            'items'=>array(
                array(
                    'class'=>'bootstrap.widgets.TbMenu',
                    'items'=>array(
                        array('label'=>'Home', 'url'=>array('/site/index')),
                        array('label'=>'Test', 'url'=>array('test/test')),
                        array('label'=>'About', 'url'=>array('/site/page', 'view'=>'about')),
                        array('label'=>'Contact', 'url'=>array('/site/contact')),
                    ),
                ),
                array(
                    'class'=>'bootstrap.widgets.TbMenu',
                    'htmlOptions'=>array('class'=>'pull-right'),    //  Bottons appears at the right side of the Navigation Bar.
                    'items'=>array(
                        array('label'=>'login', 'url'=>array('/site/login'), 'visible'=>Yii::app()->user->isGuest),
                        array('label'=>'Logout ('.Yii::app()->user->name.')', 'url'=>array('/site/logout'), 'visible'=>!Yii::app()->user->isGuest)
                    ),
                ),
            ),
            )); ?>

You can customize most of the elements in your Yii project with this extension. To get more into the Yii Bootstrap visit Yii-Bootstrap site to get the codes of more components and how to use them. You can use the Yii-Bootstrap discussion forum at Yii to get to know more and discuss any issues you might have with Yii-Bootstrap.

If you liked this post or this was helpful to you subscribe my blog to get more interesting topics.

5 comments:

  1. Awesome, i like your post, its really good

    web designing

    ReplyDelete
  2. Hii.excellent post,Its really good.You have explained everything very clearly and i like the step by step process.To know more about yii framewokrs have a look on https://yiioverflow.com/

    ReplyDelete

About Me

My photo
I play a lot of computer games, design stuff and enjoy the life with my cutest baby girl.