带有Bootstrap 3的Liferay 6.2（修改.aui）

Question

我想修改.aui Liferay 6.2。现在我有Liferay 6.2和Bootstrap 3.当我使用.row和CONTAINER而不是使用bootstrap 3时，我.aui默认获取。例如，如果我将.row类放在偏心位置，因为我正在捕捉.row Bootstrap 2。

我可以继续custom.css添加!important以使用默认的Bootstrap 3，但我喜欢看看是否有更好的方法。

我想使用.row Bootstrap 3，因为col-*-*我没有添加白菜row-fluid的填充。

Answer 1

你需要做一些技巧，让部分Bootstrap 3在Liferay中运行。我曾与一位真正想在Liferay的某些部分使用Bootstrap 3的设计师合作过。这是我做过的锄头：

在主题项目中，我复制了Bootstrap库到CSS文件中。 在该文件夹中，我使用以下代码创建了一个SCSS文件：

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

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

诀窍是在需要使用库的任何地方使用命名空间。在调用AJAX内容时，我们只需要添加该类。有时候，由于Liferay使用的类和id的数量，CSS规则变得更加棘手，但是应该优先支付优先权。我宁愿使用这种方法，因为它更容易控制与原始库的冲突。