JMF*_*JMF 5 liferay-theme twitter-bootstrap twitter-bootstrap-3 liferay-6.2
我正在使用Liferay 6.2中的Bootstrap 3。我在CSS和JS中插入了bootstrap.css和bootstrap.min.js。我也更改了我的custom.css中的某些样式
您对它有更好的主意吗?
然后,我附加了将Bootstrap 3插入Liferay 6.2的步骤。上面的内容为我提供了一些兼容性问题...我想征询您的意见,例如是否有更适合于这些工具和这些版本的代码。我需要您的帮助来改善这一点,并且每个人都可以使用Liferay 6.2中的Bootstrap 3。这是我的两分钱。
脚步:
1-将Bootstrap CSS,JS和字体放在主题内的_diffs目录文件夹中
2-我们打开或创建main.css文件,并调用文件Bootstrap.css
3-在portal_normal.vm上,以上述方案中显示的名称添加对JavaScript的两个调用。
4-我们将与2.3.2版本默认的Liferay版本冲突的custom.css CSS类插入
-custom.css-
.signed-in .collapse { display:block; }
.lfr-edit-layout-panel .collapse{ display:block; }
.dockbar.navbar-static-top .collapse { display: block; }
.navbar-inner .collapse{ display:block; }
.dockbar-ready section#content { padding: 0 0 0 0; }
.dockbar.navbar-static-top {
background-color: transparent;
padding: 0px;
}
.dockbar-messages{ display:none; }
.lfr-device-preview{ z-index: 1000; }
.modal{ display:block; }
.modal-hidden{ display:none; }
Run Code Online (Sandbox Code Playgroud)
你觉得这个怎么样:
“您需要采取一些技巧才能使 bootstrap 3 的部分内容在 liferay 中工作。
我曾与一位设计师合作过,他非常希望在 Liferay 的某些部分使用 Bootstrap 3。
这是我已经完成的:在主题项目的 css 文件中,我复制了引导库。在该文件夹上,我使用以下代码创建了一个 scss 文件:
.bootstrap-3 {
@import "bootstrap";
}
其中 bootstrap 指示根据 scss 规则要包含的文件: _bootstrap.scss 基本上是由原始 css 制成的文件。
诀窍是在需要使用库的地方使用命名空间。
当调用AJAX内容时,我们只需要添加类..有时CSS规则会因为类的数量和liferay使用的id而变得更加棘手,但按优先级付费应该可以解决..
我宁愿使用这种方法,因为它更容易控制与原始库的冲突......”