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



我正在学习web开发,我正试图在现有的Symfony 5.3项目中使用corei 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和JS与https://getbootstrap.com/docs/5.0/getting-started/introduction/#bundle到我的base.html.twig。

我走过的路:

  • 创建新的控制器
  • 使用小枝模板创建关联视图
  • 在我的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/

实际结果

  • 小的样式变化(从corei而不是原来的Bootstrap),但没有布局变化

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

查看您在https://coreui.io/demo/free/3.4.0/上提供的演示页面源代码,可以看到您在自己的项目中需要的HTML元素,然后将corei(在本例中)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">
...

最新更新