README

有关版本信息，请参阅版本映射。

要求

CakePHP 5.x
Bootstrap 5.x
npm 6.x
Popper.js 2.x
Bootstrap Icons 1.5.x

包含什么？

FlashHelper（元素类型：error，info，success，warning）
FormHelper（对齐：default，inline，horizontal）
BreadcrumbsHelper
HtmlHelper（组件：badge，icon）
PaginatorHelper
小部件（basic，button，datetime，file，select，textarea）
示例布局（cover，signin，dashboard）
Bake模板

安装

cd到你的应用文件夹根目录（其中包含composer.json文件）并运行以下Composer命令

composer require friendsofcake/bootstrap-ui

然后使用CakePHP的命令行加载插件

bin/cake plugin load BootstrapUI

设置

你可以使用Bootstrap命令进行必要的更改，或者手动进行

使用Bootstrap命令

要使用npm通过npm安装Bootstrap资源（Bootstrap的CSS/JS文件，Popper.js），可以使用install命令，或手动安装
```
bin/cake bootstrap install
```
这将获取所有资源，将分发资源复制到BootstrapUI插件的webroot目录，并将其符号链接（或复制）到你的应用程序的webroot目录。

如果你想安装资源的最新小版本而不是精确的锁定版本，你可以使用--latest选项
```
bin/cake bootstrap install --latest
```
你需要修改你的src/View/AppView类以扩展BootstrapUI\View\UIView或使用特质BootStrapUI\View\UIViewTrait。为此，你可以使用modify_view命令，或手动更改视图
```
bin/cake bootstrap modify_view
```
这将按AppView使用UIView设置中描述的方式重写你的src/View/AppView
BootstrapUI附带一些示例布局。你可以使用copy_layouts命令安装它们，或手动复制
```
bin/cake bootstrap copy_layouts
```
这将复制三个示例布局cover.php，dashboard.php和signin.php到你的应用程序的src/templates/layout/TwitterBootstrap

手动设置

通过npm安装Bootstrap资源

install命令通过npm安装Bootstrap资源，你也可以手动安装，如果你想控制包含哪些资源以及它们的位置。

假设你在你的应用程序的根目录下

npm install @popperjs/core@2 bootstrap@5 bootstrap-icons@1
mkdir -p webroot/css
mkdir -p webroot/font/fonts
mkdir -p webroot/js
cp node_modules/@popperjs/core/dist/umd/popper.js webroot/js
cp node_modules/@popperjs/core/dist/umd/popper.min.js webroot/js
cp node_modules/bootstrap/dist/css/bootstrap.css webroot/css/
cp node_modules/bootstrap/dist/css/bootstrap.min.css webroot/css/
cp node_modules/bootstrap/dist/js/bootstrap.js webroot/js/
cp node_modules/bootstrap/dist/js/bootstrap.min.js webroot/js/
cp node_modules/bootstrap-icons/font/bootstrap-icons.css webroot/font/
cp node_modules/bootstrap-icons/font/fonts/bootstrap-icons.woff webroot/font/fonts/
cp node_modules/bootstrap-icons/font/fonts/bootstrap-icons.woff2 webroot/font/fonts/
cp vendor/friendsofcake/bootstrap-ui/webroot/font/bootstrap-icon-sizes.css webroot/font/

使用UIView设置AppView

为了快速设置，只需让您的 AppView 类继承 BootstrapUI\View\UIView。基类将处理初始化和加载您的应用的 BootstrapUI default.php 布局。

src\View\AppView.php 可能如下所示

declare(strict_types=1);

namespace App\View;

use BootstrapUI\View\UIView;

class AppView extends UIView
{
    /**
     * Initialization hook method.
     */
    public function initialize(): void
    {
        // Don't forget to call parent::initialize()
        parent::initialize();
    }
}

使用 UIViewTrait 设置 AppView

如果您正在将 BootstrapUI 添加到现有应用中，使用 trait 可能更简单，因为它为您提供了更多控制布局加载的能力。

declare(strict_types=1);

namespace App\View;

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

class AppView extends View
{
    use UIViewTrait;

    /**
     * Initialization hook method.
     */
    public function initialize(): void
    {
        parent::initialize();

        // Call the initializeUI method from UIViewTrait
        $this->initializeUI();
    }
}

复制示例布局

为了能够使用 BootstrapUI 的示例布局（直接从 Bootstrap 示例中获取），它们需要被复制到您的应用的布局目录，可以通过使用 copy_layouts 命令，或者手动复制文件

cp -R vendor/friendsofcake/bootstrap-ui/templates/layout/examples templates/layout/TwitterBootstrap

BootstrapUI布局

BootstrapUI 伴随其自己的 default.php 布局文件和从 Bootstrap 框架中获取的示例。

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

使用 $this->setLayout('layout') 为模板分配布局。
在 BootstrapUI\View\UIViewTrait 中禁用自动加载布局，在您的 AppView 的 initialize() 函数中添加 $this->initializeUI(['layout' => false]);。

使用示例布局

一旦复制到您的应用布局目录（无论是通过 copy_layouts 命令还是手动），您可以在视图中简单地扩展示例布局，如下所示

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

可用类型包括

封面
登录
仪表板

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

包含Bootstrap框架

如果您使用的是 BoostrapUI 插件默认布局，并且您已使用 install 命令安装了 Bootstrap 资产，所需的资产应该会自动包含。

如果您希望使用自己的布局模板，则需要自己处理包含所需的 CSS/JS 文件。

如果您使用 install 命令安装了资产，您可以使用标准插件语法引用它们

// in the <head>
echo $this->Html->css('BootstrapUI.bootstrap.min');
echo $this->Html->css(['BootstrapUI./font/bootstrap-icons', 'BootstrapUI./font/bootstrap-icon-sizes']);
echo $this->Html->script(['BootstrapUI.popper.min', 'BootstrapUI.bootstrap.min']);

如果您已手动安装资产，则需要使用相应的路径。使用示例复制命令，您可以使用标准短路径语法

echo $this->Html->css('bootstrap.min');
echo $this->Html->css(['/font/bootstrap-icons', '/font/bootstrap-icon-sizes']);
echo $this->Html->script(['popper.min', 'bootstrap.min']);

如果您使用的是不符合 CakePHP 约定的路径，您必须明确指定它们

echo $this->Html->css('/path/to/bootstrap.css');
echo $this->Html->css(['/path/to/bootstrap-icons.css', '/path/to/bootstrap-icon-sizes.css']);
echo $this->Html->script(['/path/to/popper.js', '/path/to/bootstrap.js']);

Bake模板

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

bin/cake bake [subcommand] -t BootstrapUI

目前，以下 bake 子命令的 bake 模板已被包含

`模板`

除了默认的 index、add、edit 和 view 模板外，还有一个 login 模板可用。虽然默认 CRUD 操作视图模板可以这样使用

bin/cake bake template ControllerName -t BootstrapUI

但是必须明确指定操作名称来使用 login 模板

bin/cake bake template ControllerName login -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']);
echo $this->Form->button('Submit');
echo $this->Form->end();

将渲染以下 HTML

<form method="post" accept-charset="utf-8" action="/articles/add">
    <!-- ... -->
    <div class="mb-3 form-group text">
        <label class="form-label" for="title">Title</label>
        <input type="text" name="title" id="title" class="form-control">
    </div>
    <div class="mb-3 form-group form-check checkbox">
        <input type="hidden" name="published" value="0">
        <input type="checkbox" class="form-check-input" name="published" value="1" id="published">
        <label class="form-check-label" for="published">Published</label>
    </div>
    <button type="submit" class="btn btn-secondary">Submit</button>
    <!-- ... -->
</form>

水平表单

水平表单会自动将标签和控件渲染在单独的列中（如果适用），标签在第一列，控件在第二列。

可以通过 align 选项配置对齐方式，它接受一个列表，包含 md 的 Bootstrap 屏幕尺寸/断点的列大小，或者一个屏幕尺寸/断点名称和列大小的矩阵。

以下将使用默认的 md 屏幕尺寸/断点

use BootstrapUI\View\Helper\FormHelper;

echo $this->Form->create($article, [
    'align' => [
        FormHelper::GRID_COLUMN_ONE => 4, // first column (span over 4 columns)
        FormHelper::GRID_COLUMN_TWO => 8, // second column (span over 8 columns)
    ],
]);
echo $this->Form->control('title');
echo $this->Form->control('published', ['type' => 'checkbox']);
echo $this->Form->end();

它将渲染以下 HTML

<form method="post" accept-charset="utf-8" class="form-horizontal" action="/articles/add">
    <!-- ... -->
    <div class="mb-3 form-group row text">
        <label class="col-form-label col-md-4" for="title">Title</label>
        <div class="col-md-8">
            <input type="text" name="title" id="title" class="form-control">
        </div>
    </div>
    <div class="mb-3 form-group row checkbox">
        <div class="offset-md-4 col-md-8">
            <div class="form-check">
                <input type="hidden" name="published" value="0"/>
                <input type="checkbox" name="published" value="1" id="published" class="form-check-input"/>
                <label class="form-check-label" for="published">Published</label>
            </div>
        </div>
    </div>
    <!-- ... -->
</form>

以下使用屏幕尺寸/断点和列大小的矩阵

use BootstrapUI\View\Helper\FormHelper;

echo $this->Form->create($article, [
    'align' => [
        // column sizes for the `sm` screen-size/breakpoint
        'sm' => [
            FormHelper::GRID_COLUMN_ONE => 6,
            FormHelper::GRID_COLUMN_TWO => 6,
        ],
        // column sizes for the `md` screen-size/breakpoint
        'md' => [
            FormHelper::GRID_COLUMN_ONE => 4,
            FormHelper::GRID_COLUMN_TWO => 8,
        ],
    ],
]);
echo $this->Form->control('title');
echo $this->Form->control('published', ['type' => 'checkbox']);
echo $this->Form->end();

它将渲染以下 HTML

<form method="post" accept-charset="utf-8" class="form-horizontal" action="/articles/add">
    <!-- ... -->
    <div class="mb-3 form-group row text">
        <label class="col-form-label col-sm-6 col-md-4" for="title">Title</label>
        <div class="col-sm-6 col-md-8">
            <input type="text" name="title" id="title" class="form-control">
        </div>
    </div>
    <div class="mb-3 form-group row checkbox">
        <div class="offset-sm-6 offset-md-4 col-sm-6 col-md-8">
            <div class="form-check">
                <input type="hidden" name="published" value="0"/>
                <input type="checkbox" name="published" value="1" id="published" class="form-check-input"/>
                <label class="form-check-label" for="published">Published</label>
            </div>
        </div>
    </div>
    <!-- ... -->
</form>

默认对齐将使用 md 屏幕尺寸/断点，以及以下列大小

[
    FormHelper::GRID_COLUMN_ONE => 2,
    FormHelper::GRID_COLUMN_TWO => 10,
]

内联表单

内联表单将在同一行上渲染控件，并为大多数控件隐藏标签。

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

将渲染以下 HTML

<form method="post" accept-charset="utf-8" class="form-inline" action="/articles/add">
    <!-- ... -->
    <div class="form-group text">
        <label class="form-label visually-hidden" for="title">Title</label>
        <input type="text" name="title" placeholder="Title" id="title" class="form-control"/>
    </div>
    <div class="form-check form-check-inline checkbox">
        <input type="hidden" name="published" value="0"/>
        <input type="checkbox" name="published" value="1" id="published" class="form-check-input">
        <label class="form-check-label" for="published">Published</label>
    </div>
    <!-- ... -->
</form>

间距

BootstrapUI 默认为表单控件应用一些默认间距。对于默认和水平对齐的表单，所有控件都应用了 mb-3 的间距类，而内联表单使用 g-3 的间隔类。

可以使用 spacing 选项进行更改，它适用于每个助手和每个表单的每个对齐方式，对于默认/水平对齐，它还适用于每个控件。

// for all forms
echo $this->Form->setConfig([
    'spacing' => 'mb-6',
]);

// for a specific form
echo $this->Form->create($entity, [
    'spacing' => 'mb-6',
]);

// for a specific control (default/horizontal aligned forms only)
echo $this->Form->control('title', [
    'spacing' => 'mb-6',
]);

要完全禁用此行为，将 spacing 选项设置为 false。

支持的控件

BootstrapUI 支持 CakePHP 的所有默认控件，并生成与 Bootstrap 兼容的标记。此外，它还明确支持以下控件的 Bootstrap 特定标记

颜色
范围
开关

容器属性

可以通过 container 选项更改外部控件容器的属性，从而减少对自定义模板的需求。对于 class 属性来说，它是一个特殊情况，其值将被添加到现有的类列表中，而不是替换它。

echo $this->Form->control('title', [
    'container' => [
        'class' => 'my-title-control',
        'data-meta' => 'meta information',
    ],
]);

这将生成以下 HTML

<div data-meta="meta information" class="my-title-control mb-3 form-group text">
    <label class="form-label" for="title">Title</label>
    <input type="text" name="title" id="title" class="form-control">
</div>

追加/前置内容

可以通过 append 和 prepend 选项分别支持向输入组追加/前置内容。

echo $this->Form->control('email', [
    'prepend' => '@',
]);

这将生成以下 HTML

<div class="mb-3 form-group email">
    <label class="form-label" for="email">Email</label>
    <div class="input-group">
        <span class="input-group-text">@</span>
        <input type="email" name="email" id="email" class="form-control"/>
    </div>
</div>

多个插件

可以将多个插件定义为 append 和 prepend 选项的数组。

echo $this->Form->control('amount', [
    'prepend' => ['$', '0.00'],
]);

这将生成以下 HTML

<div class="mb-3 form-group text">
    <label class="form-label" for="amount">Amount</label>
    <div class="input-group">
        <span class="input-group-text">$</span>
        <span class="input-group-text">0.00</span>
        <input type="text" name="amount" id="amount" class="form-control"/>
    </div>
</div>

插件选项

插件支持应用于输入组容器的选项。可以通过传递一个数组作为 append 和 prepend 选项，并将一个包含选项的数组作为最后一个条目添加来定义它们。

选项可以包含来自控制选项的 HTML 属性，以及特殊的 size 选项，它自动转换为相应的输入组大小类。

echo $this->Form->control('amount', [
    'prepend' => [
        '$',
        '0.00',
        [
            'size' => 'lg',
            'class' => 'custom',
            'custom' => 'attribute',
        ],
    ],
]);

这将生成以下 HTML

<div class="mb-3 form-group text">
    <label class="form-label" for="amount">Amount</label>
    <div class="input-group input-group-lg custom" custom="attribute">
        <span class="input-group-text">$</span>
        <span class="input-group-text">0.00</span>
        <input type="text" name="amount" id="amount" class="form-control"/>
    </div>
</div>

内联复选框和单选按钮

内联复选框/开关和单选按钮（与内联对齐表单不同），可以通过将 inline 选项设置为 true 来创建。

内联复选框/开关和单选按钮将渲染在同一水平行上。然而，当使用水平表单对齐时，只有多选框将渲染在同一行上！

echo $this->Form->control('option_1', [
    'type' => 'checkbox',
    'inline' => true,
]);
echo $this->Form->control('option_2', [
    'type' => 'checkbox',
    'inline' => true,
]);

这将生成以下 HTML

<div class="mb-3 form-check form-check-inline checkbox">
    <input type="hidden" name="option-1" value="0"/>
    <input type="checkbox" name="option-1" value="1" id="option-1" class="form-check-input">
    <label class="form-check-label" for="option-1">Option 1</label>
</div>
<div class="mb-3 form-check form-check-inline checkbox">
    <input type="hidden" name="option-2" value="0"/>
    <input type="checkbox" name="option-2" value="2" id="option-2" class="form-check-input">
    <label class="form-check-label" for="option-2">Option 2</label>
</div>

开关

可以通过将 switch 选项设置为 true 来创建开关样式的复选框。

echo $this->Form->control('option', [
    'type' => 'checkbox',
    'switch' => true,
]);

这将生成以下 HTML

<div class="mb-3 form-group form-check form-switch checkbox">
    <input type="hidden" name="option" value="0"/>
    <input type="checkbox" name="option" value="1" id="option" class="form-check-input">
    <label class="form-check-label" for="option">Option</label>
</div>

浮动标签

浮动标签支持文本、textarea 以及（非 multiple）的 select 控件。可以通过标签的 floating 选项启用。

echo $this->Form->control('title', [
    'label' => [
        'floating' => true,
    ],
]);

这将生成以下 HTML

<div class="mb-3 form-floating form-group text">
    <input type="text" name="title" id="title" class="form-control"/>
    <label for="title">Title</label>
</div>

帮助文本

Bootstrap 的表单帮助文本通过 help 选项得到支持。

默认情况下，帮助文本在控件和验证反馈之间渲染。

echo $this->Form->control('title', [
    'help' => 'Help text',
]);

这将生成以下 HTML

<div class="mb-3 form-group text">
    <label class="form-label" for="title">Title</label>
    <input type="text" name="title" id="title" class="form-control" aria-describedby="title-help"/>
    <small id="title-help" class="d-block form-text text-muted">Help text</small>
</div>

可以通过传递一个数组给 help 选项来配置属性，其中文本在 content 键中定义。

echo $this->Form->control('title', [
    'help' => [
        'id' => 'custom-help',
        'class' => 'custom',
        'data-custom' => 'attribute',
        'content' => 'Help text',
    ],
]);

这将生成以下 HTML

<div class="mb-3 form-group text">
    <label class="form-label" for="title">Title</label>
    <input type="text" name="title" id="title" class="form-control" aria-describedby="custom-help"/>
    <small id="custom-help" class="custom d-block form-text text-muted" data-custom="attribute">Help text</small>
</div>

工具提示

Bootstrap 工具提示可以通过 tooltip 选项添加到标签。工具提示切换默认渲染为一个 Bootstrap 图标，该图标在通过 install 命令安装资源时默认包含。

echo $this->Form->control('title', [
    'tooltip' => 'Tooltip text',
]);

这将生成以下 HTML

<div class="mb-3 form-group text">
    <label class="form-label" for="title">
        Title <span data-bs-toggle="tooltip" title="Tooltip text" class="bi bi-info-circle-fill"></span>
    </label>
    <input type="text" name="title" id="title" class="form-control"/>
</div>

如果您想使用不同的切换，无论是不同的 Bootstrap 图标，还是完全不同的图标字体/库，可以通过相应地重写 tooltip 模板来实现，无论是全局、单个表单还是单个控件。

echo $this->Form->control('title', [
    'tooltip' => 'Tooltip text',
    'templates' => [
        'tooltip' => '<span data-bs-toggle="tooltip" title="{{content}}" class="material-icons">info</span>',
    ],
]);

错误反馈样式

BootstrapUI 支持两种错误反馈样式，即常规 Bootstrap 文本反馈和 Bootstrap 工具提示反馈（不要与通过 tooltip 选项配置的标签工具提示混淆）！

可以通过 feedbackStyle 选项配置样式，无论是全局、单个表单还是单个控件。支持的样式有：

\BootstrapUI\View\Helper\FormHelper::FEEDBACK_STYLE_DEFAULT 将错误反馈渲染为常规 Bootstrap 文本反馈。
\BootstrapUI\View\Helper\FormHelper::FEEDBACK_STYLE_TOOLTIP 将错误反馈渲染为 Bootstrap 工具提示反馈（内联表单默认使用此样式）。

请注意，使用工具提示错误样式需要表单组元素非静态定位！当启用工具提示错误样式时，表单辅助程序将自动向表单组元素添加 Bootstraps 的位置实用类 position-relative。

如果您需要不同的定位，可以使用 CSS 重写 .form-group 元素上的 position 规则，或者使用 formGroupPosition 选项设置所需的定位，无论是全局、单个表单还是单个控件。该选项支持以下值：

\BootstrapUI\View\Helper\FormHelper::POSITION_ABSOLUTE
\BootstrapUI\View\Helper\FormHelper::POSITION_FIXED
\BootstrapUI\View\Helper\FormHelper::POSITION_RELATIVE
\BootstrapUI\View\Helper\FormHelper::POSITION_STATIC
\BootstrapUI\View\Helper\FormHelper::POSITION_STICKY

$this->Form->setConfig([
    'feedbackStyle' => \BootstrapUI\View\Helper\FormHelper::FEEDBACK_STYLE_TOOLTIP,
    'formGroupPosition' => \BootstrapUI\View\Helper\FormHelper::POSITION_ABSOLUTE,
]);

// ...

echo $this->Form->control('title');

如果 title 字段有错误，这将生成以下 HTML

<div class="mb-3 form-group position-absolute text is-invalid">
    <label class="form-label" for="title">Title</label>
    <input type="text" name="title" id="title" class="is-invalid form-control"/>
    <div class="invalid-tooltip">Error message</div>
</div>

Flash 消息 / 警报

您可以使用默认的 Flash 组件语法设置 Flash 消息。支持的类型有 success、info、warning、error。

$this->Flash->success('Your Success Message.');

警报样式

如果您需要设置其他 Bootstrap 警报样式，可以使用以下方法：

$this->Flash->set('Your Dark Message.', ['params' => ['class' => 'dark']]);

支持的风格有 primary、secondary、light、dark。

图标

默认情况下，警报根据警报类型使用 Bootstrap 图标。映射的类型是 default、info、warning、error 和 success。您可以通过 icon 选项/参数禁用/自定义图标，无论是全局用于 flash 辅助程序，还是单独用于单个消息。

无图标的消息

$this->Flash->success('Message without icon.', [
    'params' => [
        'icon' => false,
    ],
]);

使用自定义图标

$this->Flash->success('Message with custom icon.', [
    'params' => [
        'icon' => 'mic-mute-fill',
    ],
]);

传递图标选项（图标名称是可选的，在此处省略时，将查找默认图标映射）

$this->Flash->success('Message with custom icon options.', [
    'params' => [
        'icon' => [
            'name' => 'mic-mute-fill',
            'size' => '2xl',
            'class' => 'foo bar me-2',
            'data-custom' => 'attribute',
        ],
    ],
]);

<i class="foo bar me-2 bi bi-mic-mute-fill bi-2xl" data-custom="attribute"></i>

使用自定义 HTML

$this->Flash->success('Message with custom icon HTML.', [
    'params' => [
        'icon' => '<span class="material-icons">volume_off</span>',
    ],
]);

禁用所有 Flash 消息的图标

$this->loadHelper('Flash', [
    'className' => 'BootstrapUI.Flash',
    'icon' => false,
]);

为所有 Flash 消息设置图标选项（将使用默认图标映射，并将选项应用于所有图标）

$this->loadHelper('Flash', [
    'className' => 'BootstrapUI.Flash',
    'icon' => [
        'size' => '2xl',
        'class' => 'foo bar me-2',
        'data-custom' => 'attribute',
    ],
]);

定义自定义图标映射

$this->loadHelper('Flash', [
    'className' => 'BootstrapUI.Flash',
    'iconMap' => [
        'default' => 'info-circle-fill',
        'success' => 'check-circle-fill',
        'error' => 'exclamation-triangle-fill',
        'info' => 'info-circle-fill',
        'warning' => 'exclamation-triangle-fill',
    ],
]);

使用不同的图标集

$this->Flash->success('Message with different icon set.', [
    'params' => [
        'icon' => [
            'namespace' => 'fas',
            'prefix' => 'fa',
            'name' => 'microphone-slash',
            'size' => '2xl',
        ],
    ],
]);

<i class="me-2 fas fa-microphone-slash fa-2xl"></i>

为所有 Flash 消息使用不同的图标集

$this->loadHelper('Html', [
    'className' => 'BootstrapUI.Html',
    'iconDefaults' => [
        'namespace' => 'fas',
        'prefix' => 'fa',
    ],
]);

$this->loadHelper('Flash', [
    'className' => 'BootstrapUI.Flash',
    'iconMap' => [
        'default' => 'info-circle',
        'success' => 'check-circle',
        'error' => 'exclamation-triangle',
        'info' => 'info-circle',
        'warning' => 'exclamation-triangle',
    ],
]);

徽章

默认情况下，徽章将以 secondary 主题样式渲染

echo $this->Html->badge('Text');

<span class="badge bg-secondary">Text</span>

背景颜色

可以通过指定 Bootstrap 主题颜色名称之一来更改背景颜色，辅助器将确保应用正确的前缀

echo $this->Html->badge('Text', [
    'class' => 'danger',
]);

<span class="badge bg-danger">Text</span>

使用不同的 HTML 标签

默认情况下，徽章使用 <span> 标签。这可以通过 tag 选项进行更改

echo $this->Html->badge('Text', [
    'tag' => 'div',
]);

<div class="badge bg-secondary">Text</div>

图标

默认情况下，HTML 辅助器配置为使用 Bootstrap 图标。

echo $this->Html->icon('mic-mute-fill');

<i class="bi bi-mic-mute-fill"></i>

大小

可以通过 size 选项指定大小，传递的值将自动添加前缀

echo $this->Html->icon('mic-mute-fill', [
    'size' => '2xl',
]);

<i class="bi bi-mic-mute-fill bi-2xl"></i>

此插件为以下大小提供了 Bootstrap 图标类，这些类垂直居中图标：2xs、xs、sm、lg、xl 和 2xl，以及以下对齐图标基线的类：1x、2x、3x、4x、5x、6x、7x、8x、9x 和 10x。

使用不同的图标集

您可以通过配置 namespace 和 prefix 选项来使用不同的图标集，无论是针对每个 icon() 调用，还是通过配置 HTML 辅助器默认值，在所有使用 HtmlHelper::icon() 的全局范围内

echo $this->Html->icon('microphone-slash', [
    'namespace' => 'fas',
    'prefix' => 'fa',
]);

导航

$this->loadHelper('Html', [
    'className' => 'BootstrapUI.Html',
    'iconDefaults' => [
        'namespace' => 'fas',
        'prefix' => 'fa',
    ],
]);

面包屑

面包屑辅助器是一个即插即用的替代品，没有额外的配置可用或必需。

echo $this->Breadcrumbs
    ->add('Home', '/')
    ->add('Articles', '/articles')
    ->add('View')
    ->render();

<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="/">Home</a></li>
        <li class="breadcrumb-item active"><a href="/articles" aria-current="page">Articles</a></li>
        <li class="breadcrumb-item"><span>View</span></li>
    </ol>
</nav>

分页

当使用辅助器的标准方法时，分页辅助器将生成与 Bootstrap 兼容的/样式的标记，并包括一个便利的方法，可以生成一组完整的分页控件，即第一/上一页/下一页/最后一页以及页面链接，所有这些都包含在一个列表包装器中。

echo $this->Paginator->first();
echo $this->Paginator->prev();
echo $this->Paginator->numbers();
echo $this->Paginator->next();
echo $this->Paginator->last();

这将生成以下 HTML

<li class="page-item first">
    <a class="page-link" aria-label="First" href="/articles/index">
        <span aria-hidden="true">«</span>
    </a>
</li>
<li class="page-item">
    <a class="page-link" rel="prev" aria-label="Previous" href="/articles/index">
        <span aria-hidden="true">‹</span>
    </a>
</li>
<li class="page-item">
    <a class="page-link" href="/articles/index">1</a>
</li>
<li class="page-item active" aria-current="page">
    <a class="page-link" href="#">2</a>
</li>
<li class="page-item">
    <a class="page-link" href="/articles/index?page=3">3</a>
</li>
<li class="page-item">
    <a class="page-link" rel="next" aria-label="Next" href="/articles/index?page=3">
        <span aria-hidden="true">›</span>
    </a>
</li>
<li class="page-item last">
    <a class="page-link" aria-label="Last" href="/articles/index?page=3">
        <span aria-hidden="true">»</span>
    </a>
</li>

配置 ARIA 标签

当使用标准方法时，您可以使用 label 选项传递一个自定义字符串，用于 aria-label 属性

echo $this->Paginator->first('«', ['label' => __('Beginning')]);
echo $this->Paginator->prev('‹', ['label' => __('Back')]);
echo $this->Paginator->next('›', ['label' => __('Forward')]);
echo $this->Paginator->last('»', ['label' => __('End')]);

这将生成以下 HTML

<li class="page-item first">
    <a class="page-link" aria-label="Beginning" href="/articles/index">
        <span aria-hidden="true">«</span>
    </a>
</li>
<li class="page-item">
    <a class="page-link" rel="prev" aria-label="Back" href="/articles/index">
        <span aria-hidden="true">‹</span>
    </a>
</li>
<li class="page-item">
    <a class="page-link" rel="next" aria-label="Forward" href="/articles/index?page=3">
        <span aria-hidden="true">›</span>
    </a>
</li>
<li class="page-item last">
    <a class="page-link" aria-label="End" href="/articles/index?page=3">
        <span aria-hidden="true">»</span>
    </a>
</li>

生成完整控件集

可以使用 links() 方法生成一组完整的分页控件，即第一/上一页/下一页/最后一页以及页面链接，所有这些都包含在一个列表包装器中。

默认情况下，它仅渲染数字

echo $this->Paginator->links();

这将生成以下 HTML

<ul class="pagination">
    <li class="page-item">
        <a class="page-link" href="/articles/index">1</a>
    </li>
    <li class="page-item active" aria-current="page">
        <a class="page-link" href="#">2</a>
    </li>
    <li class="page-item">
        <a class="page-link" href="/articles/index?page=3">3</a>
    </li>
</ul>

配置控件

可以通过 first、prev、next 和 last 选项配置生成的控件，每个选项都可以接受布尔值 true 来指示控件应使用辅助器的默认值，一个用作控件文本的字符串，或一个数组，允许指定链接文本以及 ARIA 标签。

可以通过 first、prev、next 和 last 选项配置生成的控件，每个选项可以接受布尔值 true 来指示控件应使用辅助器的默认值，一个用作控件文本的字符串，或一个具有 label 和 text 选项的数组，以确定 ARIA 标签值和链接文本

echo $this->Paginator->links([
    'first' => '❮❮',
    'prev' => true,
    'next' => true,
    'last' => [
        'label' => 'End',
        'text' => '❯❯',
    ],
]);

这将生成以下 HTML

<ul class="pagination">
    <li class="page-item first">
        <a class="page-link" aria-label="First" href="/articles/index">
            <span aria-hidden="true">❮❮</span>
        </a>
    </li>
    <li class="page-item">
        <a class="page-link" rel="prev" aria-label="Previous" href="/articles/index">
            <span aria-hidden="true">‹</span>
        </a>
    </li>
    <li class="page-item">
        <a class="page-link" href="/articles/index">1</a>
    </li>
    <li class="page-item active" aria-current="page">
        <a class="page-link" href="#">2</a>
    </li>
    <li class="page-item">
        <a class="page-link" href="/articles/index?page=3">3</a>
    </li>
    <li class="page-item">
        <a class="page-link" rel="next" aria-label="Next" href="/articles/index?page=3">
            <span aria-hidden="true">›</span>
        </a>
    </li>
    <li class="page-item last">
        <a class="page-link" aria-label="End" href="/articles/index?page=3">
            <span aria-hidden="true">❯❯</span>
        </a>
    </li>
</ul>

尺寸

可以通过 size 选项指定尺寸

echo $this->Paginator->links([
    'size' => 'lg',
]);

这将生成以下 HTML

<ul class="pagination pagination-lg">
    <!-- ... -->
</ul>

辅助器配置

您可以通过在 AppView.php 中加载它们时传递额外参数来配置每个辅助器。

以下是一个更改分页辅助器中 prev 和 next 标签的示例。

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

贡献

补丁和功能

分支
修改、修复
测试 - 这很重要，所以它不会意外损坏
提交 - 不要修改许可证、待办事项、版本等。（如果您更改了任何内容，请将它们放入可以忽略的单独提交中，以便在拉取时忽略）
拉取请求 - 对于主题分支有额外积分

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

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

测试

在编写插件代码时，您可以按照以下步骤运行BootstrapUI的测试

composer install
./vendor/bin/phpunit

错误 & 反馈

https://github.com/friendsofcake/bootstrap-ui/issues

friendsofcake / bootstrap-ui

维护者

详细信息

README

要求

包含什么？

目录

安装

设置

使用Bootstrap命令

手动设置

通过npm安装Bootstrap资源

使用UIView设置AppView

使用 UIViewTrait 设置 AppView

复制示例布局

BootstrapUI布局

使用示例布局

包含Bootstrap框架

Bake模板

模板

使用方法

基本表单

水平表单

内联表单

间距

支持的控件

容器属性

追加/前置内容

多个插件

插件选项

内联复选框和单选按钮

开关

浮动标签

帮助文本

工具提示

错误反馈样式

Flash 消息 / 警报

警报样式

图标

徽章

背景颜色

使用不同的 HTML 标签

图标

大小

使用不同的图标集

面包屑

分页

配置 ARIA 标签

生成完整控件集

配置控件

尺寸

辅助器配置

贡献

补丁和功能

测试

错误 & 反馈

`模板`