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

Question

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

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

我已成功将 Bootstrap 集成到我的项目中，并且可以访问我的 JSF 文件中的样式-类。所以 CSS 工作正常，问题来自 JavaScript （至少这是我的想法）-> 例如下拉菜单不是 opening/collapsing，我已经在多篇文章中读到这与 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-备选方案-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>

然而，这仍然不能使下拉菜单（因此 Java脚本）对我有用。我错过了什么吗？

注意：bootstrap.css 和 richfaces 的 jquery.js 出现在 chrome 开发者工具 -> 来源中

Answer 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 以某种方式加载到文件末尾。希望这对其他人也有帮助！

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

Integrate Bootstrap in existing web application

mapping

jquery

jsf

richfaces

twitter-bootstrap