のえら

技術備忘とかメモとか.間違いはつっこんでいただきたい所存.アフィリエイトはやっていません.

CakePHP学習記録 そのよん Bootstrap 3 を導入してみる

Blog チュートリアル後に Bootstrap 3 でスタイルを変更してみる

諸事情により Bootstrap でレスポンシブWEBデザインのページを作成することになりそうなので、勉強も兼ねて CakePHP に導入するにはどうするのか試してみる。

ダウンロードと導入

Bootstrap
https://github.com/twbs/bootstrap

zip をダウンロードでもいいんだけど、今回は git で取得する。
20140502現在の最新バージョンは3.1.1

git clone https://github.com/twbs/bootstrap.git

とりあえず最低限使うものだけ配置。
今までアイコンは img だったけど fonts を読み込むようになっているので注意する。

cp -r bootstrap/fonts/ doc_root/app_root/app/webroot/
cp bootstrap/dist/css/bootstrap.css doc_root/app_root/app/webroot/css/.
cp bootstrap/dist/js/bootstrap.js doc_root/app_root/app/webroot/js/.

アプリケーション全体で使うので Layout/default.ctp に定義追加。

// デフォのスタイルは使わないのでコメントアウトか削除
// echo $this->Html->css('cake.generic');
echo $this->Html->css('bootstrap');

これで class を指定するだけでスタイルが当たる状態になる。
ヘルパーの作成やらフォームヘルパー調整はまた今度。

プラグイン

プラグインもあった。

便利なヘルパーがあるので、自前で作るより楽ちん。
paginator の class が pagination-centered で中央寄せ固定なので変更したかったら Helper をoverride しないとダメ?
https://github.com/slywalker/TwitterBootstrap

3.x 対応のプラグインも公開されている
https://github.com/slywalker/cakephp-plugin-boost_cake

使い方は README に書いてあるので省略。