 |
| Figura 1: Como fusionar Symfony2 y Bootstrap |
Los que les voy a explicar a continuación es la forma que yo utilizo para realizar la integración de estos dos framework, con lo cuál la idea es optimizar las plantillas y reutilizar código para continuar escalando.
Para saltear algunos pasos les dejo los enlaces para instalar Symfony2 en su servidor de pruebas:
Una vez que tengamos todo instalado, vamos a crear un Bundle con sus configuraciones por defectos de forma simple y rápida, para comprender la secuencias de comando les recomiendo leer su ayuda:
$ php app/console help generate:bundle
$ php app/console generate:bundle --namespace=Sistema/BlogBundle
 |
| Figura 2: Generación de Bundle |
Ahora lo que vamos a modificar es el archivo base.html.twig donde vamos a utilizarlo siempre antes de cargar las plantillas, en él vamos a reemplazar por el siguiente código:
archivo: app/Resources/views/base.html.twig
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>{% block title %}Welcome!{% endblock %}</title>
{% block stylesheets %}{% endblock %}
<link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
</head>
<body>
{% block body %}{% endblock %}
{% block javascripts %}{% endblock %}
</body>
</html>
Ahora vamos a ir al a la estructura del Bundle que creamos, que seguramente se encuentra en src/Sistema/BlogBundle/Resources y copiamos dentro del directorio public/ todo el contenido del bootstrap, osea todo el directorio css, js y fonts.
 |
| Figura 3: Directorio public/ |
Para poder publicar los assets de nuestro Bundle vamos a ejecutar:
$ php app/console assets:install web
 |
| Figura 4: Publicar os assets del Bundle |
Dentro del directorio views/ del Bundle, vamos a crear un archivo llamado layout.html.twig y que va a contener el siguiente código:
archivo: src/Sistema/BlogBundle/Resources/views/layout.html.twig
{% extends '::base.html.twig' %}
{% block stylesheets %}
<link href="{{ asset('bundles/sistemablog/css/bootstrap.css') }}" type="text/css" rel="stylesheet">
<link href="{{ asset('bundles/sistemablog/css/bootstrap-responsive.css') }}" type="text/css" rel="stylesheet">
{% endblock %}
{% block body %}
{% endblock %}
{% block javascripts %}
<script type="text/javascript" src="{{ asset('bundles/sistemablog/js/bootstrap.js') }}"></script>
{% endblock %}
Ahora para finalizar lo único que nos queda es editar el archivo de la vista Default/ de la siguiente manera:
archivo: src/Sistema/BlogBundle/Resources/views/Default/index.html.twig
{% extends 'SistemaBlogBundle::layout.html.twig' %}
{% block body %}
<!-- Static navbar -->
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container">
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
<h1>Hello {{ name }}</h1>
<p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>To see the difference between static and fixed top navbars, just scroll.</p>
<p>
<a class="btn btn-lg btn-primary" href="#" role="button">View navbar docs »</a>
</p>
</div>
</div> <!-- /container -->
{% endblock %}
 |
| Figura 5: Pruebas en local sin el template de Bootstrap |
 |
| Figura 6: Pruebas en local con la template de Bootstrap |
Se puede ver que antes de visualizar esta vista extiende los contenidos del archivo layout.html.twig que a su vez se extiende de la estructura base.html.twig esta es una de las grandes ventajas de utilizar Twig en la capa de vista, además de los llamados block que en todos momento hacemos uso.
Como resultado podemos ver como desde las vistas de Symfony2 podemos convocar a las clases que se encuentran en el Bootstrap y hacer que nuestra aplicación adopte todo su estilo.
Ojalá le sea útil este pequeño How-To donde se muestra como integrar el Bootstrap de Twitter con las vistas de Symfony2 de tal forma que nos permita seguir escalando en todas las vistas de la aplicación.
Saludos!
Enlace | Symfony2 y Bootstrap
No hay comentarios.:
Publicar un comentario