导航栏切换按钮不起作用 BootsFaces
Navbar toggle button not working BootsFaces
我正在尝试探索 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>
这是桌面显示的页面
页面显示在移动设备
如上所示，即使显示了导航栏切换按钮，但在单击该按钮时我无法看到（未展开）导航链接。
这里是Firebughtml代码
<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&v=5.2"
type="text/css" rel="stylesheet">
<script
src="/kp-bjsf/javax.faces.resource/jquery/jquery.js.xhtml?ln=primefaces&v=5.2"
type="text/javascript"></script>
<script
src="/kp-bjsf/javax.faces.resource/jquery/jquery-plugins.js.xhtml?ln=primefaces&v=5.2"
type="text/javascript"></script>
<script
src="/kp-bjsf/javax.faces.resource/primefaces.js.xhtml?ln=primefaces&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>
并且让我知道如何在 <b:navbar> 当前重叠
之后渲染 <p:panel>
我花了一些时间才看到错误，但事实证明它真的很简单：用 <h:body> 替换 HTML 风格的 <body> 标签。这也是一个让我不止一次陷入困境的令人讨厌的陷阱。
至于重叠：在我们的展示中，我们只是向 body 标签添加了 75 像素的填充。
在我们这样做的同时，将 <b:container> 标记上移一级。它在导航栏内没有意义。 <b:container> 是关于定义页面的宽度（以及其他一些东西）。第二，请在<b:row>里面放一个<b:column>。生成的源代码如下所示：
<!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>
我正在尝试探索 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>
这是桌面显示的页面
这里是Firebughtml代码
<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&v=5.2"
type="text/css" rel="stylesheet">
<script
src="/kp-bjsf/javax.faces.resource/jquery/jquery.js.xhtml?ln=primefaces&v=5.2"
type="text/javascript"></script>
<script
src="/kp-bjsf/javax.faces.resource/jquery/jquery-plugins.js.xhtml?ln=primefaces&v=5.2"
type="text/javascript"></script>
<script
src="/kp-bjsf/javax.faces.resource/primefaces.js.xhtml?ln=primefaces&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>
并且让我知道如何在 <b:navbar> 当前重叠
<p:panel>
我花了一些时间才看到错误，但事实证明它真的很简单：用 <h:body> 替换 HTML 风格的 <body> 标签。这也是一个让我不止一次陷入困境的令人讨厌的陷阱。
至于重叠：在我们的展示中，我们只是向 body 标签添加了 75 像素的填充。
在我们这样做的同时，将 <b:container> 标记上移一级。它在导航栏内没有意义。 <b:container> 是关于定义页面的宽度（以及其他一些东西）。第二，请在<b:row>里面放一个<b:column>。生成的源代码如下所示：
<!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>