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

参考記事
http://d.hatena.ne.jp/tanakahi……1328693981