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 に書いてあるので省略。