css - Bootstrap 类与 Liferay portlet 首选项冲突

Question

我在正确显示 portlet 的首选项(Liferay 6.2.0 服务器)时遇到困难。我只想要右上角的窗口可以正确显示。

我已经根据互联网教程设置了我的 Portlet 首选项。如果我点击右上角，点击配置，然后点击设置，我的首选项页面就会显示，它工作正常。

但是，我的大部分 portlet 的 JSP 使用 Bootstrap...不幸的是，bootstrap css 类和 portlet 首选项页面(由 Liferay 设计)之间似乎存在冲突。因此，如果我单击设置(右上角按钮)进入非 Bootstrap 页面，一切正常。如果我使用 bootstrap 单击它进入页面，则不会加载 portlet 首选项(也不会加载外观窗口)。

我通过将 Bootstrap2.3.2 css 和 js 文件复制到我的 portlet 元素中的适当目录并将它们包含到 jsps 中来实现 Bootstrap 。

我考虑过花 2 个小时试图找到导致此困惑的确切 Bootstrap 类，并将它们从 Bootstrap css 文件中排除。但我放弃了，因为浏览器缓存/历史问题总是返回不连贯的结果。

更智能的方法可能是从我的 Bootstrap 页面直接调用配置 jsp(不使用右上角的 liferay 窗口)。我可以加载页面，但使用保存按钮不会保存选项。我想我需要添加一些额外的代码，这些代码在从右侧/顶部窗口调用配置 jsp 时由 Liferay 自动生成。

我的config.jsp如下:

<%@include file="/jsp/include/init.jsp"%>


<liferay-portlet:actionURL portletConfiguration="true"
    var="configurationURL" />

<%  

String value1_cfg = GetterUtil.getString(portletPreferences.getValue("--value1--", ""));
String value2_cfg = GetterUtil.getString(portletPreferences.getValue("value2", ""));
...
%>

<aui:form action="<%= configurationURL %>" method="post" name="fm">
    <aui:input name="<%= Constants.CMD %>" type="hidden"
        value="<%= Constants.UPDATE %>" />

...miscellanous form controls that let users change the options....


    <aui:button-row>
        <aui:button type="submit" />
    </aui:button-row>
</aui:form>

<%!
public boolean checkListSelected(String value, String param){
 if(value.equals(param)) 
     return true;
 else
     return false;
}
%>

有谁知道我该如何解决这个问题？我对任何解决方案持开放态度:- 导入 Bootstrap 的更好方法- 如果有人知道哪些是困惑的，则隔离冲突的 Bootstrap 类- 直接通过 config.jsp 设置选项

提前致谢。

Answer 1

单个 portlet 永远不应该添加像 Bootstrap 这样设计用于整个页面的 CSS 框架，因为 portlet 只负责它自己的一小部分，不应该干扰页面上的其他元素。

好消息是:默认的 Liferay 主题。 AlloyUI 已经集成了 Bootstrap 2.3.2，因此无需自己将其包含在您的 portlet 中。

如果您已经实现了自己的主题，那么您只需扩展styled 或classic 主题以包含 Bootstrap 类。