README

此包为 Laravel 的 Backpack 管理面板提供主题，使用 CoreUI v2 和隐式 Bootstrap v4。作为一个 UI（即 UI 框架，即管理面板模板），它看起来和运行方式如 https://backstrap.net/ 上所见 - 因为它是对 CoreUI v2 的定制版本。

它于 2021 年作为 Backpack 核心部分发布。到 2023 年，它已分离成这个包，作为提供 100% 向后兼容性的方式，供那些不想升级到较新主题（如 CoreUI v4 和 Tabler）的用户。

为什么有人不想升级呢？嗯...因为一些开发者

必须支持 IE；而尽管 Bootstrap v5 在各个方面都更好...但它确实放弃了 IE 的支持；
对 blade 文件进行了大量定制，以至于无法升级；

如果你是上述开发者之一，不必担心...这个包为你提供了一种方法，让你在不引起太大波澜的情况下将项目升级到 Backpack v6...但我们确实不打算为这个主题添加更多功能。它只是为那些无法升级的人提供的一个支撑。

截图

安装

自动安装

因为这是一个第一方主题，你可以快速使用以下命令安装它

php artisan backpack:require:theme-coreuiv2

或者，按照下面的手动安装过程进行。

手动安装

步骤 1. 使用 Composer 安装

composer require backpack/theme-coreuiv2

步骤 2. 前往 config/backpack/ui.php 并更改你的视图命名空间

-    'view_namespace' => 'backpack::',
+    'view_namespace' => 'backpack.theme-coreuiv2::',

步骤 3. (可选) 发布主题配置文件

php artisan vendor:publish --tag="theme-coreuiv2-config"

卸载

要卸载此 Backpack 主题

移除 composer 包。例如，composer remove backpack/theme-coreuiv2
删除配置文件。例如，rm -rf config/backpack/theme-coreuiv2.php
安装新主题（例如，php artisan backpack:require:theme-coreuiv4）或更改 config/backpack/ui.php 中的 view_namespace 为你想要激活的主题。

覆盖

如果你需要以任何方式更改 blade 文件，你可以轻松地将文件复制粘贴到你的应用中，并按任何方式修改该文件。如果你这样做到正确的目录，你的文件将替换包中的文件。但请记住，你将不会为该文件获得任何更新。

你复制的文件越多，定制的越多，升级到新版本就越困难。所以请尽量少这样做。

# create the custom directory if it's not already there
mkdir -p resources/views/vendor/backpack/theme-coreuiv2

# copy the blade file inside the folder we created above
cp -i vendor/backpack/theme-coreuiv2/src/resources/views/dashboard.blade.php resources/views/vendor/backpack/theme-coreuiv2/dashboard.blade.php

定制

在 config/backpack/theme-coreuiv2.php 中，你会注意到有一些变量，你可以更改代表页眉、主体、侧边栏和页脚的 HTML 元素的 CSS 类。

    // Horizontal navbar classes. Helps make the admin panel look similar to your project's design.
    'header_class' => 'app-header bg-light border-0 navbar',
        // Try adding bg-dark, bg-primary, bg-secondary, bg-danger, bg-warning, bg-success, bg-info, bg-blue, bg-light-blue, bg-indigo, bg-purple, bg-pink, bg-red, bg-orange, bg-yellow, bg-green, bg-teal, bg-cyan
        // You might need to add "navbar-dark" too if the background color is a dark one.
        // Add header-fixed if you want the header menu to be sticky

    // Body element classes.
    'body_class' => 'app aside-menu-fixed sidebar-lg-show',
        // Try sidebar-hidden, sidebar-fixed, sidebar-compact, sidebar-lg-show


    // Sidebar element classes.
    'sidebar_class' => 'sidebar sidebar-pills bg-light',
        // Remove "sidebar-transparent" for standard sidebar look
        // Try "sidebar-light" or "sidebar-dark" for dark/light links
        // You can also add a background class like bg-dark, bg-primary, bg-secondary, bg-danger, bg-warning, bg-success, bg-info, bg-blue, bg-light-blue, bg-indigo, bg-purple, bg-pink, bg-red, bg-orange, bg-yellow, bg-green, bg-teal, bg-cyan

    // Footer element classes.
    'footer_class' => 'app-footer',

我们的默认设计可能不符合你的口味，或者你可能需要使 UI 与你的项目更好地集成。我们完全理解。你可以使用上面的类来使其看起来相当不同。

下面有一些示例 - 但你应该使用你想要的类来得到你需要的成果。

Backstrap

透明的顶部菜单，透明的侧边栏，透明的页脚。这是默认设置。这是我们根据 8 年以上的经验构建管理面板认为大多数用户最好的选择。优先考虑内容而不是菜单。

    'header_class' => 'app-header bg-light border-0 navbar',
    'body_class' => 'app aside-menu-fixed sidebar-lg-show',
    'sidebar_class' => 'sidebar sidebar-pills bg-light',
    'footer_class' => 'app-footer',

受 CoreUI 启发

白色顶部菜单，深色侧边栏。

    'header_class' => 'app-header navbar',
    'body_class' => 'app aside-menu-fixed sidebar-lg-show',
    'sidebar_class' => 'sidebar',
    'footer_class' => 'app-footer d-none',

灵感来自GitHub

黑色顶部菜单，白色侧边栏。

    'header_class' => 'app-header bg-dark navbar',
    'body_class' => 'app aside-menu-fixed sidebar-lg-show',
    'sidebar_class' => 'sidebar bg-white sidebar-pills',
    'footer_class' => 'app-footer d-none',

蓝色顶部菜单

蓝色顶部菜单，深色侧边栏。

    'header_class' => 'app-header navbar navbar-color bg-primary border-0',
    'body_class' => 'app aside-menu-fixed sidebar-lg-show',
    'sidebar_class' => 'sidebar', // add "bg-white sidebar-pills" for light sidebar
    'footer_class' => 'app-footer d-none',

施工/警告

黄色顶部菜单，深色侧边栏。

    'header_class' => 'app-header navbar navbar-light bg-warning',
    'body_class' => 'app aside-menu-fixed sidebar-lg-show',
    'sidebar_class' => 'sidebar', // add "bg-white sidebar-pills" for light sidebar
    'footer_class' => 'app-footer d-none',

红色顶部菜单

红色顶部菜单，深色侧边栏。

    'header_class' => 'app-header navbar navbar-color bg-error border-0',
    'body_class' => 'app aside-menu-fixed sidebar-lg-show',
    'sidebar_class' => 'sidebar', // add "bg-white sidebar-pills" for light sidebar
    'footer_class' => 'app-footer d-none',

粉色顶部菜单

粉色顶部菜单，透明侧边栏。

    'header_class' => 'app-header navbar navbar-color bg-error border-0',
    'body_class' => 'app aside-menu-fixed sidebar-lg-show',
    'sidebar_class' => 'sidebar sidebar-pills bg-light',
    'footer_class' => 'app-footer d-none',

绿色顶部菜单

绿色顶部菜单，白色侧边栏。

    'header_class' => 'app-header navbar navbar-color bg-green border-0',
    'body_class' => 'app aside-menu-fixed sidebar-lg-show',
    'sidebar_class' => 'sidebar sidebar-pills bg-white',
    'footer_class' => 'app-footer d-none',

变更日志

变更记录在GitHub上。请参阅发布标签。

贡献

请参阅contributing.md以获取待办事项和操作指南。

安全性

如果您发现任何安全问题，请通过电子邮件hello@backpackforlaravel.com联系，而不是使用问题跟踪器。

致谢

许可证

该项目发布在MIT许可证下，因此您可以在任何Backpack & Laravel项目之上安装它。有关更多信息，请参阅许可证文件。

backpack / theme-coreuiv2

维护者

详细信息