Update Twitter Bootstrap to release 3 in Zend Framework 2

Recently I started a new project based on Zend Framework 2, using Twitter Bootstrap as CSS framework. Some days ago, new Bootstrap v3 was released and introduced a lot of changes and improvements. Because of ZF2 Skeleton Application comes out-of-box with Twitter Bootstap 2, I decided to setup the new project skeleton and update CSS framework to latest available release.

In this post, I’ll describe the process to update Bootstrap to v3 into a ZF2 project.

Please note: I set up the project with Zend Framework 2.2.2 and updated to Twitter Bootstrap 3.0.0-rc1 because, actually, are latest available versions. If time is passed, you should check official documentations to ensure that this procedure is still valid.

I’ll describe update process assuming that we have a working Skeleton Application deployed following Zend Framework Getting starded guide.

First of all, we have to update libraries in public/ folder by accomplish following steps:

  1. Download Twitter Bootstrap library package and unzip it.
  2. Move content of dist/ folder into <project>/public/ folder.
  3. Download Glyphicons package and unzip it.
  4. Copy fonts/ folder into <project>/public/ folder.
  5. Copy css/bootstrap-glyphicons.css into <project>/public/css/ folder.

Now we have to modify Zend Framework layout. Here you can see layout.phtml file of version 2.2.2:


<?php echo $this->doctype(); ?>

<html lang="en">
    <head>
        <meta charset="utf-8">
        <?php echo $this->headTitle('ZF2 '. $this->translate('Skeleton Application'))->setSeparator(' - ')->setAutoEscape(false) ?>

        <?php echo $this->headMeta()->appendName('viewport', 'width=device-width, initial-scale=1.0') ?>

        <!-- Le styles -->
        <?php echo $this->headLink(array('rel' => 'shortcut icon', 'type' => 'image/vnd.microsoft.icon', 'href' => $this->basePath() . '/img/favicon.ico'))
                        ->prependStylesheet($this->basePath() . '/css/bootstrap-responsive.min.css')
                        ->prependStylesheet($this->basePath() . '/css/style.css')
                        ->prependStylesheet($this->basePath() . '/css/bootstrap.min.css') ?>

        <!-- Scripts -->
        <?php echo $this->headScript()->prependFile($this->basePath() . '/js/html5.js', 'text/javascript', array('conditional' => 'lt IE 9',))
                                      ->prependFile($this->basePath() . '/js/bootstrap.min.js')
                                      ->prependFile($this->basePath() . '/js/jquery.min.js') ?>

    </head>
    <body>
        <div>
            <div>
                <div>
                    <a data-toggle="collapse" data-target=".nav-collapse">
                        <span></span>
                        <span></span>
                        <span></span>
                    </a>
                    <a href="<?php echo $this->url('home') ?>"><?php echo $this->translate('Skeleton Application') ?></a>
                    <div>
                        <ul>
                            <li><a href="<?php echo $this->url('home') ?>"><?php echo $this->translate('Home') ?></a></li>
                        </ul>
                    </div><!--/.nav-collapse -->
                </div>
            </div>
        </div>
        <div>
            <?php echo $this->content; ?>
            <hr>
            <footer>
                <p>&copy; 2005 - <?php echo date('Y') ?> by Zend Technologies Ltd. <?php echo $this->translate('All rights reserved.') ?></p>
            </footer>
        </div> <!-- /container -->
        <?php echo $this->inlineScript() ?>
    </body>
</html>

We have to replace previous file’s content with this one:


<?php echo $this->doctype(); ?>

<html lang="en">
    <head>
        <meta charset="utf-8">
        <?php echo $this->headTitle('ZF2 '. $this->translate('Skeleton Application'))->setSeparator(' - ')->setAutoEscape(false) ?>

        <?php echo $this->headMeta()->appendName('viewport', 'width=device-width, initial-scale=1.0') ?>

        <!-- Le styles -->
        <?php echo $this->headLink(array('rel' => 'shortcut icon', 'type' => 'image/vnd.microsoft.icon', 'href' => $this->basePath() . '/img/favicon.ico'))
                        ->prependStylesheet($this->basePath() . '/css/bootstrap-responsive.min.css')
                        ->prependStylesheet($this->basePath() . '/css/style.css')
                        ->prependStylesheet($this->basePath() . '/css/bootstrap.min.css') ?>

        <!-- Scripts -->
        <?php echo $this->headScript()->prependFile($this->basePath() . '/js/html5.js', 'text/javascript', array('conditional' => 'lt IE 9',))
                                      ->prependFile($this->basePath() . '/js/bootstrap.min.js')
                                      ->prependFile($this->basePath() . '/js/jquery.min.js') ?>

    </head>
    <body>
        <div>
            <div>
                <div>
                    <a data-toggle="collapse" data-target=".nav-collapse">
                        <span></span>
                        <span></span>
                        <span></span>
                    </a>
                    <a href="<?php echo $this->url('home') ?>"><?php echo $this->translate('Skeleton Application') ?></a>
                    <div>
                        <ul>
                            <li><a href="<?php echo $this->url('home') ?>"><?php echo $this->translate('Home') ?></a></li>
                        </ul>
                    </div><!--/.nav-collapse -->
                </div>
            </div>
        </div>
        <div>
            <?php echo $this->content; ?>
            <hr>
            <footer>
                <p>&copy; 2005 - <?php echo date('Y') ?> by Zend Technologies Ltd. <?php echo $this->translate('All rights reserved.') ?></p>
            </footer>
        </div> <!-- /container -->
        <?php echo $this->inlineScript() ?>
    </body>
</html>

And that’s all. Your Zend Framework project is ready to be developed using Twitter Bootstrap latest release.

References:

Articoli correlati

  • Nice work!

    It would be awesome if you could create a pull request to the ZF2 skeleton application!

    • Valerio Galano

      Thanks Antoine!
      I’ll definitely do tomorrow from office!

  • This is basically what I did, but I ran into some problems with my form elements using this technique, apparently bootstrap 3 utilizes some extra classes for form elements that ZF2 doesn’t take into consideration. namely the ‘form-control’ class, without that class everything looks kinda odd. Now I need to either go back to the old setup, or go through all the forms and add classes to the form elements. I also noticed that there are some other elements that doesn’t look quite right too. Did you experience any similar problems?

    • Valerio Galano

      Hi Fredrik,
      actually I prefer to avoid usage of Zend Form component and I write my forms in html, using Javascript to insert errors where I like. Anyway, if you need to add a specific css class in ZF2-generated form, you should use a Decorator.

  • Also you should modify the source file of this variable content; ?>

    Because in that source the div are class span4 instead of the new class in bootstrap 3.

    Regards

    • Valerio Galano

      This tutorial is about an old versions of ZF2 and Bootstrap. Please, check versions into post.