Saad Farooq

I have issues... need pull requests

    © 2014. Saad Farooq All rights reserved.

    Integrating Yii with Twitter Bootstrap

    24 Jun 2013

    Why Twitter Boostrap?

    I would like to include Twitter Bootstrap. The primary reason for doing so if to get the grid capability which is just way more convenient that setting weird CSS on elements.

    Options

    There seem to be two ways to do this. One is using Yii's Twitter Bootstrap extension. Using this extension you would add Twitter components to your page using snippets like this:

    <?php $this->widget('bootstrap.widgets.TbButton', array(
        'label'=>'Primary',
        'type'=>'primary', // null, 'primary', 'info', 'success', 'warning', 'danger' or 'inverse'
        'size'=>'large', // null, 'large', 'small' or 'mini'
    )); ?>
    

    As opposed to :

    <button class="btn btn-primary">Button</button>
    

    So that settles it. I'm going to go for the latter.

    How To Use It

    Yii supports layout inheritance. You can define layouts at the Application, Controller or View level. Since, I'm going to be using the same layout throughout the views I'll be setting it up at the Controller level.

    I create a new file called twitter-bootstrap.php in the views/layouts folder.

    class DashboardController extends Controller
    {
        public $layout='//layouts/twitter-bootstrap';
    }
    

    Simple. All views of this controller will now use the layout defined in twitter-bootstrap.php

    Now the Hard Part

    How to define the layout itself ? Should be simple enough:

    <!DOCTYPE html>
    <html>
    <head>
        <?php echo CHtml::cssFile(Yii::app()->baseUrl.'/css/bootstrap.css'); ?>
    </head>
    <body>
    <div class="container-fluid">
        <div class="row-fluid">
            <div id="header">
                ...site logo and other header content...
            </div>
        </div>
    
        <?php echo $content; ?>
    
        <div class="row-fluid" id="footer">
            ...footer content...
        </div><!-- footer -->
    
    </div><!-- container -->
    
    </body>
    </html>
    

    blog comments powered by Disqus