CakePHPのデザインをTwitter Bootstrapに変更する作業のメモ
簡単なフレームワークが無いかな？→CakePHPを使おう。
http://asklife.info/archives/3020
デフォルトのデザインを今っぽいのにしたい→Twitter Bootstrapに変更しよう。
http://asklife.info/archives/3027
「作業手順」
１．
http://twitter.github.com/bootstrap/
からTwitter Bootstrapをダウンロード
２．
CakePHPのwebrootのcss js img各フォルダにTwitter Bootstrapの各フォルダにある各ファイルを配置（コピペ）
３．
これで基本的にはHeplerのOption指定で利用出来る。
Option指定の方法はこの辺
http://dotinstall.com/lessons/……ic_cakephp
４．
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;'),
)); ?>５．
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
１．ダウンロードしたのをCake2の app/Plugin/TwitterBootstrap に配置
２．app/Plugin/TwitterBootstrap/webroot に bootstrap の js, css, img を配置
３．プラグインの中にある View/Layout/bootstrap.ctp と View/Element/alert.ctp を app/View の下の各所にコピー。
４．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