5

我正在使用 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 - 我们在 custom.css 中插入与 2.3.2 版本冲突的 CSS 类，默认一个 Liferay

--- 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; }
4

1 回答 1

1

你怎么看这个：

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

我曾与一位真正想在 liferay 的某些部分使用 bootstrap 3 的设计师合作。

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

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

根据 scss 规则，引导程序指示要包含的文件：_bootstrap.scss 基本上是由原始 css 制成的文件。

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

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

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

于 2016-03-17T18:11:44.850 回答