LoginSignup
9
11

More than 5 years have passed since last update.

CakePHP3でBootstrapを使う

Posted at

CakePHP3にBootstrapのプラグインを入れていい感じにします。
色々ありますが、Holt59/cakephp3-bootstrap-helpersというのを入れてみることにしました。

参照:
CakePHP 3, Bootstrap Helpers
Bootstrap

インストール

以下を実行してcomposerで入れます。

composer require holt59/cakephp3-bootstrap-helpers:dev-master

準備

  • config/bootstrap.phpに以下を追加
Plugin::load('Bootstrap');
  • src/Controller/AppController.phpに以下(使うものだけでOK)を追加
public $helpers = [
    'Flash' => ['className' => 'Bootstrap.BootstrapFlash'],
    'Form' => ['className' => 'Bootstrap.BootstrapForm'],
    'Html' => ['className' => 'Bootstrap.BootstrapHtml'],
    'Modal' => ['className' => 'Bootstrap.BootstrapModal'],
    'Navbar' => ['className' => 'Bootstrap.BootstrapNavbar'],
    'Panel' => ['className' => 'Bootstrap.BootstrapPanel'],
    'Paginator' => ['className' => 'Bootstrap.BootstrapPaginator'],
];
  • src/Template/Layout/default.ctpに以下を追加
<?= $this->Html->script('//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js', ['block' => true]) ?>
<?= $this->Html->script('//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js', ['block' => true]) ?>
<?= $this->Html->css('//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css') ?>

Form記述例

ラベルの横に入力フォームが並ぶようにする、Horizontal formを書いてみます。

<?= $this->Form->create($article, ['horizontal' => true]) ?>
<?= $this->Form->input('title', ['label' => ['text' => 'タイトル']]) ?>
<?= $this->Form->input('start_date', ['label' => ['text' => '開始日']]) ?>
<?= $this->Form->button(__('登録する'), ['class' => 'btn-primary col-md-offset-2']) ?>
<?= $this->Form->end() ?>

↓こんな感じになります。

スクリーンショット 2016-03-23 14.14.49.png

ラベルと入力フォーム(とエラー)のカラム幅はcreate()のオプションで指定できます。

<?= $this->Form->create($article, [
        'horizontal' => true,
        'cols' => [
            'label' => 3,
            'input' => 9,
            'error' => 0
        ]
]) ?>

デフォルトのlabel/input/errorは2/10/0のようです。errorは0にするとinputの下に表示されます。
全部足すと12になるように指定します。

他にも$this->Html->icon('pencil')とかでGlyphiconが出せたり、色々あるので詳しくはドキュメント見てください。

ちなみにBootstrapはそろそろ4が出そうですね〜。

9
11
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
11