Bootstrap 无法在 ui 组合标签 JSF 下工作
Bootstrap not working under ui composition tag JSF
我正在设计一个网站,其中我想在所有页面中包含我的 Navbar
,问题是每当我在 ui:composition
标签内编写 navbar
代码时 bootstrap
熄灭。没有这个标签一切正常。
工作代码
<?xml version="1.0" encoding="UTF-8"?>
<!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:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core" xml:lang="en" lang="en">
<h:head>
<title>JSF 2.x Page</title>
<meta http-equiv="keywords" content="enter,your,keywords,here" />
<meta http-equiv="description"
content="A short description of this page." />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<h:outputStylesheet library="css" name="black.css" />
<h:outputStylesheet library="css" name="bootstrap.css" />
<h:outputScript library="js" name="bootstrap.js" />
<h:outputScript library="js" name="bootstrap.min.js" />
</h:head>
<h:body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">My Task</a>
</div>
<button class="btn btn-success navbar-btn">Projects</button>
<button class="btn btn-success navbar-btn">Objects</button>
<button class="btn btn-success navbar-btn">Properties</button>
<button class="btn btn-success navbar-btn">Property Types</button>
</div>
</nav>
</h:body>
</html>
但是对于 ui:composition
,bootstrap 不起作用
<?xml version="1.0" encoding="UTF-8"?>
<!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:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core" xml:lang="en" lang="en">
<h:head>
<title>JSF 2.x Page</title>
<meta http-equiv="keywords" content="enter,your,keywords,here" />
<meta http-equiv="description"
content="A short description of this page." />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<h:outputStylesheet library="css" name="black.css" />
<h:outputStylesheet library="css" name="bootstrap.css" />
<h:outputScript library="js" name="bootstrap.js" />
<h:outputScript library="js" name="bootstrap.min.js" />
</h:head>
<h:body>
<ui:composition>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">My Task</a>
</div>
<button class="btn btn-success navbar-btn">Projects</button>
<button class="btn btn-success navbar-btn">Objects</button>
<button class="btn btn-success navbar-btn">Properties</button>
<button class="btn btn-success navbar-btn">Property Types</button>
</div>
</nav>
</ui:composition>
</h:body>
</html>
ui:composition 标签用于通过其 'template' 引用模板
属性如:
<ui:composition template="template.xhtml">
该模板只是一个包含一个或多个 <ui:insert>
的常规面孔文件
具有名称属性的标签,您可以使用模板使用 <ui:define>
标签从文件中引用该标签。
例如,如果您的模板包含:
<ui:insert name="top">
你可以从 <ui:composition>
标签内的另一个文件引用它,例如:
<ui:define name="top">
结果 html 将是从模板创建的,只有 <ui:define>
部分被替换为 <ui:insert>
标签中生成的任何 html...
所以,如果没有模板,你就不会创建正确的 html,没有头没有 body..
我正在设计一个网站,其中我想在所有页面中包含我的 Navbar
,问题是每当我在 ui:composition
标签内编写 navbar
代码时 bootstrap
熄灭。没有这个标签一切正常。
工作代码
<?xml version="1.0" encoding="UTF-8"?>
<!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:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core" xml:lang="en" lang="en">
<h:head>
<title>JSF 2.x Page</title>
<meta http-equiv="keywords" content="enter,your,keywords,here" />
<meta http-equiv="description"
content="A short description of this page." />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<h:outputStylesheet library="css" name="black.css" />
<h:outputStylesheet library="css" name="bootstrap.css" />
<h:outputScript library="js" name="bootstrap.js" />
<h:outputScript library="js" name="bootstrap.min.js" />
</h:head>
<h:body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">My Task</a>
</div>
<button class="btn btn-success navbar-btn">Projects</button>
<button class="btn btn-success navbar-btn">Objects</button>
<button class="btn btn-success navbar-btn">Properties</button>
<button class="btn btn-success navbar-btn">Property Types</button>
</div>
</nav>
</h:body>
</html>
但是对于 ui:composition
,bootstrap 不起作用
<?xml version="1.0" encoding="UTF-8"?>
<!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:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core" xml:lang="en" lang="en">
<h:head>
<title>JSF 2.x Page</title>
<meta http-equiv="keywords" content="enter,your,keywords,here" />
<meta http-equiv="description"
content="A short description of this page." />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<h:outputStylesheet library="css" name="black.css" />
<h:outputStylesheet library="css" name="bootstrap.css" />
<h:outputScript library="js" name="bootstrap.js" />
<h:outputScript library="js" name="bootstrap.min.js" />
</h:head>
<h:body>
<ui:composition>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">My Task</a>
</div>
<button class="btn btn-success navbar-btn">Projects</button>
<button class="btn btn-success navbar-btn">Objects</button>
<button class="btn btn-success navbar-btn">Properties</button>
<button class="btn btn-success navbar-btn">Property Types</button>
</div>
</nav>
</ui:composition>
</h:body>
</html>
ui:composition 标签用于通过其 'template' 引用模板 属性如:
<ui:composition template="template.xhtml">
该模板只是一个包含一个或多个 <ui:insert>
的常规面孔文件
具有名称属性的标签,您可以使用模板使用 <ui:define>
标签从文件中引用该标签。
例如,如果您的模板包含:
<ui:insert name="top">
你可以从 <ui:composition>
标签内的另一个文件引用它,例如:
<ui:define name="top">
结果 html 将是从模板创建的,只有 <ui:define>
部分被替换为 <ui:insert>
标签中生成的任何 html...
所以,如果没有模板,你就不会创建正确的 html,没有头没有 body..