README

需求

CakePHP 3.x
AdminLTE 2.x
jQuery 1.9+

包含什么？

FlashComponent + 元素（类型：错误、信息、成功、警告）
FormHelper（对齐：默认、内联、水平）
HtmlHelper（组件：面包屑、徽章、标签、图标）
PaginatorHelper
小部件（基本、单选按钮、按钮、选择、文本区域）
示例布局（封面、登录、仪表板）
Bake 模板 不完整

使用 Composer 安装

切换到您的应用程序文件夹根目录（其中包含 composer.json 文件），然后运行以下命令

composer require funayaki/bootstrap-ui

然后通过在您的应用程序的 config/boostrap.php 中添加以下内容来加载插件

\Cake\Core\Plugin::load('BootstrapUI');

或者使用 CakePHP 的控制台

./bin/cake plugin load BootstrapUI

使用方法

您需要修改您的 src/View/AppView 类以扩展 BootstrapUI\View\UIView 或使用特质 BootStrapUI\View\UIViewTrait。

AppView 设置

对于快速设置，只需让您的 AppView 类扩展 BootstrapUI\View\UIView。基类将处理初始化和加载应用程序的 BootstrapUI layout.ctp。

src\View\AppView.php 将看起来像以下内容

namespace App\View;

use BootstrapUI\View\UIView;

class AppView extends UIView
{

    /**
     * Initialization hook method.
     */
    public function initialize()
    {
        //Don't forget to call the parent::initialize()
        parent::initialize();
    }
}

使用 UIViewTrait 进行 AppView 设置

如果您要将 BootstrapUI 添加到现有应用程序中，使用特质可能更容易，因为它让您对布局的加载有更多的控制。

namespace App\View;

use BootstrapUI\View\UIViewTrait;
use Cake\View\View;

class AppView extends View
{
    use UIViewTrait;

    /**
     * Initialization hook method.
     */
    public function initialize()
    {
        //render the initializeUI method from the UIViewTrait
        $this->initializeUI();
    }
}

BootstrapUI 布局

BootstrapUI 附带自己的 layout.ctp 文件和来自 Bootstrap 框架的示例。

如果没有为视图定义布局，则 BootstrapUI\View\UIViewTrait 将加载自己的 layout.ctp 文件。您可以通过两种方式覆盖此行为。

使用 $this->layout('layout') 将布局分配给视图。
在 BootstrapUI\View\UIViewTrait 中禁用自动加载布局，使用 $this->initializeUI(['layout' => false]);。

加载 Bootstrap 框架

如果您想使用自己的布局模板，只需确保包含

// in the <head>
echo $this->Html->css('path/to/bootstrap.css');
echo $this->Html->script(['path/to/jquery.js', 'path/to/bootstrap.js']);

当使用 BootstrapUI 布局（或其副本）时，您需要将额外的布局类型（直接从 Bootstrap 示例中获取）复制到您的应用程序布局目录中

cp -R vendor/funayaki/bootstrap-ui/src/Template/Layout/examples src/Template/Layout/TwitterBootstrap

然后您可以直接在视图中扩展它们

$this->extend('../Layout/TwitterBootstrap/dashboard');

可用类型包括

封面
登录
仪表板
博客 即将推出

注意：请记住在复制的布局中设置样式表。

通过 Bower 安装 Bootstrap

快速安装 Bootstrap 资产的一种方法是使用 bower。假设您位于 ROOT

bower install bootstrap
bower install jquery
mkdir -p webroot/css/bootstrap webroot/js/bootstrap webroot/js/jquery webroot/css/fonts
cp bower_components/bootstrap/dist/css/* webroot/css/bootstrap/.
cp bower_components/bootstrap/dist/js/* webroot/js/bootstrap/.
cp bower_components/jquery/dist/* webroot/js/jquery/.
cp bower_components/bootstrap/dist/fonts/* webroot/css/fonts/.
echo /bower_components >> .gitignore
git add .gitignore \
bower.json \
webroot/css/bootstrap \
webroot/js/bootstrap \
webroot/js/jquery

控制台 Bake

对于想要更多自动化的您，一些 bake 模板已被包含在内。使用它们如下

$ bin/cake bake.bake [subcommand] -t BootstrapUI

助手使用

BootstrapUI 的核心是一系列增强 CakePHP 核心助手的增强。这些助手替换了用于在视图中渲染元素的 HTML 模板。这使得您能够创建使用 Bootstrap 样式的表单和组件。

当前增强的助手列表如下

BootstrapUI\View\Helper\FlashHelper
BootstrapUI\View\Helper\FormHelper
BootstrapUI\View\Helper\HtmlHelper
BootstrapUI\View\Helper\PaginatorHelper
BootstrapUI\View\Helper\BreadcrumbsHelper

当初始化 BootstrapUI\View\UIViewTrait 时，它会加载上述助手，与 CakePHP 核心助手的别名相同。这意味着当你在视图中使用 $this->Form->create() 时，所使用的助手来自 BootstrapUI 插件。

基本表单

echo $this->Form->create($article);
echo $this->Form->control('title');
echo $this->Form->control('published', ['type' => 'checkbox']);

将渲染此 HTML

<form method="post" accept-charset="utf-8" role="form" action="/articles/add">
    <div style="display:none;"><input type="hidden" name="_method" value="POST"></div>
    <div class="form-group">
        <label class="control-label" for="title">Title</label>
        <input type="text" name="title" required="required" id="title" class="form-control">
    </div>
    <div class="form-group">
        <input type="hidden" name="published" value="0">
        <label for="published">
            <input type="checkbox" name="published" value="1" id="published" class="form-control">
            Published
        </label>
    </div>

水平表单

echo $this->Form->create($article, ['align' => [
    'sm' => [
        'left' => 6,
        'middle' => 6,
        'right' => 12
    ],
    'md' => [
        'left' => 4,
        'middle' => 4,
        'right' => 4
    ]
]]);
echo $this->Form->control('title');
echo $this->Form->control('published', ['type' => 'checkbox']);

将渲染此 HTML

<form method="post" accept-charset="utf-8" role="form" class="form-horizontal" action="/articles/add">
    <div style="display:none;"><input type="hidden" name="_method" value="POST"></div>
    <div class="form-group">
        <label class="control-label col-sm-6 col-md-4" for="title">Title</label>
        <div class="col-sm-6 col-md-4">
            <input type="text" name="title" required="required" id="title" class="form-control">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-6 col-sm-6 col-md-offset-4 col-md-4">
            <input type="hidden" name="published" value="0">
            <label for="published">
                <input type="checkbox" name="published" value="1" id="published" class="form-control">
                Published
            </label>
        </div>
    </div>

配置

您可以通过在 AppView.php 中传递额外的参数来配置每个助手。

以下是一个更改 PaginatorHelper 的 prev 和 next 标签的示例。

$this->loadHelper(
    'Paginator',
    [
        'className' => 'BootstrapUI.Paginator',
        'labels' => [
            'prev' => 'previous',
            'next' => 'next',
        ]
    ]
);

为了正确设置 auth 提示消息的样式，在 AuthComponent 配置中设置 flash 键，如下所示

        $this->loadComponent('Auth', [
            'flash' => [
                'element' => 'error',
                'key' => 'auth'
            ],
            ...

注意：请检查更多示例的测试。

测试

您可以通过以下方式运行 BootstrapUI 的测试

    $ composer install
    $ ./vendor/bin/phpunit

补丁和功能

分支
修改，修复
测试 - 这非常重要，所以不要无意中破坏它
提交 - 不要修改许可证、待办事项、版本等。（如果您更改了任何，请将它们提升为单独的提交，这样我可以在拉取时忽略它们）
拉取请求 - 主题分支的额外加分项

为确保您的 PR 被考虑合并到上游，您必须遵循 CakePHP 编码标准。已包含一个 pre-commit 钩子，可自动为您运行代码嗅探。从您的项目根目录

cp ./contrib/pre-commit .git/hooks/
chmod 755 .git/hooks/pre-commit

错误和反馈

http://github.com/funayaki/bootstrap-ui/issues

funayaki / bootstrap-ui

维护者

详细信息