Question

我在Liferay 6.2中使用Bootstrap 3。我在CSS和JS中插入了bootstrap.css和bootstrap.min.js。我在custom.css incompatilibilidad

中也改变了一些风格

你对它有更好的了解吗？

然后我附上了我在Liferay 6.2中插入Bootstrap 3的步骤。上面给出了一些兼容性问题...我想你的意见，例如，如果一个更优的代码使用这些工具和这些版本。我需要你的帮助才能改进这一点，并且每个人都可以使用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; }

Answer 1

你怎么看待这个：

” 你需要做一些技巧让bootstrap 3的部分工作在liferay中。

我曾与一位真正希望在liferay的某些部分拥有bootstrap 3的设计师合作过。

这是我做过的锄头：在主题项目中，我在css文件中复制了bootstrap库。在该文件夹中，我使用以下代码创建了一个scss文件：

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

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

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

当调用AJAX内容时，我们只需要添加类..有时候由于类和liferay使用的数量，CSS规则变得更加棘手，但是优先付费应该解决..

我更喜欢使用这种方法，因为它更容易控制与原始库的冲突......“

在Liferay 6.2中使用Bootstrap 3.3.6

1 个答案: