TwitterBootstrapは米国のTwitter社が開発しているフロントエンドツールで、これを使えば簡単に綺麗なWebサイトが構築できてしまいます。
この仕組みを使えばサイトをスピーディに公開することができます。スタートアップ時のスピードを上げることができるのが嬉しいところです。
Contents
TwitterBootstrapの特徴
簡単で綺麗なデザイン
デザインパーツを使うだけで綺麗なフラットデザインができあがります。div や span などに決められたクラス名を指定すれば、美しいボタンやフォームができあがります。
レスポンシブ対応
デバイスの画面の幅に応じて自動的にレイアウトを調整してくれます。レスポンシブ対応の知識が少なくともなんとかなってしまいます。
CakePHPでTwitterBootstrapを使う流れ
まず、Twitter Bootstrap本体をダウンロードして公開フォルダに設置します。
次に、Twitter BootstrapをCakePHPで使うためのプラグインをダウロードしてCakePHPのAppに設置します。
プラグインの読み込みなどの設定をして完了となります。
TwitterBootstrapのダウンロードと設置
Bootstrapからファイルをダウンロードします。
ダウンロードしたファイルを公開フォルダにコピーします。
CakePHP用プラグインのダウンロードと設置
slywalker/TwitterBootstrapを開きプラグインをダウンロードします。
ダウロードした圧縮ファイルを解凍し「TwitterBootstrap」というフォルダ名に変更し、/App/Pluginにコピーします。
bootstrap.phpの設定
/app/Config/bootstrap.phpに下記を追記し、TwitterBootstrapのプラグインを読み込むようにします。
|
0 1 2 |
CakePlugin::load(array('TwitterBootstrap')); |
テンプレートのコピー
TwitterBootstrapプラグインの
app/Plugin/TwitterBootstrap/View/Layouts/default.ctpを
app/View/Layouts/bootstrap.ctpにコピーします。
これでデフォルトのテンプレートからBootstrapのテンプレートに変更されます。
ヘルパーの設定
app/AppController.phpを開いて、ヘルパーとレイアウト情報を記載します。
|
0 1 2 3 4 5 6 7 8 9 10 |
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'; } |
