最近はPCとスマホの比率が半々ぐらいになったとかで、レスポンシブデザインとかHTML5だとか、急速に環境が変わりつつあります。
CakePHPでも簡単にお洒落なデザインにしたい・・・
そんなときに使えるのが「Twitter Bootstrap」というプラグインです。
「Bootstrap」というデザインのテンプレートらしきものがあり、これをCakePHP用にしたものが「Twitter Bootstrap」です。
それではインストールしてみましょう。
まず、「TwitterBootstrap」をダウンロードしてきます。
フォルダを解凍したら「Twitter Bootstrap」というフォルダ名に変更してください。
これを/App/Pluginにコピーします。
次に「/app/Config/bootstrap.php」に以下の行を加えます。
|
1 |
CakePlugin::load(array('TwitterBootstrap')); |
テンプレートをコピー
「app/Plugin/TwitterBootstrap/View/Layouts/default.ctp」を「app/View/Layouts/bootstrap.ctp」にコピー
default.ctpの名前をbootstrap.ctpに変更してコピーしてください。
/Controlller/AppController.phpを開きヘルパーにTwitterBootstrapを指定します。
|
1 2 3 4 5 6 7 8 9 |
class AppController extends Controller { public $helpers = array( 'Session', 'Html' => array('className' => 'TwitterBootstrap.BootstrapHtml'), 'Form' => array('className' => 'TwitterBootstrap.BootstrapForm'), 'Paginator' => array('className' => 'TwitterBootstrap.BootstrapPaginator'), ); public $layout = 'bootstrap'; } |
ここまでで、下準備は完了です。
デザインのテンプレートとなる「bootstrap」をダウンロードします。
この中身をウェブルートの「css」「img」「js」に上書きコピーします。
コントローラー名に「/twitter_bootstrap/」を指定するとサンプル画面をみることができます。
例）http://www.example.com/twitter_bootstrap/
人気記事一覧
- MySQL 最大の値・最新の日付データを１つ抽出する方法（MAX）
- [CakePHP] XformHelperの使い方
- Linux: スワップファイル（swp）の削除方法
- HTMLのForm methodとactionについて
- PHPでカンマ区切りデータを配列に入れる方法 （explode）
- [エラー対処] failed to open stream: No such file or directory
- [vsftp] FileZillaから接続できない場合の対処法
- PHP5.1→PHP5.3へバージョンアップする方法（CentOS）
- [CSS]ブロック要素（div）の高さを、内部のfloat要素に合わせて自動調整する
- PHPでテキストを１行ずつ読み込む方法（file_get_contents,explode)
関連記事一覧
- [CakePHP] View::element() テンプレート・Viewに広告を表示
- [CakePHP2]DebugKitのインストールと設定
- [CakePHP]404 Not Foundページのカスタマイズ方法
- [CakePHP2]TwitterBootstrapのフォーム（input）の幅を変更する方法
- [CakePHP]IN句を使ったときに指定順に表示する
- time
- Table ‘テーブル名’ is marked as crashed and should be repaired が表示されたときの処置方法
- [CakePHP]エラー対処 URL rewriting is not properly configured on your server.
- CSVのインポート（phpMyAdmin）
- ユーザーの追加方法 useradd （Linux）