在Liferay 6.2中使用Bootstrap 3.3.6

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)

Vic*_*tor 1

你觉得这个怎么样:

“您需要采取一些技巧才能使 bootstrap 3 的部分内容在 liferay 中工作。

我曾与一位设计师合作过,他非常希望在 Liferay 的某些部分使用 Bootstrap 3。

这是我已经完成的:在主题项目的 css 文件中,我复制了引导库。在该文件夹上,我使用以下代码创建了一个 scss 文件:

.bootstrap-3 { @import "bootstrap"; }

其中 bootstrap 指示根据 scss 规则要包含的文件: _bootstrap.scss 基本上是由原始 css 制成的文件。

诀窍是在需要使用库的地方使用命名空间。

当调用AJAX内容时,我们只需要添加类..有时CSS规则会因为类的数量和liferay使用的id而变得更加棘手,但按优先级付费应该可以解决..

我宁愿使用这种方法,因为它更容易控制与原始库的冲突......”