实施 COREui 管理模板以匹配演示

Question

我正在学习网络开发，我正在尝试在现有的 Symfony 5.3 项目中使用 COREui 4.0.1 Bootstrap 管理模板，而不是标准的 Bootstrap 5 组件和实用程序。我想让页面看起来像 https://coreui.io/demo/free/3.4.0/.

该项目是使用 symfony new my_project_name --full 创建的。我将 Bootstrap CSS 和 https://getbootstrap.com/docs/5.0/getting-started/introduction/#css and JS with https://getbootstrap.com/docs/5.0/getting-started/introduction/#bundle 添加到我的 base.html.twig.

我采取的步骤：

• 创建一个新控制器
• 使用树枝模板创建关联视图
• 在我的 base.html.twig
中用 https://coreui.io/docs/4.0/getting-started/introduction/#bundle and CSS with https://coreui.io/docs/4.0/getting-started/introduction/#css 替换了 Bootstrap JS

我的预期：

• 访问 controller/view 时，我会看到 https://coreui.io/demo/free/3.4.0/

实际结果：

• 较小的样式更改（来自 COREui 而不是原始 Bootstrap）但没有布局更改

Answer 1

您添加到项目中的 CoreUI CSS 和 JS 的使用方式与您使用 Bootstrap 组件和实用程序的方式相同，即将 添加到 现有 HTML 个元素。

查看您在 https://coreui.io/demo/free/3.4.0/ 提供的演示中的页面源代码显示了您需要在自己的项目中拥有的 HTML 元素，然后会有 CoreUI（在本例中）CSS 和 JS 组件应用 到 它们。

使用该演示 https://coreui.io/demo/free/3.4.0/，如果您想要侧边导航栏，则需要有一个 HTML 元素，例如：

<div class="c-sidebar c-sidebar-dark c-sidebar-fixed c-sidebar-lg-show" id="sidebar">
    <div class="c-sidebar-brand d-lg-down-none">
...