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:

Download Twitter Bootstrap library package and unzip it.
Move content of dist/ folder into /public/ folder.
Download Glyphicons package and unzip it.
Copy fonts/ folder into /public/ folder.
Copy css/bootstrap-glyphicons.css into /public/css/ folder.

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49


<?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:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38


<?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>

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

References: