bootstrap后台模板布局

没完有待更新
<!DOCTYPE html>

<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->

<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->

<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->

<!-- BEGIN HEAD -->

<#import "../common/app.ftl" as app> 
<head>

	<Meta charset="utf-8" />

	<title>网上订餐</title>

	<Meta content="width=device-width,initial-scale=1.0" name="viewport" />

	<Meta content="" name="description" />

	<Meta content="" name="author" />
	<link rel="shortcut icon" href="${app.basePath}/resources/images/icon/001.png" type="image/x-icon" /> 

	<!-- BEGIN GLOBAL MANDATORY STYLES -->

	<link href="${app.basePath}/resources/bootstrap/bootstrap.css" rel="stylesheet" type="text/css"/>

	<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>  
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script src="${app.basePath}/resources/bootstrap/bootstrap-paginator.js"></script>
 
 <style>
    #headInfo{
       width:100%;
       height:90px;
       background-color:#000;
    }
    
    #main{
      width:100%;
      min-height:100%;
      height:100%;
      background-color:#3d3d3d;
    }
    
    #pageSide{
       width:230px;
       height:700px;
       float:left;
       background-color:#3d3d3d;
       border:1px solid red;
       
    }
    
     #pageContent{
       width:100%;
       min-height:100%;
       height:100%;
       background-color:#FFF;
       border:1px solid #FFF;
	  
    }
    
    #footer{
       clear: both; 
       width:100%;
       height:50px;
       background-color:#3d3d3d;
       padding-top:15px;
    }
    
</style>

</head>

<!-- END HEAD -->

<!-- BEGIN BODY -->

<body style="width:100%;">

   <div id="headInfo" class="">
   
   </div>
   
   
   <div id="main">
      <div id="pageSide">
        
      </div>
      
      <div id="pageContent">
          cdvdfvdfvd
      </div>
   </div>



     
 <div id="footer">
    <p style="color:#FFF"><span>c君版权所有.联系方式：991433544</span></p>
 </div>    

	
	
	
	
	
	



	<script src="${app.basePath}/resources/media/js/bootstrap.min.js" type="text/javascript"></script>

	<script>

		jQuery(document).ready(function() {    

		   App.init();
      
		});
		
		     // load the content for the dashboard page.
		   $('.ajaxify').click(function(){
		      var url=$(this).attr("href");
		      //alert(url);
		      $(".page-content").load(url);
		   });
		

	</script>


</body>

</html>
bootstrap后台模板布局

相关文章
