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

Question

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

项目是使用symfony new my_project_name --full 创建的。我在我的 base.html.twig 中添加了带有 https://getbootstrap.com/docs/5.0/getting-started/introduction/#css 的 Bootstrap CSS 和带有 https://getbootstrap.com/docs/5.0/getting-started/introduction/#bundle 的 JS。

我采取的步骤：

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

我所期待的：

• 访问控制器/视图时，我会看到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">
...