需引入哪些文件使表单支持Bootstrap4？含CakePHP 2/3场景

嘿，我来帮你搞定Bootstrap 4在不同CakePHP版本里的配置，让你的表单轻松用上它的样式！先给你理清楚核心要引入的文件，再分版本说具体操作：

核心依赖文件（不管哪个版本都需要） #

你从Bootstrap 4包里面挑这几个核心文件就行：

• CSS：bootstrap.min.css（在包的css文件夹里）
• JS：bootstrap.min.js（在包的js文件夹里），另外Bootstrap 4的JS组件必须依赖两个前置库：jquery.min.js和popper.min.js，这俩得先于Bootstrap JS引入。

通用CakePHP场景（基础操作，适配所有版本） #

首先把这些文件放到项目的webroot对应目录：

• 把bootstrap.min.css放到webroot/css/
• 把jquery.min.js、popper.min.js、bootstrap.min.js放到webroot/js/

然后在你的布局文件（比如default.ctp）里引入资源：

• 在<head>标签里加CSS：

  echo $this->Html->css('bootstrap.min');
  

• 在</body>标签前加JS（顺序绝对不能乱！）：

  echo $this->Html->script('jquery.min');
  echo $this->Html->script('popper.min');
  echo $this->Html->script('bootstrap.min');
  

接下来给表单加Bootstrap样式，手动给元素加对应类就行：

• 表单整体加needs-validation或者form-horizontal类
• 输入框/文本域/下拉选加form-control类
• 标签加form-label（或control-label）类
• 按钮加btn btn-primary（或其他Bootstrap按钮类）
  示例代码：

echo $this->Form->create(null, ['class' => 'needs-validation']);
echo $this->Form->control('username', ['label' => ['class' => 'form-label'], 'class' => 'form-control']);
echo $this->Form->control('email', ['label' => ['class' => 'form-label'], 'class' => 'form-control']);
echo $this->Form->button('提交', ['class' => 'btn btn-primary']);
echo $this->Form->end();

CakePHP 3 进阶配置（更优雅的自动适配） #

CakePHP 3支持Asset Bundles管理资源，还能配置FormHelper自动生成Bootstrap类，不用每次手动加：

1. 配置Asset Bundle #

在src/Asset目录下新建BootstrapBundle.php（没有Asset文件夹就手动建）：

<?php
namespace App\Asset;

use Cake\Asset\AssetBundle;

class BootstrapBundle extends AssetBundle
{
    public $css = [
        'bootstrap.min.css'
    ];
    public $js = [
        'jquery.min.js',
        'popper.min.js',
        'bootstrap.min.js'
    ];
    public $basePath = 'webroot';
}

然后在布局文件里一键引入整个Bundle：

echo $this->Asset->bundle('Bootstrap');

2. 让FormHelper自动生成Bootstrap类 #

打开src/View/AppView.php，在initialize()方法里添加模板配置：

public function initialize()
{
    parent::initialize();
    // 给FormHelper配置Bootstrap默认模板
    $this->Form->setTemplates([
        'inputContainer' => '<div class="form-group {{error}}">{{content}}</div>',
        'input' => '<input type="{{type}}" name="{{name}}"{{attrs}} class="form-control">',
        'label' => '<label{{attrs}} class="form-label">{{text}}</label>',
        'select' => '<select name="{{name}}"{{attrs}} class="form-control">{{content}}</select>',
        'textarea' => '<textarea name="{{name}}"{{attrs}} class="form-control">{{value}}</textarea>',
        'button' => '<button{{attrs}} class="btn btn-primary">{{text}}</button>',
        // 错误状态自动适配Bootstrap样式
        'error' => '<div class="invalid-feedback">{{content}}</div>',
        'inputContainerError' => '<div class="form-group is-invalid">{{content}}</div>'
    ]);
}

配置完之后，你用$this->Form->control()生成的元素会自动带上Bootstrap类，验证错误时也会自动添加is-invalid和invalid-feedback，完美适配Bootstrap的验证样式。

CakePHP 2 适配方案 #

CakePHP 2没有Asset Bundles，但操作也很简单：

1. 引入资源 #

把核心文件放到app/webroot/css/和app/webroot/js/后，在app/View/Layouts/default.ctp里引入：

// 头部加CSS
echo $this->Html->css('bootstrap.min');
// 底部加JS（顺序不能乱）
echo $this->Html->script('jquery.min');
echo $this->Html->script('popper.min');
echo $this->Html->script('bootstrap.min');

2. 表单样式优化 #

你可以手动给元素加类，或者自定义Helper实现自动加类：

• 手动加类示例：

echo $this->Form->create(null, ['class' => 'form-horizontal']);
echo $this->Form->input('username', ['class' => 'form-control', 'label' => ['class' => 'control-label']]);
echo $this->Form->input('password', ['class' => 'form-control', 'label' => ['class' => 'control-label']]);
echo $this->Form->submit('登录', ['class' => 'btn btn-primary']);
echo $this->Form->end();

• 自定义Helper实现自动加类：
  在app/View/Helper里新建BootstrapFormHelper.php：

<?php
App::uses('FormHelper', 'View/Helper');

class BootstrapFormHelper extends FormHelper
{
    public function input($fieldName, $options = array())
    {
        // 默认给input加form-control类
        $options['class'] = isset($options['class']) ? $options['class'] . ' form-control' : 'form-control';
        // 默认给label加control-label类
        $options['label']['class'] = isset($options['label']['class']) ? $options['label']['class'] . ' control-label' : 'control-label';
        return parent::input($fieldName, $options);
    }

    public function submit($caption = null, $options = array())
    {
        $options['class'] = isset($options['class']) ? $options['class'] . ' btn btn-primary' : 'btn btn-primary';
        return parent::submit($caption, $options);
    }
}

然后在app/Controller/AppController.php里加载这个Helper：

public $helpers = array(
    'Form' => array('className' => 'BootstrapForm'),
    // 其他Helper...
);

之后用$this->Form->input()生成的元素就自动带Bootstrap类了！

内容的提问来源于stack exchange，提问作者Jervyn Paller