CakePHP con Bootstrap (desde Twitter)

Question

Soy nuevo en CakePHP y quiero saber cómo usar Boostrap desde Twitter en diseños combinados con cake.

Mi principal preocupación es hacer que el Ayudante de Formulario continúe funcionando normalmente, porque creo que usa clases de CSS preconfiguradas, y si cambio el CSS predeterminado, imagino que el Ayudante de Formularios dejará de funcionar ya que debería.

He leído este tutorial pero no parece estar completo.
Build a PHP application using CakePHP and (twitter) Bootstrap, Part 1

¿Alguien ha hecho esto?

¡Gracias! : D

Answer 1

Todas las respuestas actuales requieren cambios en los archivos de vista.

El siguiente plugin "Bootstrap-ify" sus puntos de vista actuales, sin ningún cambio de código/marcado:

https://github.com/slywalker/TwitterBootstrap

Todo lo que necesita hacer es alias la FormHelper y HtmlHelper de manera que todas sus llamadas existentes a $this->Form & $this->Html será manejado por el complemento en su lugar.

No puede ser más fácil que eso :)

Answer 2

CSS es puramente de presentación; ¿Cómo puede afectar al asistente de formularios para que no funcione como debería?

Algunas de las clases de validación de CSS pueden necesitar una nueva versión, así como lo que Cake devuelve cuando se produce un error.

Se puede modificar fácilmente la salida mediante la opción error:

$this->Form->input('Model.field', array('error' => array('wrap' => 'span', 
               'class' => 'boostrap-error'))); 

http://book.cakephp.org/view/1401/options-error

Answer 3

que estoy haciendo lo mismo para una aplicación, y he encontrado las clases CSS para el partido de los elementos de formulario muy bien en realidad.

elementos de formulario Bootstrap de Twitter se ven así:

<div class="clearfix"> 
    <label for="xlInput">X-Large input</label> 
    <div class="input"> 
    <input class="xlarge" id="xlInput" name="xlInput" size="30" type="text" /> 
    </div> 
</div> 

Y FormHelper de CakePHP genera elementos de la siguiente manera:

<div class="input text"> 
    <label for="UserName">Name</label> 
    <input name="data[User][name]" type="text" value="" id="UserName" /> 
</div> 

La principal diferencia es la etiqueta fuera del div en Bootstrap. FormHelper le permite configurar clases personalizadas como array('class' => 'clearfix').

La clase .input en Bootstrap se define en forms.less y sólo establece margin-left: 150px; para mover las entradas más a la derecha. Si no usa este estilo, puede agregar margin-right: 20px; a <label>.

El código en mi forma de elemento termina siendo:

echo $this->Form->input('first_name', array('div' => 'clearfix')); 

... y genera elementos que son de estilo adecuadamente por Bootstrap.

<div class="clearfix required"> 
    <label for="PersonFirstName">First Name</label> 
    <input name="data[Person][first_name]" maxlength="50" type="text" id="PersonFirstName"/> 
</div> 

Todavía estoy aprendiendo ambos frameworks por lo que puede haber problemas con esto. Espero que ayude sin embargo.

Answer 4

Esto parece ser lo que estás buscando. https://github.com/loadsys/twitter-bootstrap-helper/branches