Guía para Incluir Plantilla Bootstrap

Guía para usar una plantilla Bootstrap en la aplicación.
Como ya se ha visto en clases anteriores una plantilla simplemente es un archivo de texto que puede
generar cualquier formato basado en texto (HTML, XML, CSV, LaTeX...)
Symfony contiene un lenguaje de plantillas muy potente llamado Twig que permite escribir plantillas
concisas y fáciles de leer lo que lo hace más amigables para los diseñadores web, por ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Welcome to Symfony!</title>
</head>
<body>
<h1>{{ page_title }}</h1>
<ul id="navigation">
{% for item in navigation %}
<li><a href="{{ item.href }}">{{ item.caption }}</a></li>
{% endfor %}
</ul>
</body>
</html>
Recordando la sintaxis:
 {{ ... }}: imprime una variable o el resultado de una expresión a la plantilla;

 {% ... %}: una etiqueta que controla la lógica de la plantilla; se utiliza para declaraciones if y
ejecutar bucles for, por ejemplo.
 {# … #}: Utilizado para representar los comentarios
Twig también contiene filtros, los cuales modifican el contenido antes de reproducirlo. El siguiente
fragmento convierte a mayúsculas la variable title antes de reproducirla:
{{ title|upper }}
Twig viene con una larga lista de etiquetas y filtros que están disponibles de forma predeterminada. Para
más información revisar documentación de Symfony.
Plantillas, herencia y diseño

A menudo, las plantillas en un proyecto comparten elementos comunes, como el encabezado, pie de
página, barra lateral o más. Symfony piensa este problema de forma diferente: una plantilla se puede
decorar con otra. La herencia de plantillas permite crear un «diseño» de plantilla base que contiene todos
los elementos comunes del sitio definido como una plantilla hija puede extender el diseño base y
reemplazar cualquiera de sus bloques.
Suponiendo que se tiene la siguiente plantilla que contendría la base del diseño del sitio:
{# app/Resources/views/base.html.twig #}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{% block title %}Test Application{% endblock %}</title>
</head>
<body>
<div id="sidebar">
{% block sidebar %}
<ul>
<li><a href="/">Home</a></li>
<li><a href="/blog">Blog</a></li>
</ul>
{% endblock %}
</div>
<div id="contenido">
{% block body %}{% endblock %}
</div>
</body>
</html>
Esta plantilla define el esqueleto del documento HTML base de una simple página de dos columnas. En
este ejemplo, se definen tres áreas {% block %} (title, sidebar y body). Una plantilla hija puede
sustituir cada uno de los bloques o dejarlos con su implementación predeterminada. Esta plantilla también
se podría reproducir directamente. En este caso, los bloques title, sidebar y body simplemente
mantienen los valores predeterminados usados en esta plantilla.
Una plantilla hija podría tener este aspecto:
{# app/Resources/views/Blog/index.html.twig #}
{% extends '::base.html.twig' %}
{% block title %}My cool blog posts{% endblock %}
{% block body %}
{% for entry in blog_entries %}
<h2>{{ entry.title }}</h2>
<p>{{ entry.body }}</p>
{% endfor %}
{% endblock %}
La plantilla padre se identifica mediante una sintaxis de cadena especial (::base.html.twig) la cual
indica que la plantilla se encuentra en el directorio app/Resources/views del proyecto.
La clave para la herencia de plantillas es la etiqueta {% extends %}. Esta le indica al motor de plantillas
que primero evalúe la plantilla base, la cual establece el diseño y define varios bloques. Luego reproduce
la plantilla hija, en ese momento, los bloques title y body del padre son reemplazados por los de la hija.
Dependiendo del valor de blog_entries, el resultado sería algo como esto:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My cool blog posts</title>
</head>
<body>
<div id="sidebar">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/blog">Blog</a></li>
</ul>
</div>
<div id="contenido">
<h2>My first post</h2>
<p>The body of the first post.</p>
<h2>Another post</h2>
<p>The body of the second post.</p>
</div>
</body>
</html>
Tener en cuenta que como en la plantilla hija no se ha definido un bloque sidebar, en su lugar, se utiliza
el valor de la plantilla padre. Una plantilla padre, de forma predeterminada, siempre utiliza una etiqueta
{% block %} para el contenido.
Se pueden utilizar tantos niveles de herencia como se desee. Cuando se trabaja con la herencia de
plantillas, se deben tener en cuenta los siguientes consejos:
 Si se utiliza {% extends %} en una plantilla, esta debe ser la primer etiqueta en esa plantilla;
 Mientras más etiquetas {% block %}se tengan en la plantilla base, mejor. Las plantillas hijas no
tienen que definir todos los bloques de los padres, por lo tanto se deben crear tantos bloques en las
plantillas base como se desee. Mientras más bloques tengan las plantillas base, más flexible será el
diseño;
 Si se encuentra contenido duplicando en una serie de plantillas, muy probablemente significa que
se debe mover el contenido a un {% block %} en una plantilla padre. En algunos casos, una mejor
solución podría ser mover el contenido a una nueva plantilla e incluirla con include
 Si se necesita conseguir el contenido de un bloque desde la plantilla padre, se puede usar la
función {{ parent() }}. Esta es útil si se desea añadir algo al contenido de un bloque padre en
vez de reemplazarlo por completo:
{% block sidebar %}
<h3>Table of Contents</h3>
{# ... #}
{{ parent() }}
{% endblock %}
Incluyendo otras plantillas

A menudo se querrá incluir la misma plantilla o fragmento de código en varias páginas diferentes. Por
ejemplo, en una aplicación con «artículos de noticias», el código de la plantilla que muestra un artículo se
puede utilizar en la página de detalles del artículo, en una página que muestra los artículos más populares,
o en una lista de los artículos más recientes.
Cuando se necesite volver a utilizar un trozo de código PHP, normalmente mueves el código a una nueva
clase o función PHP. Lo mismo es cierto para las plantillas. Al mover el código de la plantilla a su propia
plantilla, este se puede incluir en cualquier otra plantilla. En primer lugar, crea la plantilla que tendrás que
volver a usar.
{# app/Resources/views/article/article_details.html.twig #}
<h2>{{ article.title }}</h2>
<h3 class="byline">by {{ article.authorName }}</h3>
<p>
{{ article.body }}
</p>
Incluir esta plantilla en cualquier otra plantilla es sencillo:
{# app/Resources/views/article/list.html.twig #}
{% extends 'layout.html.twig' %}
{% block body %}
<h1>Recent Articles<h1>
{% for article in articles %}
{{ include('article/article_details.html.twig', { 'article': article }) }}
{% endfor %}
{% endblock %}
La plantilla se incluye utilizando la función {{ include() }}. Observa que el nombre de la plantilla sigue la
misma convención típica. La plantilla articleDetails.html.twig utiliza una variable article, la cual es
proporcionada por la plantilla list.html.twig.
Integrando controladores
En algunos casos, es necesario hacer algo más que incluir una simple plantilla. Supongamos que en tu
diseño tienes una barra lateral, la cual contiene los tres artículos más recientes. Recuperar los tres
artículos puede incluir consultar la base de datos o realizar otra pesada lógica que no se puede hacer desde
dentro de una plantilla.
La solución es simplemente insertar el resultado de un controlador en la plantilla entera.

// src/AppBundle/Controller/ArticleController.php
namespace AppBundle\Controller;
// ...
class ArticleController extends Controller
{
public function recentArticlesAction($max = 3)
{
// make a database call or other logic
// to get the "$max" most recent articles
$articles = ...;
return $this->render('article/recent_list.html.twig',
array('articles' => $articles)
);
}
La plantilla recentList es perfectamente clara:
{# app/Resources/views/article/recent_list.html.twig #}
{% for article in articles %}
<a href="/article/{{ article.slug }}">
{{ article.title }}
</a>
{% endfor %}
Para incluir el controlador, tendrás que referirte a él utilizando la sintaxis de cadena estándar para
controladores (es decir, paquete:controlador:acción):
{# ... #}
<div id="sidebar">
{{ render(controller('AppBundle:Article:recentArticles', { 'max': 3 })) }}
</div>
Incluyendo hojas de estilo y JavaScript en Twig

Ningún sitio estaría completo sin incluir archivos de JavaScript y hojas de estilo. En Symfony, la
inclusión de estos activos se maneja elegantemente, aprovechando la herencia de plantillas de Symfony.
El conjunto de hojas de estilo, archivos JavaScript e imágenes del sitio web, se denominan web assets o
archivos web según la terminología de Symfony, por defecto estos ficheros serán almacenados en el
directorio web del proyecto (web/js , web/css).
Para crear buenas aplicaciones web resulta esencial gestionar los archivos web correctamente, se
recomienda comenzar agregando dos bloques a la plantilla base: uno llamado stylesheet dentro de la
etiqueta head y otro llamado javascript antes de la etiqueta de cierre body. Estos bloques deben contener
todas las hojas de estilo y archivos Javascript que se necesiten en el sitio:
<html>
<head>
{# ... #}
{% block stylesheets %}
<link href="{{ asset('css/main.css') }}" rel="stylesheet" />
{% endblock %}
</head>
<body>
{# ... #}
{% block javascripts %}
<script src="{{ asset('js/main.js') }}"></script>
{% endblock %}
</body>
</html>
Los ficheros .css y .js, serán almacenados en el directorio web/css y web/js respectivamente.
Si se necesita incluir una hoja de estilo extra o archivos Javascript desde una plantilla hija se deben
representar estos bloques con los nuevos ficheros, por ejemplo suponiendo que se tiene una página de
contacto y se necesita incluir una hoja de estilo contact.css sólo en esa página. Desde dentro de la plantilla
de la página de contacto, se debe hacer lo siguiente:
{# app/Resources/views/contact/contact.html.twig #}
{% extends 'base.html.twig' %}
{{ parent() }}
<link href="{{ asset('css/contact.css') }}" rel="stylesheet" />
{% endblock %}
{# ... #}
En la plantilla hija, sólo se tiene que reemplazar el bloque stylesheets y poner la nueva etiqueta de hoja de
estilo dentro de ese bloque. Por supuesto, debido a que se quiere añadir al contenido del bloque padre (y
no cambiarla en realidad), se debe usar la función parent() de Twig para incluir todo, desde el bloque
stylesheets de la plantilla base.
Integrando plantilla Bootstrap

Bootstrap está muy de moda hoy en día, y es una ideal para tener un diseño adaptativo a los diferentes
dispositivos que se usan como son los móviles, tabletas y en las propias PC por lo cual es muy utilizado
actualmente. Para integrar Bootstrap a un proyecto se recomienda seguir los siguientes pasos:
1. Copiar físicamente los archivos en el proyecto.
Primeramente, descomprimir el fichero de la plantilla seleccionada por ejemplo, Flaty, si se observa la

información que contiene, se verán una serie de archivos como ejemplos y explicaciones de todo su
contenido, esto es útil utilizarlo como material de consulta.
Para el proyecto la información necesaria son las carpetas (css, js, img y assets), estas carpetas deben ser
copiadas en el directorio público web/flaty.
2. Actualizar la plantilla base
Se deberá copiar el fichero index.html de la plantilla bootstrap seleccionada, en el directorio

app/Resources/views del proyecto renombrándola a por ejemplo base.html.twig y pueda así ser heredada
por el resto de las plantillas hijas.
3. Crear los bloques necesarios en la plantilla base
Se deberán crear los bloques básicos para el buen funcionamiento de la aplicación, por ejemplo
pudieran crearse los siguientes bloques:
 {% block stylesheets %} {% endblock %}: Para incluir los ficheros css
 {% block javascript %} {% endblock %}: Para incluir los ficheros js
 {% block content %} {% endblock %}: Para mostrar el contenido de la página
Este bloque definirá en la plantilla base el lugar donde se mostrará el contenido de cada
una de las plantillas hijas, por ejemplo pudiera ser la parte de la plantilla delimitada por:

{% block content %}
{% endblock %}

4. El código para usarlos en el proyecto
Para hacer uso de la plantilla Bootstrap se debe hacer referencia a la misma en los bloques CSS y
Javascripts, ya sea en la base o en cada una de las hojas donde se vayan utilizando, en este caso como
bootstrap se va a utilizar en todas las páginas del proyecto lo más lógico es incorporarlo directo en la
base. A continuación se muestra el ejemplo de cómo incluir los ficheros .css y .js mediante el método
asset de Twig:

<link href="{{ asset('flaty/assets/bootstrap/bootstrap.min.css') }}"
rel="stylesheet"/>
<link rel="stylesheet" href="{{ asset('flaty/assets/bootstrap/bootstrap-
responsive.min.css') }}"/>
<link rel="stylesheet" href="{{ asset('flaty/assets/font-awesome/css/font-
awesome.min.css') }}"/>
<link rel="stylesheet" href="{{ asset('flaty/assets/normalize/normalize.css')
}}"/>



<link rel="stylesheet" href="{{ asset('flaty/css/flaty.css')}}"/>
<link rel="stylesheet" href="{{ asset('flaty/css/flaty-responsive.css')}}"/>
{#<link rel="shortcut icon" href="{{ asset('flaty/img/favicon.html') }}"/>#}
<script src="{{ asset('flaty/assets/modernizr/modernizr-2.6.2.min.js')

}}"></script>
{% endblock %}
{% block javascript %}


<script> window.jQuery || document.write('<script src="{{
asset('flaty/assets/jquery/jquery-1.10.1.min.js') }}"><\/script>')</script>
<script src="{{ asset('flaty/assets/bootstrap/bootstrap.min.js') }}"></script>

<script src="{{ asset('flaty/assets/nicescroll/jquery.nicescroll.min.js') }}"
></script>


<script src="{{ asset('flaty/assets/flot/jquery.flot.js') }}"></script>
<script src="{{ asset('flaty/assets/flot/jquery.flot.resize.js') }}"></script>
<script src="{{ asset('flaty/assets/flot/jquery.flot.pie.js') }}"></script>
<script src="{{ asset('flaty/assets/flot/jquery.flot.stack.js') }}"></script>
<script src="{{ asset('flaty/assets/flot/jquery.flot.crosshair.js') }}"></script>
<script src="{{ asset('flaty/assets/flot/jquery.flot.tooltip.min.js')
}}"></script>
<script src="{{ asset('flaty/assets/sparkline/jquery.sparkline.min.js')
}}"></script>

<script src="{{ asset('flaty/js/flaty.js') }}"></script>
{% endblock %}
5. Actualizar plantilla hija
Lo primero será establecer la herencia definiendo la plantilla de la cual se van a heredar las características
mediante:
{% extends base.html.twig' %}
Luego se crearán los bloques que serán sustituidos a partir de la plantilla base, por ejemplo el bloque
content que mostrará el contenido:
{% block content %}
<h1>Cliente list</h1>
{# … #}
{% endblock %}
Una vez efectuado realizados estos cambios se deberá mostrar algo como:
Para incluir por ejemplo la tabla dinámica proporcionada por la plantilla para mostrar el listado de
clientes:
1. Primeramente abrir la página de ejemplo proporcionada por la plantilla que muestra una tabla
dinámica (table_dynamic.html) y visualizarla. Si se observa en la definición de los ficheros css
y js se especifican los ficheros básicos y específicos para cada caso.
2. Añadir en la plantilla hija en este caso index.html.twig de clientes (que será la encargada de
mostrar todos los clientes) los bloques stylesheets y javascript que contendrán los
archivos css y js específicos de la tabla dinámica. Incluir la función parent() para que los
archivos css y js de la plantilla padre no sean reemplazados por los definidos en plantilla hija.
Finalmente estos bloques quedarán definidos de la siguiente manera haciendo uso de los métodos
asset y parent proporcionados por Twig:
{{ parent() }}

<link rel="stylesheet" href="{{ asset('flaty/assets/data-
tables/DT_bootstrap.css') }}" />
{% endblock %}
{% block javascript %}
{{ parent() }}

<script type="text/javascript" src="assets/data-
tables/jquery.dataTables.js"></script>
<script type="text/javascript" src="assets/data-tables/DT_bootstrap.js"></script>
{% endblock %}
3. Localizar en table_dynamic.html la parte del código correspondiente a mostrar la tabla, en este

caso será la información delimitada por:

…

Se deberá copiar todo ese código en la plantilla hija donde se desea mostrar la tabla, recordar que toda
la información a mostrarse debe ir dentro del bloque content de la plantilla hija.
Si se muestra la página deberá verse algo como esto:

Ahora solo resta actualizar la tabla (filas y columnas) con los datos de los clientes, finalmente se verá algo como:

Guía para Incluir Plantilla Bootstrap

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Guía para Incluir Plantilla Bootstrap

Загружено:

Авторское право:

Доступные форматы

Guía para usar una plantilla Bootstrap en la aplicación.

 {{ ... }}: imprime una variable o el resultado de una expresión a la plantilla;

Plantillas, herencia y diseño

Una plantilla hija podría tener este aspecto:

{% block title %}My cool blog posts{% endblock %}

Incluyendo otras plantillas

Incluir esta plantilla en cualquier otra plantilla es sencillo:

La solución es simplemente insertar el resultado de un controlador en la plantilla entera.

La plantilla recentList es perfectamente clara:

Incluyendo hojas de estilo y JavaScript en Twig

Integrando plantilla Bootstrap

1. Copiar físicamente los archivos en el proyecto.

Primeramente, descomprimir el fichero de la plantilla seleccionada por ejemplo, Flaty, si se observa la

2. Actualizar la plantilla base

Se deberá copiar el fichero index.html de la plantilla bootstrap seleccionada, en el directorio

3. Crear los bloques necesarios en la plantilla base

4. El código para usarlos en el proyecto

{#<link rel="shortcut icon" href="{{ asset('flaty/img/favicon.html') }}"/>#}

<script src="{{ asset('flaty/assets/modernizr/modernizr-2.6.2.min.js')

<script src="{{ asset('flaty/assets/bootstrap/bootstrap.min.js') }}"></script>

5. Actualizar plantilla hija

3. Localizar en table_dynamic.html la parte del código correspondiente a mostrar la tabla, en este

Si se muestra la página deberá verse algo como esto:

Вам также может понравиться