1

我正在尝试探索 BootsFaces，但是我被困在 Navbar 中，因为 NavBar 没有在小屏幕上扩展。

这是我的index.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui"
    xmlns:pe="http://primefaces.org/ui/extensions"
    xmlns:b="http://bootsfaces.net/ui">

<h:head></h:head>
<body>

    <b:navBar brand="KP's Brand" inverse="true" brandHref="#" fixed="top">
        <b:container>
            <b:navbarLinks>
                <b:navLink value="home" iconAwesome="home" href="#"></b:navLink>
                <b:navLink value="Cricket" href="#"></b:navLink>
                <b:navLink value="football" href="#"></b:navLink>
                <b:navLink value="Sports" href="#"></b:navLink>
            </b:navbarLinks>
        </b:container>
    </b:navBar>

    <b:container>
        <p:row>
            <p:panel header="hello world">Welcome to Primefaces world</p:panel>
        </p:row>
    </b:container>
</body>
</html>

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.1" xmlns="http://xmlns.jcp.org/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd">
    <context-param>
        <param-name>BootsFaces_USETHEME</param-name>
        <param-value>bootstrap</param-value>
    </context-param>
    <context-param>
        <param-name>primefaces.THEME</param-name>
        <param-value>bootstrap</param-value>
    </context-param>
    <servlet>
        <servlet-name>Faces Servlet</servlet-name>
        <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>*.xhtml</url-pattern>
    </servlet-mapping>
    <welcome-file-list>
        <welcome-file>index.xhtml</welcome-file>
    </welcome-file-list>
</web-app>

最后pom.xml

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>com.kp.swasthik</groupId>
    <artifactId>kp-bjsf</artifactId>
    <packaging>war</packaging>
    <version>0.0.1-SNAPSHOT</version>
    <name>kp-bjsf Maven Webapp</name>
    <url>http://maven.apache.org</url>
    <dependencies>

        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>3.1.0</version>
            <scope>runtime</scope>
        </dependency>

        <dependency>
            <groupId>javax.servlet.jsp.jstl</groupId>
            <artifactId>javax.servlet.jsp.jstl-api</artifactId>
            <version>1.2.1</version>
            <scope>runtime</scope>
        </dependency>

        <dependency>
            <groupId>javax.el</groupId>
            <artifactId>javax.el-api</artifactId>
            <version>3.0.0</version>
            <scope>runtime</scope>
        </dependency>

        <dependency>
            <groupId>net.bootsfaces</groupId>
            <artifactId>bootsfaces</artifactId>
            <version>0.7.0</version>
        </dependency>


        <dependency>
            <groupId>org.apache.myfaces.core</groupId>
            <artifactId>myfaces-impl</artifactId>
            <version>2.2.8</version>
        </dependency>

        <dependency>
            <groupId>org.primefaces.extensions</groupId>
            <artifactId>primefaces-extensions</artifactId>
            <version>3.2.0</version>
        </dependency>

        <dependency>
            <groupId>org.primefaces</groupId>
            <artifactId>primefaces</artifactId>
            <version>5.2</version>
        </dependency>

        <dependency>
            <groupId>org.primefaces.themes</groupId>
            <artifactId>all-themes</artifactId>
            <version>1.0.10</version>
        </dependency>

        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.12</version>
            <scope>test</scope>
        </dependency>

        <dependency>
            <groupId>ch.qos.logback</groupId>
            <artifactId>logback-classic</artifactId>
            <version>1.1.3</version>
        </dependency>

        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-api</artifactId>
            <version>1.7.12</version>
        </dependency>

        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>jul-to-slf4j</artifactId>
            <version>1.7.12</version>
        </dependency>

        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>jcl-over-slf4j</artifactId>
            <version>1.7.12</version>
        </dependency>

        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>log4j-over-slf4j</artifactId>
            <version>1.7.12</version>
        </dependency>


    </dependencies>

    <repositories>
        <repository>
            <id>prime-repo</id>
            <name>PrimeFaces Maven Repository</name>
            <url>http://repository.primefaces.org</url>
            <layout>default</layout>
        </repository>
    </repositories>

    <build>
        <finalName>kp-bjsf</finalName>
        <plugins>

            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.3</version>
                <configuration>
                    <source>1.8</source>
                    <target>1.8</target>
                </configuration>
            </plugin>
        </plugins>
    </build>
</project>

这是桌面上显示的页面

在此处输入图像描述 和显示在移动设备中的页面 在此处输入图像描述 如上所示，即使显示了导航栏切换按钮，单击按钮时我也看不到（不展开）导航链接。

这是 Firebug html 代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link
    href="/kp-bjsf/javax.faces.resource/theme.css.xhtml?ln=primefaces-bootstrap"
    rel="stylesheet" type="text/css">
<link href="/kp-bjsf/javax.faces.resource/css/core.css.xhtml?ln=bsf"
    type="text/css" rel="stylesheet">
<link href="/kp-bjsf/javax.faces.resource/css/navbar.css.xhtml?ln=bsf"
    type="text/css" rel="stylesheet">
<link
    href="/kp-bjsf/javax.faces.resource/primefaces.css.xhtml?ln=primefaces&amp;v=5.2"
    type="text/css" rel="stylesheet">
<script
    src="/kp-bjsf/javax.faces.resource/jquery/jquery.js.xhtml?ln=primefaces&amp;v=5.2"
    type="text/javascript"></script>
<script
    src="/kp-bjsf/javax.faces.resource/jquery/jquery-plugins.js.xhtml?ln=primefaces&amp;v=5.2"
    type="text/javascript"></script>
<script
    src="/kp-bjsf/javax.faces.resource/primefaces.js.xhtml?ln=primefaces&amp;v=5.2"
    type="text/javascript"></script>
<script src="/kp-bjsf/javax.faces.resource/js/tooltip.js.xhtml?ln=bsf"
    type="text/javascript"></script>
<link
    href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"
    rel="stylesheet" type="text/css">
<!--[if lt IE 9]><script src="/kp-bjsf/javax.faces.resource/js/html5shiv.js.xhtml?ln=bsf"></script><script src="/kp-bjsf/javax.faces.resource/js/respond.js.xhtml?ln=bsf"></script><![endif]-->
<script type="text/javascript">if(window.PrimeFaces){}</script>
</head>
<body>
    <div role="navigation" class="navbar navbar-inverse navbar-fixed-top"
        id="j_id_5">
        <div class="container">
            <div class="navbar-header">
                <button data-target=".navbar-ex1-collapse" data-toggle="collapse"
                    class="navbar-toggle" type="button">
                    <span class="sr-only">Toggle navigation</span><span
                        class="icon-bar"></span><span class="icon-bar"></span><span
                        class="icon-bar"></span>
                </button>
                <a href="#" class="navbar-brand"><span>KP's Brand</span></a>
            </div>
            <div class="collapse navbar-collapse navbar-ex1-collapse">
                <div class="container" id="j_id_6">
                    <ul class="nav navbar-nav" id="j_id_7">
                        <li class="" name="j_id_8" id="j_id_8"><a tabindex="-1"
                            role="menuitem" href="#"><span><i class="fa fa-home"
                                    id="j_id_8_icon"></i></span> home</a></li>
                        <li class="" name="j_id_9" id="j_id_9"><a tabindex="-1"
                            role="menuitem" href="#">Cricket</a></li>
                        <li class="" name="j_id_a" id="j_id_a"><a tabindex="-1"
                            role="menuitem" href="#">football</a></li>
                        <li class="" name="j_id_b" id="j_id_b"><a tabindex="-1"
                            role="menuitem" href="#">Sports</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="container" id="j_id_c">
        <div data-widget="widget_j_id_e"
            class="ui-panel ui-widget ui-widget-content ui-corner-all"
            id="j_id_e">
            <div
                class="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all"
                id="j_id_e_header">
                <span class="ui-panel-title">hello world</span>
            </div>
            <div class="ui-panel-content ui-widget-content" id="j_id_e_content">Welcome
                to Primefaces world</div>
        </div>
    </div>

    <div id="textarea_simulator"
        style="position: absolute; top: 0px; left: 0px; visibility: hidden;"></div>
</body>
</html>

并且还让我知道在当前重叠<p:panel>后如何渲染<b:navbar>

4

1 回答 1

2

我花了一段时间才看到错误，但事实证明它非常简单：将 HTML 样式的<body>标记替换为<h:body>. 这也是一个令人讨厌的陷阱，不止一次地抓住了我。

至于重叠：在我们的展示中，我们只是为 body 标签添加了一个 75 像素的填充。

当我们这样做时，将<b:container>标签上移一层。在导航栏中没有意义。<b:container>是关于定义页面的宽度（以及其他一些事情）。二、请在<b:column>里面放一个<b:row>。生成的源代码如下所示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">            
<html xmlns="http://www.w3.org/1999/xhtml"                                                                                           
    xmlns:ui="http://java.sun.com/jsf/facelets"                                                                                      
    xmlns:f="http://java.sun.com/jsf/core"                                                                                           
    xmlns:h="http://java.sun.com/jsf/html"                                                                                           
    xmlns:p="http://primefaces.org/ui"                                                                                               
    xmlns:pe="http://primefaces.org/ui/extensions"                                                                                   
    xmlns:b="http://bootsfaces.net/ui">                                                                                              

  <h:head></h:head>                                                                                                                  
  <h:body style="padding-top: 75px">                                                                                                 
    <b:container>                                                                                                                    
        <b:navBar brand="KP's Brand" inverse="true" brandHref="#" fixed="top">                                                       
            <b:navbarLinks>                                                                                                          
                <b:navLink value="home" iconAwesome="home" href="#"></b:navLink>                                                     
                <b:navLink value="Cricket" href="#"></b:navLink>                                                                     
                <b:navLink value="Football" href="#"></b:navLink>                                                                    
                <b:navLink value="Sports" href="#"></b:navLink>                                                                      
            </b:navbarLinks>                                                                                                         
        </b:navBar>                                                                                                                  
    </b:container>                                                                                                                   

    <b:container>                                                                                                                    
        <b:row>                                                                                                                      
            <b:column span="12">                                                                                                     
                <b:panel title="Hello world">
                   Welcome to the BootsFaces world :)
                </b:panel>                                                
            </b:column>                                                                                                              
        </b:row>                                                                                                                     
        <b:row>                                                                                                                      
            <b:column span="12">                                                                                                     
                <b:messages />                                                                                                       
            </b:column>                                                                                                              
        </b:row>                                                                                                                     
    </b:container>                                                                                                                   
  </h:body>                                                                                                                          
</html>
于 2015-08-12T20:20:46.480 回答