CakePHP3에서 Bootstrap의 도입에 도전!

이하의 링크를 참고로 하면서 CakaPHP3에 Bootstrap를 도입해 보았으므로 자신용의 메모로서 투고.

참조한 URL
CakePHP3에서 Bootstrap 사용
CakePHP 3,Bootstrap3 Helpers by Hotl559

1. 설치

　git clone htps : // 기주 b. 이 m / holt 59 / 곱셈 php3-Boo tst et al p-l ぺrs. 기 t plugins/Bootstrap

　 이것에 의해, plugins 바로 아래에 Bootstrap 폴더가 생성되는 것을 확인할 수 있을 것입니다.

2. 준비

config/bootstrap.php에 다음을 추가

　　Plugin::load('Bootstrap', ['autoload' => true]);

실제로 작성한 화면


src/Controller/AppController.php에 다음을 추가

　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') ?>

실제로 작성한 화면

3.사용 예

실제로 참고 예문을 기재해 보았습니다.

　<?php
    echo $this->Form->create(null, ['horizontal' => true]);
    echo $this->Form->input('username', ['type' => 'text']) ;
    echo $this->Form->input('password', ['type' => 'password']) ;
    echo $this->Form->input('remember', ['type' => 'checkbox']) ;
　　echo $this->Form->submit(__('Log In'), ['class'=>'btn-primary col-md-offfset-2']);
    echo $this->Form->end() ;
  ?>

실제로 표시되는 화면