我尝试使用bootstrap css文件设计带页眉页脚和正文的页面

Question

我尝试使用bootstrap css文件设计带有页眉页脚和正文的页面。以下是我的xhtml代码

 <?xml version="1.0" encoding="UTF-8"?>           
      <h:head>
        <link rel="stylesheet" type="text/css" href="boot.css"/>
        <link rel="stylesheet" type="text/css" href="boot-min.css" />
        <link rel="stylesheet" type="text/css" href="boot-responsive.css" />
        <link rel="stylesheet" type="text/css" href="boot-responsive-min.css" />

    </h:head>
    <h:body>
        <div class="container-fluid" style="border-top-left-radius:6px; >      
            <div class="row-fluid" >
                <div class="span2">  
                    <h1 style="color:#FFFFFF;  font-family: Segoe ui;">   </h1>                 
                </div>
                <div class="span4 offset6">  
                    <h2 style="color: #fff;"></h2>
                </div></div>    </div>       
                     <div class="container-fluid">
            <div class="row-fluid">
                <div class="span12" >         
                    <h:form id="prabha">       
                                <table cellpadding="15" cellsacing="30">    
                                    <tr> <td><h:outputLabel value="CompanyID:" style="font-family: fantasy"> </h:outputLabel></td>
                                        <td>    <p:inputText value="#{route.r1.companyid}" required="true" ></p:inputText></td></tr>
                                    <tr><td>  <h:outputLabel value="Tour Name:" style="font-family: fantasy" > </h:outputLabel></td>
                                        <td> <p:selectOneMenu id= "h" value="#{route.r1.tourname}"  editable="true"> 
                                                <f:selectItem itemLabel="SELECT" itemValue="SELECT" />                                        
                                            </p:selectOneMenu>  </td>  </tr>                                                                                                         
                                       <tr> <td><h:outputLabel value="Represent EMAIL:"  style="font-family: fantasy"> </h:outputLabel></td>
                                        <td>    <p:inputText value="" required="true" requiredMessage="enter email"></p:inputText></td></tr>                                                                       
                                       <tr>           <td>  <p:commandButton value="Update" icon="ui-icon-circle-arrow-n" update=":prabha" actionListener="#{route.onUpdateSelect}"></p:commandButton></td>   
                           </tr>    </table>                             
                    </h:form>
                </div></div></div>
                    <div class="container-fluid">
                        <div class="row-fluid">
                            <div class="span12">
                           <table>  <tr> <td>  <p:graphicImage value="/images/copy.png"/> </td> <td>Powered by<a href="http://GreenBuds.co.in/"> GreenBuds</a></td></tr>
                            </table> 
                </div>  </div>  </div>              
    </h:body>
</html>

当为页眉，正文和页脚应用bootstrap css并在页面中显示仅运行文件标题时。 为什么会这样？