Integración con Bootstrap

Hay varias extensiones de Yii que permiten integrar Bootstrap en nuestras aplicaciones. Una de las más completas es YiiBooster, que tiene múltiples widgets extra, y generador de código adaptado a Bootstrap integrado. Los pasos a seguir para instalarlo son:

Descarga la extensión desde YiiBooster|YiiBooster
Crea la carpeta protected/extensions/booster y descomprime dentro el fichero que has descargado
Modifica el fichero protected/config/main.php de la forma siguiente:

'components'=>array(
		'booster'=>array(
			'class'=>'ext.booster.components.Booster'
		),
                ...

Si únicamente vas a utilizar el tema bootstrap, se puede precargar el componente, para no hacerlo manualmente después:

  ...
  'preload'=>array('log','booster')
  ...

Si quieres utilizar el generador gii de booster, modifica también modules→gii:

	'modules'=>array(
 
		'gii'=>array(
			'class'=>'system.gii.GiiModule',
			'password'=>'PASSWORD',
			'ipFilters'=>array('127.0.0.1','::1'),
			'generatorPaths' => array(
				'booster.gii'
			)
	),

Si quieres mantener más de un tema de la aplicación, tal como se explica en Temas en Yii, puedes permitir que el usuario elija el tema, o asignarlo en función de que acceda desde un móvil o desde un PC. Para ello, en el index.php de arranque de la aplicación podríamos hacer algo así:

<?php
//index.php
$yii=dirname(__FILE__).'/../../yii-1.1.16/framework/yii.php';
$config=dirname(__FILE__).'/protected/config/main.php';
 
defined('YII_DEBUG') or define('YII_DEBUG',true);
defined('YII_TRACE_LEVEL') or define('YII_TRACE_LEVEL',3);
 
require_once($yii);
$app=Yii::createWebApplication($config);
 
function client(){
	if(strpos($_SERVER['HTTP_USER_AGENT'],'Android')) //Se puede ampliar para detectar MACOS
		return "mobile";
	else
		return "pc";
}
 
// ASIGNA TEMA
$theme='';
if(isset($_GET['theme'])) {
	$theme=$_GET['theme'];
	$app->user->setstate('theme',$theme);
} elseif(isset(Yii::app()->user->theme)){
	$theme=$app->user->theme;
}elseif(client()=='mobile')
	$theme='bootstrap';
else
        $theme='classic';
 
$app->theme=$theme;
if($theme=='bootstrap')
	$app->getComponent("booster");
 
 
$app->run();

De esta forma, si el usuario ejecuta index.php?theme=bootstrap, se cambiará a ese tema durante toda la sesión, o hasta que se ejecute index.php?theme=classic

Si ya tienes vistas creadas al estilo clásico, puedes adaptarlas a Bootstrap, o crear unas nuevas con el generador. Básicamente, los cambios más importantes para pasar del tema estándar al de bootstrap son los widgets. Por ejemplo, si el grid estándar es 'zii.widgets.grid.CGridView', al hacer una vista para bootstrap, pondremos 'booster.widgets.TbGridView'.

En la vista themes/bootstrap/views/layouts/main.php el cambio principal es que utilizamos los widgets NavBar de Bootstrap . Un ejemplo de ese layout podría ser:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="language" content="es" />
	<?php
	//CIERRA SESION  a los 15 minutos
		echo '<meta http-equiv="REFRESH" content="900;url='.Yii::app()->createAbsoluteUrl('/site/logout',array('tout'=>1)).'"></HEAD>';
	?>
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
	<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/themes/bootstrap/main.css" />
	<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/css/form.css" />
	<title><?php echo CHtml::encode($this->pageTitle); ?></title>
</head>
 
<body>
 
<?php
	//MENU
	require('_menu.php');
 
	$this->widget('booster.widgets.TbNavbar',array(
		'brand'=>'MI APLICACION',
		'collapse'=>true,
		'fixed'=>true,
		'htmlOptions'=>array('style'=>'margin-bottom:1px'),
		'items'=>array(
			array(
				'class'=>'booster.widgets.TbMenu',
				'type'=>'navbar',
				'items'=>$items
			),
			array(
				'class'=>'booster.widgets.TbMenu',
				'type'=>'navbar',
				'items'=>array(array('label'=>'Salir ('.Yii::app()->user->name.')', 'icon'=>'off',
					'url'=>array('/site/logout'), 'visible'=>!Yii::app()->user->isGuest))
			),
		),
	));
 
?>
 
 
 
<?php
 
//if(isset($this->breadcrumbs))
	//echo TbHtml::breadcrumbs($this->breadcrumbs);
 
$flashMessages = Yii::app()->user->getFlashes();
if ($flashMessages) {
    echo '<ul class="info">';
	$static=0;
    foreach($flashMessages as $key => $message) {
		if($k=strpos($key,'static')!==false) $static=1;
		if($key=='static') $key='success';
        echo '<div class="flash-' . $key . '">' .$message . "</div></li>\n";
    }
    echo '</ul>';
	if(!$static)
	Yii::app()->clientScript->registerScript(
	   'myHideEffect',
	   '$(".info").animate({opacity: 1.0}, 2000).fadeOut("slow");',
	   CClientScript::POS_READY
	);
}
 
echo $content;
 
?>
	<script>$(".buttonlink").addClass("btn").addClass("btn-primary").removeClass("buttonlink");</script>
	<hr>
	<a href="index.php?theme=classic" style='font-size:0.7em;'>Cambiar a vista Escritorio</a>
</div><!-- page -->
</body>
</html>

Los items del menú se han sacado a un fichero externo llamado _menu.php para que sea más cómodo editarlos:

//_menu.php
$items=array(
	array('label'=>'Inicio', 'url'=>array('/site/index')),
	array('label'=>'Títulos', 'url'=>array('/titulos/index')),
	array('label'=>'Autores', 'url'=>array('/autores/index')),
	...
        array('label'=>'Login', 'url'=>array('/site/login'), 'visible'=>Yii::app()->user->isGuest),
	array('label'=>'Mi perfil', 'url'=>array('/usuarios/miperfil','visible'=>!Yii::app()->user->isGuest)),
	array('label'=>'Logout ('.Yii::app()->user->name.')', 'url'=>array('/site/logout'), 'visible'=>!Yii::app()->user->isGuest)
        );

Si utilizamos roles en la aplicación y los menús de cada rol son muy diferentes, podríamos crear un fichero _menuXX.php por cada rol y cargar el que corresponda

Wiki IES Font de Sant LLuís

Herramientas de usuario

Herramientas del sitio

Integración con Bootstrap