Help us understand the problem. What is going on with this article?

CakePHP3でtwitter bootstrapを使う(導入編)

More than 5 years have passed since last update.

プラグインを選ぶ

cakePHP3でtwitter bootstrapを使えるようにするプラグインは幾つかあります
* https://github.com/cake17/cakephp-bootstrap
* https://github.com/friendsofcake/bootstrap-ui
* https://github.com/elboletaire/twbs-cake-plugin
* https://github.com/Holt59/cakephp3-bootstrap3-helpers

その中で、今回はfriendsofcakeのbootstrap-uiプラグインを使ってみます

インストール

composerを使ってインストールします

$ php composer.phar require friendsofcake/bootstrap-ui:dev-master

bootstrap.phpにプラグインのロードを追加します

config/bootstrap.php
Plugin::load('BootstrapUI');

AppView.phpにHelperのロードを追加します

src/View/AppView.php
    public $layout = 'BootstrapUI.default';

    public function initialize()
    {
        $this->loadHelper('Html', ['className' => 'BootstrapUI.Html']);
        $this->loadHelper('Form', ['className' => 'BootstrapUI.Form']);
        $this->loadHelper('Flash', ['className' => 'BootstrapUI.Flash']);
        $this->loadHelper('Paginator', ['className' => 'BootstrapUI.Paginator']);
    }

$layoutに'BootstrapUI.default'と指定すると、BootstrapUIプラグインのディレクトリにあるsrc/Template/Layout/default.ctpが使われます

layoutファイルのcss/jsの読み込みを、CDNのものを使うように変更します

vendor/friendsofcake/bootstrap-ui/src/Template/Layout/default.ctp
$this->prepend('css', $this->Html->css(['bootstrap/bootstrap']));
 ↓
$this->prepend('css', $this->Html->css(['//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css']));

$this->prepend('script', $this->Html->script(['jquery/jquery', 'bootstrap/bootstrap']));
 ↓
$this->prepend('script', $this->Html->script(['jquery/jquery', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js'])); 

以上で準備が完了です

表示確認

適当にページを作って表示確認してみましょう

src/Controller/TestController.php
<?php
namespace App\Controller;

use App\Controller\AppController;

class TestController extends AppController
{

    public function index()
    {
    }
}
src/Template/Test/index.ctp
<nav class="navbar navbar-inverse">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="/">Bootstrap Test</a>
        </div>
    </div>
</nav>
<div class="container theme-showcase" role="main">
<?php
    echo $this->Form->create();
    echo $this->Form->input('textbox');
    echo $this->Form->input('select box', [
        'type' => 'select',
        'options' => [1, 2, 3]
    ]);
    echo $this->Form->input('radio', [
        'label' => 'radio',
        'type' => 'radio',
        'options' => [1, 2, 3]
    ]);
    echo $this->Form->input('checkbox', [
        'multiple' => 'checkbox',
        'options' => [1, 2, 3]
    ]);
    echo $this->Form->button('Submit', [
        'class' => 'btn btn-primary'
    ]);
    echo $this->form->end();
?>
</div>

Controllerとテンプレートを適当に作成して、http://localhost/test にアクセスすると、、、

スクリーンショット 2015-04-14 14.46.03.png

見事、Bootstrapが適用されたページが表示されました

注意

https://github.com/friendsofcake/bootstrap-ui は開発がガンガン進められ機能が増えています
revisionが変わると、前のrevisionでは出来たことが出来なくなったりする可能性もあります

インストールするrevisionを固定したい場合はcomposer.jsonに以下のように記入しましょう

composer.json
"require": {
    "friendsofcake/bootstrap-ui": "dev-master#27d320545f6c407a1679bf05b6d2e90227728278"
}

最後に

vendor/friendsofcake/bootstrap-ui/src/Template/Layout/examples/
以下に、cover.ctp、dashboard.ctp、signin.ctpというLayoutファイルがあります
default.ctpの代わりに、こちらを使っても良いでしょう

http://bootstrapzero.com からお気に入りのテーマをダウンロードして組み込むことで、デザインを大幅に変えることもできます

私は
http://www.bootstrapzero.com/bootstrap-template/binary
がお気に入りです

0828
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした