Posted in bootstrap, CakePHP, CSS, CSS-CakePHP

[CakePHP] TwitterBootstrap3のインストールと利用方法

   Published Date: 2015年8月17日

TwitterBootstrapは米国のTwitter社が開発しているフロントエンドツールで、これを使えば簡単に綺麗なWebサイトが構築できてしまいます。

この仕組みを使えばサイトをスピーディに公開することができます。スタートアップ時のスピードを上げることができるのが嬉しいところです。

TwitterBootstrapの特徴

簡単で綺麗なデザイン

デザインパーツを使うだけで綺麗なフラットデザインができあがります。div や span などに決められたクラス名を指定すれば、美しいボタンやフォームができあがります。

レスポンシブ対応

デバイスの画面の幅に応じて自動的にレイアウトを調整してくれます。レスポンシブ対応の知識が少なくともなんとかなってしまいます。

CakePHPでTwitterBootstrapを使う流れ

まず、Twitter Bootstrap本体をダウンロードして公開フォルダに設置します。
次に、Twitter BootstrapをCakePHPで使うためのプラグインをダウロードしてCakePHPのAppに設置します。
プラグインの読み込みなどの設定をして完了となります。

TwitterBootstrapのダウンロードと設置

Bootstrapからファイルをダウンロードします。
TwitterBootStrap

ダウンロードしたファイルを公開フォルダにコピーします。

CakePHP用プラグインのダウンロードと設置

slywalker/TwitterBootstrapを開きプラグインをダウンロードします。

slywalker TwitterBootStrap

ダウロードした圧縮ファイルを解凍し「TwitterBootstrap」というフォルダ名に変更し、/App/Pluginにコピーします。

bootstrap.phpの設定

/app/Config/bootstrap.phpに下記を追記し、TwitterBootstrapのプラグインを読み込むようにします。

CakePlugin::load(array('TwitterBootstrap'));

テンプレートのコピー

TwitterBootstrapプラグインの
app/Plugin/TwitterBootstrap/View/Layouts/default.ctpを
app/View/Layouts/bootstrap.ctpにコピーします。

これでデフォルトのテンプレートからBootstrapのテンプレートに変更されます。

ヘルパーの設定

app/AppController.phpを開いて、ヘルパーとレイアウト情報を記載します。

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';
}



Author: webmaster