CakePHP avec Bootstrap (de Twitter)

Question

Je suis nouveau à CakePHP et je veux savoir un moyen d'utiliser Boostrap de Twitter dans les dispositions combinées avec gâteau. Ma principale préoccupation est de faire fonctionner le Form Helper normalement, car je pense qu'il utilise des classes CSS préconfigurées, et si je change le CSS par défaut, j'imagine que le Form Helper s'arrêtera de fonctionner devrait. Je lis ce tutoriel mais il ne semble pas être complet.
Build a PHP application using CakePHP and (twitter) Bootstrap, Part 1

Quelqu'un at-il fait cela?

Merci! : D

Answer 1

Toutes les réponses actuelles nécessitent des modifications dans les fichiers de vue.

Le plugin suivant « Bootstrap-ifier » vos vues actuelles sans aucune modification du code/balisage:

https://github.com/slywalker/TwitterBootstrap

Tout ce que vous devez faire est alias le FormHelper et HtmlHelper afin que tous vos appels existants à $this->Form & $this->Html sera traitée par le plugin à la place.

Ne peut pas être plus facile que cela :)

Answer 2

CSS est purement présenté; comment peut-il affecter l'assistant de la forme de travailler comme il se doit?

Certaines des classes de validation CSS peuvent nécessiter d'être retravaillées ainsi que les retours de Cake en cas d'erreur.

Vous pouvez modifier facilement la sortie en utilisant l'option 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 je fais la même chose pour une application, et je l'ai trouvé les classes CSS pour les éléments de formulaire correspondance très bien en fait.

éléments de formulaire Twitter Bootstrap de ressemblent à ceci:

<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> 

et produit des éléments comme FormHelper CakePHP ceci:

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

La principale différence étant l'étiquette en dehors de la div dans Bootstrap. FormHelper vous permet de définir des classes personnalisées comme array('class' => 'clearfix').

La classe .input dans Bootstrap est définie dans forms.less et sets uniquement margin-left: 150px; pour déplacer les entrées vers la droite. Si vous n'utilisez pas ce style, vous pouvez simplement ajouter margin-right: 20px; à <label> à la place.

Le code dans mon élément de forme finit par être:

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

... et génère des éléments qui sont décorées de façon appropriée par Bootstrap. Je suis toujours en train d'apprendre les deux frameworks, donc il peut y avoir des problèmes avec ça. J'espère que ça aide quand même.

Answer 4

Cela semble être ce que vous cherchez. https://github.com/loadsys/twitter-bootstrap-helper/branches