CakePHPのデザインをTwitter Bootstrapに変更する作業のメモ
簡単なフレームワークが無いかな?→CakePHPを使おう。
http://asklife.info/archives/3020
デフォルトのデザインを今っぽいのにしたい→Twitter Bootstrapに変更しよう。
http://asklife.info/archives/3027
「作業手順」
1.
http://twitter.github.com/bootstrap/
からTwitter Bootstrapをダウンロード
2.
CakePHPのwebrootのcss js img各フォルダにTwitter Bootstrapの各フォルダにある各ファイルを配置(コピペ)
3.
これで基本的にはHeplerのOption指定で利用出来る。
Option指定の方法はこの辺
http://dotinstall.com/lessons/……ic_cakephp
4.
TwitterBootstrapとCakePHPとのFormの微妙な差をヘルパーで解決。
https://gist.github.com/126657……p_form.php
これを以下の構成で配置
views/helpers/BootstrapFormHelper.php
使い方
使いたいところに
<?php echo $this->BootstrapForm->input('name'); ?>
multiple checkboxを横並びにするときは
<?php echo $this->BootstrapForm->input('Prefecture', array( 'label' => '都道府県', 'multiple' => 'checkbox', 'options' => $prefectures, 'li' => array('style' => 'width:6em;float:left;padding-top:2px;'), )); ?>
5.
Paginationの微差を解決
https://gist.github.com/126385……nation.ctp
これは以下の構成で配置
views/elements/pagination.ctp
使い方:使いたいとろこに
<?php echo $this->element('paginate'); ?>
参考記事
http://dotinstall.com
http://d.hatena.ne.jp/slywalke……1317884853
と思ったら、プラグインがありました。
https://github.com/slywalker/T……rBootstrap
1.ダウンロードしたのをCake2の app/Plugin/TwitterBootstrap に配置
2.app/Plugin/TwitterBootstrap/webroot に bootstrap の js, css, img を配置
3.プラグインの中にある View/Layout/bootstrap.ctp と View/Element/alert.ctp を app/View の下の各所にコピー。
4.app/Console/cake bake するとき増える適当なbakeテンプレートを選ぶとコントローラとビューにそれぞれ、プラグインからbakeテンプレートが提供される。
※bakeの仕方
http://blog.verygoodtown.com/2……nutes-cms/
http://hijiriworld.com/web/cakephp-bake/
http://wiki.livedoor.jp/kindai……4%B9%A4%EB
0 Comments
2 Pingbacks