CakePHP 2.0 con Twitter Bootstrap

Question

¿Hay alguna manera de configurar CakePHP para que funcione bien con Twitter Bootstrap? Me doy cuenta de que ya se ha formulado esta pregunta here, pero la respuesta no fue completa.

También hay bastantes tutoriales por ahí, pero todos están desactualizados o simplemente no funcionan, por ejemplo: Build a PHP application using CakePHP and (twitter) Bootstrap, Part 1.

Gracias!

Answer 1

Suponiendo que el archivo CSS se incluye en su diseño, en su opinión de las formas que puede utilizar el follwoing:

<?php echo $this->Form->create('User', array(
'inputDefaults' => array(
    'div' => 'control-group', 
    'label' => array('class' => 'control-label'), 
    'between' => '<div class="controls">', 
    'after' => '</div>', 
    'class' => 'span3', 
    'error' => array('attributes' => array('wrap' => 'div', 'class' => 'alert alert-error')) 
))); 

echo $this->Form->input('password',array(
       'after' => '<span class = \'help-inline\'>Minimum of 5 characters.</span></div>')); 
      ?> 

He encontrado que este método funcione perfectamente con cake2.0 y arrancar 2.0

esto producirá el siguiente

<div class="control-group required error"> 
<label for="UserPassword">Password</label> 
<div class="controls"> 
<input name="data[User][password]" class="span3 form-error" type="password" value="" id="UserPassword"> 
<span class="help-inline">Minimum of 5 characters.</span></div> 
<div class="alert alert-error">You must provide a password.</div> 
</div> 

el html anterior es después de que el formulario ha sido enviado y se ha devuelto un error.

Answer 2

Bootstrap no utiliza ningún código del lado del servidor.

excepto para los proveedores menos, lo que se puede compilar a CSS regular en el servidor, o como el sitio LESS CSS muestra puede hacer que el navegador compila utilizando less.js así:

<link rel="stylesheet/less" type="text/css" href="LESS_FILE_HERE.less"> 
<script src="less.js" type="text/javascript"></script> 

Sólo tiene que unir todos los archivos .less usando stylesheet/less y el archivo less.js y debería funcionar.

Aparte de eso, Bootstrap es solo HTML y Javascript. simplemente coloque todos los javascript en la carpeta webroot/js y haga un diseño para el HTML principal y comience.

Answer 3

He hecho esto. Lo que se necesita hacer es la siguiente:

• crear el diseño app/views/layouts/default.ctp
• copia el código HTML de arranque en esa
• actualización del diseño con el código específico torta

funciona como un encanto

Answer 4

tener un vistazo a la AssetCompress plugin de CakePHP que maneja la compilación MENOS para usted si usted tiene NodeJS y menos instalado en su servidor.

Luego solo tiene que incluir los archivos CSS en su diseño y estilo de los formularios usando las clases de Bootstrap.

Answer 5

Pedido nuestro Twitter Bootstrap ayudante

https://github.com/loadsys/twitter-bootstrap-helper

Answer 6

en mi humilde opinión, el mejor plugin de Twitter Bootstrap (+ recomendado por uno de los desarrolladores de la torta en el seguimiento de errores) es:

https://github.com/slywalker/TwitterBootstrap

Lo útil de esto es que usa Cake 2's aliasing para los ayudantes, por lo que no es necesario que cambies el código de tu vista.

Así que la normal y $this->Html->$this->Form-> en toda su edad código es la salida Bootstrap marcado. Increíble.

Answer 7

Aquí hay una más reciente:
http://drawrdesign.com/twitter-bootstrap-for-cakephp

página de Github:
https://github.com/Rhym/cakeStrap

Answer 8

Tal vez te gusta este plugin: https://github.com/BradCrumb/lesscompiler.

Es un componente de CakePHP que compila automáticamente menos archivos en archivos css. Acabo de probarlo con Bootstrap y funciona find

Answer 9

Vamos a hacerlo simple y actualizar esto. La forma más rápida y más fácil de hacer esto es como sigue y está vigente a partir de v: 2.9

Descargar las 3 carpetas para el arranque aquí: http://twitter.github.io/bootstrap/getting-started.html

Entonces desempaquetar los archivos y mover:

css/bootstrap.css 
css/bootstrap.min.css 
css/bootstrap-responsive.css 
css/bootstrap-responsive.min.css 

     -TO- 

app/webroot/css/ 

     -THEN MOVE- 

js/bootstrap.js 
js/bootstrap.min.js 

     -TO- 

app/webroot/js/ 

     -THEN MOVE- 

img/glyphicons-halflings-white.png 
img/glyphicons-halflings.png 

     -TO- 

app/webroot/img/ 

*** ¡ES MUY IMPORTANTE QUE NO PONGA ESTOS ARCHIVOS EN LA RAÍZ DE SU SITIO (lo explicaré más adelante ...)!

A continuación, en el editor de código de su elección (yo prefiero Netbeans) abrir el archivo:

app/View/Layouts/default.ctp 

Debe quedar como:

<?php 
/** 
* 
* PHP 5 
* 
* CakePHP(tm) : Rapid Development Framework (http://cakephp.org) 
* Copyright (c) Cake Software Foundation, Inc. (http://cakefoundation.org) 
* 
* Licensed under The MIT License 
* For full copyright and license information, please see the LICENSE.txt 
* Redistributions of files must retain the above copyright notice. 
* 
* @copyright  Copyright (c) Cake Software Foundation, Inc. (http://cakefoundation.org) 
* @link   http://cakephp.org CakePHP(tm) Project 
* @package  app.View.Layouts 
* @since   CakePHP(tm) v 0.10.0.1076 
* @license  MIT License (http://www.opensource.org/licenses/mit-license.php) 
*/ 

$cakeDescription = __d('cake_dev', 'CakePHP: the rapid development php framework'); 
?> 
<!DOCTYPE html> 
<html> 
<head> 
<?php echo $this->Html->charset(); ?> 
<title> 
    <?php echo $cakeDescription ?>: 
    <?php echo $title_for_layout; ?> 
</title> 
<?php 
    echo $this->Html->meta('icon'); 

    echo $this->Html->css('cake.generic'); 


    echo $this->fetch('meta'); 
    echo $this->fetch('css'); 
    echo $this->fetch('script'); 

?> 
</head> 
<body> 
<div id="container"> 
    <div id="header"> 
     <h1><?php echo $this->Html->link($cakeDescription, 'http://cakephp.org'); ?></h1> 
    </div> 
    <div id="content"> 

     <?php echo $this->Session->flash(); ?> 

     <?php echo $this->fetch('content'); ?> 
    </div> 
    <div id="footer"> 
     <?php echo $this->Html->link(
       $this->Html->image('cake.power.gif', array('alt' =>  $cakeDescription, 'border' => '0')), 
       'http://www.cakephp.org/', 
       array('target' => '_blank', 'escape' => false) 
      ); 
     ?> 
    </div> 
</div> 
<?php echo $this->element('sql_dump'); ?> 
</body> 
</html> 

Encuentra este:

echo $this->Html->css('cake.generic'); 

A continuación, agregue esto:

echo $this->Html->css('cake.generic'); 

echo $this->Html->css('bootstrap'); 

echo $this->Html->css('bootstrap.min'); 

echo $this->Html->css('bootstrap-responsive'); 

echo $this->Html->css('bootstrap-responsive.min'); 

Encuentra este:

echo $this->fetch('script'); 

A continuación se añade lo siguiente:

echo $this->Html->script('bootstrap'); 

echo $this->Html->script('bootstrap.min'); 

*** Recuerde que antes, cuando dije que iba a explicar por qué los archivos deben estar en el directorio web raíz (Para alguien nuevo en MVC)? El código anterior es cómo Cake incluye sus scripts y css. El método que utiliza para esto se ve en la aplicación/raíz web/js para los archivos javascript; y respectivamente en app/webroot/css para archivos css.Esto hace que la inclusión de los archivos js y css sea una sincronización. Si desea que los archivos js/css se incluyan GLOBALMENTE, inclúyalos default.ctp.

* Si solo necesita una secuencia de comandos para usar con una vista/página, utilice este mismo código en el archivo de visualización en el que lo necesite.

Puede sonar un poco complicado, pero solo debería tomar 3 minutos para incluir el arranque de Twitter en todo el mundo de esta manera.

Espero que esto ayude!

Answer 10

Estoy de acuerdo con @Costa, el plugin de Slywalker es la mejor solución. Aquí está la nueva versión de su complemento, que funciona con las dos ramas de Twitter Bootstrap 2.xy 3.x.

Este plugin es mucho mejor ya que se extiende muy bien Html Helper, Form Helper y alertas.

Fork BoostCake Plugin for CakePHP 2.x at Github

Answer 11

que tenían el mismo problema usando slywalker/cakephp-plugin-boost_cake. Abrí un boleto y lo arregló en unas pocas horas. Se actualiza a 1,03 y me dijo que utilizar de esta manera:

<?php echo $this->Form->input('email', array('label' => array('text' => __('Email:'),), 'beforeInput' => '<div class="input-append">', 'afterInput' => '<span class="add-on"><i class="icon-envelope"></i></span></div>')); ?> 

espero que ayude a alguien más, también.