Este plugin integra Twitter Bootstrap con Joomla! 2.5.x. Carga todos los archivos necesarios y hace algunos ajustes para facilitar el diseño de templates y extensiones compatibles con bootstrap.
Si tienes varias extensiones o templates que requieren Bootstrap este plugin te permite controlar desde un único punto cómo y cuándo se carga bootstrap. Te recomendamos que desactives la carga de bootstrap en todas las extensiones y controles bootstrap desde el plugin.
1Características
- Controla la carga de Bootstrap desde un único sitio
- Parcheado para asegurar que funciona con Mootools activado y sin el bug de objetos colapsables
- Elige el modo global de Bootstrap (activado/desactivado) y luego personaliza la carga directamente en los enlaces del menú
- Compilador de LESS para personalizar el CSS de Bootstrap y cargar sólo lo que necesitas
- Minificador de JS para personalizar el JS de Bootstrap y cargar sólo lo que necesitas
- Último Bootstrap 2.2.2 que soluciona los problemas de los menús desplegables con dispositivos táctiles
- Controla también la carga de jQuery
2Instalación
Clona el repositorio de Github o descarga el archivo ZIP comprimido de la barra lateral. Después instala normalmente desde el gestor de extensiones de Joomla! como paquete (si has descargado la versión comprimida) o desde un directorio (si has clonado el repositorio). Clonar el respositorio te da la ventaja de poder actualizar la última versión con un simple git pull.
3Archivos personalizados
Desde la versión 1.0.2 el plugin te permite cargar tus propios archivos CSS y JS en lugar de los que vienen incluidos. Esto es algo útil en casos especiales como:
- Usas una versión personalizada/parcheada de bootstrap o jQuery (no recomendado).
- Han salido nuevas versiones de jQuery o bootstrap y quieres actualizar YA antes de que el plugin sea actualizado.
- Al actualizar el plugin con nuevas versiones de Bootstrap algo de tu web deja de verse correctamente! De esta forma aún puedes cargar la versión anterior.
Para anteponer tus archivos a los que vienen por defecto en el plugin:
1. En tu plantilla crea el directorio:
templates/YOURTEMPLATE/html/plg_system_twbootstrap
2. Copia los directorios "css" y "js" desde:
plugins/system/twbootstrap
a:
templates/YOURTEMPLATE/html/plg_system_twbootstrap
3. Listo! El plugin detectará cualquier archivo en tu template y lo cargará en lugar de los integrados.
4Mejoras en el desarrollo de plantillas
El plugin define algunas constantes propias para facilitar el desarrollo de plantillas y evitar vistas duplicadas para el modo estático o fluído de bootstrap. Las constantes pueden usarse donde se quiera pero están diseñadas específicamente para su uso en vistas de plantilla.
Constantes definidas:
BOOTSTRAP_VERSION : Muestra la versión de Bootstrap incluida
BOOTSTRAP_COM_COLUMNS : Muestra el número de columnas disponibles para el componente. Esto permite personalizar las vistas dependiendo de las columnas que tenemos disponibles (ver ejemplo debajo).
BOOTSTRAP_CONTAINER_CLASS : Clase del contenedor para el modo actual de bootstrap (fluido/estático).
BOOTSTRAP_ROW_CLASS : Clase de la fila para el modo actual de bootstrap (fluido/estático).
Un ejemplo de vista de template empezaría con:
$bsContainerClass = defined('BOOTSTRAP_CONTAINER_CLASS') ? BOOTSTRAP_CONTAINER_CLASS : 'container';
$bsRowClass = defined('BOOTSTRAP_ROW_CLASS') ? BOOTSTRAP_ROW_CLASS : 'row';
$bsComColumns = defined('BOOTSTRAP_COM_COLUMNS') ? BOOTSTRAP_COM_COLUMNS : 12;
De esta forma nos aseguramos de que tu contenido está funcionando con bootstrap usando el plugin o sin él. Sin el plugin usará los valores por defecto y con el tomará los valores del plugin.
Ahora, por ejemplo, puedes definir el ancho de los span dependiendo del espacio disponible en el componente:
switch ($bsComColumns) {
case 4:
case 5:
case 8:
case 12:
$bsSpanColumns = 4;
break;
case 6:
case 7:
case 9:
case 9:
case 10:
case 11:
$bsSpanColumns = 3;
break;
default:
$bsSpanColumns = $bsComColumns;
break;
}
$bsSpanClass = 'span' . $bsSpanColumns;
Y entonces mostrar el contenido de la forma:
<div class="<?php echo $bsContainerClass; ?>">
<div class="bsRowClass">
<?php foreach ($this->items as $item): ?>
<div class="<?php echo bsSpanClass; ?>">
<p><?php echo $item->title; ?></p>
</div>
<?php endforeach; ?>
</div>
</div>
Una forma mejor para que el código abra nuevas filas cuando los span superan el máximo ancho disponible (requerido en modo fluído):
<div class="<?php echo $bsContainerClass; ?>">
<div class="bsRowClass">
<?php
$availableColumns = $bsComColumns;
$openedRow = true;
?>
<?php foreach ($this->items as $item): ?>
<?php if($availableColumns < $bsSpanColumns):?>
<?php if($openedRow):?>
</div>
<?php endif; ?>
<div class="bsRowClass">
<?php
$availableColumns = $bsComColumns;
$openRow = true;
?>
<?php endif; ?>
<div class="<?php echo $bsSpanClass; ?>">
<p><?php echo $item->title; ?></p>
</div>
<?php $availableColumns -= $bsSpanColumns; ?>
<?php endforeach; ?>
</div>
</div>
De esta forma te asegurarás de que tu código siempre va a mostrarse como esperabas permitiendo al usuario seleccionar el modo de bootstrap que desee.
5Y ahora ¿qué?
Digital Disseny va a mantener este plugin actualizado con las últimas versiones de Twitter Bootstrap y a solucionar cualquier posible incidencia que surja ya que lo usamos como base para todos nuestros desarrollos. También tenemos algunas mejoras planificadas:
- Permitir al usuario establecer un ancho de componente para cada entrada de menú.
- Crear un archivo CSS que sobreescriba las clases de Bootstrap que entran en conflicto con Joomla 2.5.x. De esta forma se podrá usar el mismo backend para Joomla 2.5 y para Joomla 3.0.
- Solucionar posibles incidencias entre Mootools y Bootstrap.