Bootstrapを使ったCakePHP（Twitterから）

Question

私はCakePHPの新人です。私はケーキと組み合わされたレイアウトでTwitterからBoostrapを使用する方法を知りたいと思います。

私の主な関心事は、Form Helperは、事前設定されたCSSクラスを使用していると思っているため、Form Helperを正常に機能させることです。すべきだ。

このチュートリアルは読んでいますが、完全ではありません。
Build a PHP application using CakePHP and (twitter) Bootstrap, Part 1

これを行った人はいますか？

ありがとうございました！ ：D

Answer 1

すべての現在の回答では、ビューファイルの変更が必要です。

任意のコード/マークアップを変更することなく、あなたの現在の見解を「ブートストラップは、IFY」う、次のプラグイン：

https://github.com/slywalker/TwitterBootstrap

すべてを行う必要がFormHelperのとHtmlHelperのaliasされるように、既存のすべての呼び出しに$this->Form & $this->Htmlは、代わりにプラグインによって処理されます。

より簡単には得られません。

Answer 2

CSSは純粋にプレゼンテーションです。どのようにしてフォームヘルパーが正常に動作するのに影響しますか？

CSSの検証クラスの中には、エラーが発生したときにCakeが返すものだけでなく、再加工が必要なものがあります。

あなたは簡単にerrorオプション使用して出力を変更することができます：私はアプリのために同じことをやっている、と私は、フォーム要素の一致のためのCSSクラスを見つけた

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

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

Answer 3

を実際にはかなり上手くいく。

Twitterのブートストラップのフォーム要素は次のようになります。

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

そしてCakePHPのFormHelperのは、このように要素を生成します。

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

主な違いは、ブートストラップでdivの外のラベルであること。 FormHelperでは、array('class' => 'clearfix')のようなカスタムクラスを設定できます。ブートストラップで

.inputクラスは forms.less で定義され、唯一の右への入力を上に移動するmargin-left: 150px;を設定しています。このスタイルを使用しない場合は、代わりにmargin-right: 20px;を<label>に追加することができます。

私のフォーム要素内のコードがされて終わる：

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

を...とブートストラップにより適切にスタイリングされている要素を生成します。

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

私はまだ両方のフレームワークを学んでいるので、これに問題があるかもしれません。しかし、それが助けて欲しい。

Answer 4

これはあなたが探しているようです。 https://github.com/loadsys/twitter-bootstrap-helper/branches