Tutorial: Armando un sitio con Master Bootstrap

Escrito por | 01 Septiembre 2014 | Publicado en Septiembre 2014
En el tutorial anterior, vimos la instalación y puesta a punto inicial para Master Bootstrap, dejando el menú y algunas posiciones básicas terminadas. Ahora, veremos un sitio con varias posiciones y la forma de dejarlas funcionando perfectamente.

Un sitio corporativo clásico

Necesitamos crear un sitio corporativo con las siguientes características; logo, menu, slideshow, 3 módulos de servicios, una presentación, 4 módulos abajo, y el copyright. Algo como esto:

mb01

Logo y menu

Subimos el logo desde la administración de Master Bootstrap, con las medidas proporcionales.

mb02

Luego, el menú. Buscamos el módulo “Mainmenu”, que viene en el core de Joomla! y le asignamos la posición “Navigation”. En la pestaña Avanzado, le asignamos la siguiente clase CSS:

nav menu navbar-nav navbar-right

Ya tenemos el header listo.

Slideshow

Podemos usar dos posiciones, dependiendo del estilo que queramos; Fullwidth o Showcase. La primera usa todo el ancho, ya que no tiene el div container. La segunda, ocupa el ancho predeterminado de Bootstrap. Como ejemplo, vamos a usar "Fullwidth".

Como queremos un slideshow que rote, vamos a ocupar un módulo llamado Slideshow CK, que pueden descargar desde el JED. Una vez instalado, se le asigna la posición “Fullwidth”.

Módulos de servicios

Estos módulos los haremos del mismo ancho, así que cada uno debe tener como clase.

col-md-4

esto en la pestaña Avanzado - Clase CSS del módulo

mb03

 

Presentación

Acá usaremos un artículo de contenido, que describa a la empresa. Es posible por supuesto, usar un módulo, pero vamos a ocupar esta vez la opción de un artículo de contenido. Entonces ya saben, asignan al menú HOME un artículo.

Módulos en Bottom

Generalmente estos módulos son del mismo tamaño, pero para ver la flexibilidad de Master Bootstrap, vamos a hacerlos de diferentes tamaños, con la siguiente proporción: 2 3 5 2

Para eso, los módulos deben tener las siguientes clases respectivamente:

Bottom 1: col-md-2
Bottom 2: col-md-3
Bottom 3: col-md-5
Bottom 4: col-md-2

Ahora, para agregarle más color, podemos usar la siguientes reglas CSS, en template.css:

#bottom .moduletable {background: transparent;border: 0;color: #eee;}
#bottom {background: none repeat scroll 0 0 #333;}

Y para que tengan una misma altura, agregamos la siguiente regla en template.css

.height-bottom .moduletable {min-height: 240px;}

Finalmente, agregamos esa regla a cada módulo, ejemplo:

Bottom 1: col-md-2 height-bottom

Copyright

Lo último es la posición footer, que es dónde va la información de copyright del sitio. Por defecto, está pegada independiente del tamaño de la pantalla.

Simplemente escribimos el texto y la clase col-md-12

Deberíamos tener algo parecido a esto:

mb04

Como ven, es sumamente fácil armar un sitio con Master Bootstrap. Si eres un desarrollador o diseñador medio o avanzado, te sorprenderás de todo lo que puedes lograr partiendo desde 0, sin depender de clubs templates, utilizando solamente tu creatividad y conocimientos.

Master Bootstrap fue concebido como un framework - no como template - para trabajar desde 0, pero con el primer paso listo.

Visto 22624 veces Etiquetado como Spanish, Desarrollador