부트 스트랩이 UI 구성 태그 아래에서 작동하지 않습니다.

모든 페이지에 Navbar을 포함시키려는 웹 사이트를 디자인 할 때마다 navbar 코드를 bootstrap보다 작게 작성하는 것이 문제입니다. 이 태그가 없으면 모든 것이 잘 작동합니다.부트 스트랩이 UI 구성 태그 아래에서 작동하지 않습니다.

실무 코드

<?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으로, 부트 스트랩은

<?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>

출처

2016-12-01 Muhammad Yawar

밖에서 ode : compsition 무시? 왜 템플릿을 사용하고 거기에 부트 스트랩을 넣지 않습니까? 여기를 참조하십시오 : http://stackoverflow.com/questions/6525050/understand-the-purpose-of-jsf-uicomposition – Tim

모든 것이 컴포지션 태그 내부 또는 외부에서 무시됩니다. –

정말 '질문이 아니 었습니다. - 태그는 무시됩니다. 따라서 boostrap과 composition을 모두 포함하는 템플릿을 사용하라는 제안 – Tim

를 작동하지 않는 UI : 자재 태그가 '템플릿'을 통해 템플릿을 참조 할 속성을 같이 사용된다 :

<ui:composition template="template.xhtml">

템플릿은 ju st태그를 사용하여 템플릿을 사용하여 파일에서 참조 할 수있는 이름 속성이있는 <ui:insert> 태그가 하나 이상 포함 된 일반 얼굴 파일입니다. 예를 들어 는 템플릿이 포함되어있는 경우 : 당신이 좋아하는 <ui:composition> 태그 내의 다른 파일에서 참조 할 수있는 것보다

<ui:insert name="top">

결과 HTML은 하나 만 템플리트 <ui:define>에서 생성됩니다

<ui:define name="top">

부품은 <ui:insert> 태그에서 생성 된 html로 대체됩니다. 템플릿이 없으므로 올바른 html을 만들 수없고 머리 없음 ...

출처

2016-12-01 12:10:36

부트 스트랩이 UI 구성 태그 아래에서 작동하지 않습니다.

답변

관련 문제