CakePHP3 で Bootstrap を使う

参考

• プラグインのgithubページ

プラグインを使う理由

• bootstrapをそのまま入れると、ヘルパーの機能の一部を使うことができない

インストール手順

1. bootstrapをダウンロード
2. 配置する
3. Bootstrap-UIをインストール
4. Bootstrap-UIを読み込む
5. config/bootstrap.php
6. src/View/AppView.php
7. 使う

bootstrapをダウンロード

配置

webroot
│
├─bootstrap
│  ├─css
│  ├─fonts
│  └─js
├─css
├─img
└─js

Bootstrap-uiをインストール

$ composer require friendsofcake/bootstrap-ui

Bootstrap-uiを読み込む

• config/bootstrap.php

Plugin::load('BootstrapUI');

• src/View/AppView.php
  • BootstrapUI\View\UIViewを継承するようにする
  • 初期化処理を呼ぶ

namespace App\View;

// 追加
use BootstrapUI\View\UIView;

class AppView extends UIView // 修正
{

    /**
     * Initialization hook method.
     */
    public function initialize()
    {
        // 追加
        parent::initialize();

        // これを指定しなければ、「/vendor/friendsofcake/bootstrap-ui/src/Template/Layout/default.cpt」が使われる
        // 'default'指定ならcakePHPのテンプレートが使用される
        $this->layout = 'default';
    }
}

• src/Temlate/default.cpt
  • 以下を追加

<!-- jQuery -->
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

<!-- bootstrap framework -->
<?= $this->Html->css('/bootstrap/css/bootstrap.css') ?>
<?= $this->Html->script('/bootstrap/js/bootstrap.js') ?>

使う

Bootstrap3 日本語リファレンス