11

私はCakePHPを初めて使用し、TwitterのBoostrapをケーキと組み合わせたレイアウトで使用する方法を知りたいです。

私の主な関心事は、フォームヘルパーが正常に機能し続けるようにすることです。これは、事前構成されたCSSクラスを使用していると思います。また、デフォルトのcssを変更すると、フォームヘルパーが正常に機能しなくなると思います。

このチュートリアルを読みましたが、完全ではないようです。
CakePHPと（twitter）Bootstrap、パート1を使用してPHPアプリケーションを構築する

誰かがこれをしましたか？

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

4

4 に答える 4

13

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

一部のCSS検証クラスは、エラーが発生したときにCakeが返すものと同様に、手直しが必要な場合があります。

errorオプションを使用して、出力を簡単に変更できます。

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

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

于 2011-11-08T12:03:18.330 に答える
6

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

于 2012-03-24T02:47:14.790 に答える
3

私はアプリでも同じことをしていますが、フォーム要素のCSSクラスは実際にはかなりよく一致していることがわかりました。

TwitterのBootstrapフォーム要素は次のようになります。

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

主な違いは、Bootstrapのdivの外側のラベルです。FormHelperを使用すると、のようなカスタムクラスを設定できますarray('class' => 'clearfix')。

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

私のフォーム要素のコードは次のようになります。

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

...そしてBootstrapによって適切にスタイル設定された要素を生成します。

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

私はまだ両方のフレームワークを学んでいるので、これに問題があるかもしれません。それがお役に立てば幸いです。

于 2011-11-09T07:32:44.087 に答える
2

現在の回答はすべて、ビューファイルを変更する必要があります。

次のプラグインは、コード/マークアップを変更せずに現在のビューを「ブートストラップ」します。

https://github.com/slywalker/TwitterBootstrap

必要なのは、FormHelperとHtmlHelperのエイリアス$this->Formを作成することだけです。これにより、 ＆への既存のすべての呼び出し$this->Htmlが代わりにプラグインによって処理されます。

それより簡単になることはできません:)

于 2013-05-25T22:24:21.557 に答える