将 Bootstrap 集成到现有的 Web 应用程序中答案

【问题标题】：Integrate Bootstrap in existing web application将 Bootstrap 集成到现有的 Web 应用程序中
【发布时间】：2017-03-21 13:39:58
【问题描述】：

我的任务是重新设计我们的用户界面，该界面由基于 JSF 2.1 / Richfaces 4.2 框架和 CSS（用 Sass 编写）的 Html 组成。 JSF 由后端的 Java Bean 管理。该任务还包括响应式设计的集成。

至于响应式设计，我决定使用 bootstrap 3.3.7 - 如果您知道更好的方法，请告诉我！

我已经成功地将 Bootstrap 集成到我的项目中，并且可以访问我的 JSF 文件中的样式类。所以 CSS 工作正常，问题出在 JavaScript 上（至少我是这么认为的）-> 例如下拉菜单没有打开/折叠，我已经在多篇文章中读到这与 Bootstrap 和 Richfaces 的 JQuery 之间的 JQuery 冲突有关 - 但首先加载 Richfaces 的 JQuery 并没有解决我的问题。

menu.xhtml：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html"
  xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:c="http://java.sun.com/jsp/jstl/core"
  xmlns:f="http://xmlns.jcp.org/jsf/core">

<h:head>
 <f:facet name="first">
    <h:outputScript name="js/jquery.js"></h:outputScript>
    <h:outputScript name="js/bootstrap.js"></h:outputScript>
 </f:facet>
</h:head>

   <div class="dropdown">
   <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Anmeldung<span class="caret"> </span></a>
      <ul class="dropdown-menu" role="menu">
          <li><h:commandLink href="#">Action</h:commandLink></li>
      </ul>
   </div>

我现在尝试使用一个映射创建一个 static-resource-mappings.properties 文件，以便所有对 jquery.js 的请求都作为对 jquery-alternative-version.js 的请求：

jquery.js=resources/jquery-alternative-version.js

我的 web.xml：

<context-param>
    <param-name>org.richfaces.resourceMapping.enabled</param-name>
    <param-value>true</param-value>
</context-param>
<context-param>
    <param-name>org.richfaces.resourceMapping.mappingFile</param-name>
    <param-value>META-INF/richfaces/static-resource-mappings.properties</param-value>
</context-param>

但是，这仍然不能让 Dropdown（以及因此 Javascript）对我有用。我错过了什么吗？

注意：bootstrap.css 和 richfaces 的 jquery.js 出现在 chromes 开发者工具 -> Sources

【问题讨论】：

如果 jQuery 有问题，Bootstrap 应该会抛出一个错误（因为 RF 4.2 使用的是旧版本，所以应该有这个问题）。该错误告诉您与引导程序相关的某些内容未加载，您需要找到它是什么。在这种情况下，您的网页看起来并不真正相关。
感谢您的帮助！我已经更新了我的问题，因为我认为它不够具体。
我觉得您正在尝试解决一个您还没有遇到的问题。是否加载了 bootstrap.js？控制台有错误吗？
bootstrap.js 未加载且控制台中没有错误。

标签： jquery twitter-bootstrap jsf mapping richfaces

【解决方案1】：

我刚刚通过将 Bootstrap 引用放在最底部解决了所有问题。

<h:outputStylesheet library="bootstrap" name="css/bootstrap.min.css" />
<h:outputScript library="bootstrap" name="js/bootstrap.js"></h:outputScript>
</h:body>
</html>

Richfaces 的 JQuery 以某种方式加载到文件末尾。希望这对其他人也有帮助！

【讨论】：