x
Tutoriales para hacerte un Experto en Joomla

A nosotros tampoco nos gusta el spam.

Joomla 2.5 y Bootstrap

Publicado por BIAlita en Joomla
Joomla 2.5 con Bootstrap
5.0 de 5 basado en 1 voto(s)
  / 1
PocoMucho 

Como ya es conocido, Joomla 3.0 utiliza el framework de Bootstrap, pero para los que usamos la versión joomla 2.5, podemos hacer paginas web responsivas utilizando este Framework.

 

Descargar Bootstrap

Hay 2 versiones que podemos descargar. La primera contiene todos los archivos compilados y la segunda opción contiene todos los códigos originales.

En lo particular, sólo me ha funcionado bien la versión original. Una vez descargada, podemos crear nuestro template y comenzar a modificarlo.

El grid o rejilla de Bootstrap utiliza 12 columnas, con un ancho de 940 px, como lo vemos en la figura. 

Bootstrap grid

 

Sitios Web Responsivos

En esta publicación mostraremos pequeños ejemplos sobre como implementar el código de Bootstrap para hacer nuestro Joomla 2.5 responsivo.

El primer paso será agregar el siguiente código en nuestro archivo index.php de nuestra plantilla.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<linkhref="/assets/css/bootstrap-responsive.css"rel="stylesheet">

 

Componentes a utilizar

En la sección de componentes podemos encontrar una gran variedad para menús, breadcrumbs, botones, alertas, etc.

El que vamos a utilizar es el Componente Responsive navbar, donde el código es el siguiente: 

<divclass="navbar">
<divclass="navbar-inner">
<divclass="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<aclass="btn btn-navbar"data-toggle="collapse"data-target=".nav-collapse">
<spanclass="icon-bar"></span>
<spanclass="icon-bar"></span>
<spanclass="icon-bar"></span>
</a>
 
<!-- Be sure to leave the brand out there if you want it shown -->
<aclass="brand"href="#">Project name</a>
 
<!-- Everything you want hidden at 940px or less, place within here -->
<divclass="nav-collapse collapse">
<!-- .nav, .navbar-search, .navbar-form, etc -->
</div>
nbsp;
</div>
</div>
</div>

En el video a continuación vamos a mostrar como realizar un menú en Joomla y esconderlo para dispositivos móviles.

 

 

En el archivo index.php de nuestro template, debemos tener estas líneas de código dentro de la etiqueta <head> y por supuesto los archivos (css, js) en su carpeta correspondiente:

<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/bootstrap.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/bootstrap-responsive.css" type="text/css" />
<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
<script type="text/javascript" src="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/widgets.js"></script>
<script type="text/javascript" src="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/bootstrap-collapse.js"></script>
<script type="text/javascript" src="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/bootstrap-transition.js"></script>

Continuar leyendo:¿Que hay de nuevo en Bootstrap 3?

 

Te agradecería nos regalaras un +1 o votaras el artículo en la parte superior para seguir creando contenidos interesantes

 

Soy CEO de . Fundadora y co-administradora del grupo Joomla en México, también cuento con un Canal de YouTube sobre SEO Joomla y Wordpress que te invito visitar. Estoy certificada en Google Adwords y Google Analytics. Sígueme en mi perfil de Google + y salúdame para conocerte.

x
Tutoriales para hacerte un Experto en Joomla

A nosotros tampoco nos gusta el spam.