位置:首页 » 文章/教程分享 » AceAdmin前端框架布局介绍(三)

空布局

见blank.html,他是默认布局
<html>
  <head>
     <!-- title, meta tags, list of stylesheets, etc ... -->
  </head>
  <body class="no-skin">
    <div class="navbar" id="navbar">
     <!-- navbar goes here -->
    </div>
    <div class="main-container" id="main-container">
     <div class="sidebar responsive" id="sidebar">
      <!-- sidebar goes here -->
     </div>
     <div class="main-content">
      <div class="page-content">
        <div class="row">
          <div class="col-xs-12">
           <!-- page content goes here -->
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.page-content -->
     </div><!-- /.main-content -->
	 
   </div><!-- /.main-container -->
   <!-- list of script files -->
  </body>
 </html>
不过我现在下载的版本空文件有点变化,包含了许多不必要的元素,刚开始看起来有点困难,
我把他的css 和js 先贴下,这个很有用
<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
		<title>Blank Page - Ace Admin</title>
 
		<meta name="description" content="" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
 
		<!-- bootstrap & fontawesome -->
		<link rel="stylesheet" href="assets/css/bootstrap.min.css" />
		<link rel="stylesheet" href="assets/font-awesome/4.5.0/css/font-awesome.min.css" />
 
		<!-- page specific plugin styles -->
 
		<!-- text fonts -->
		<link rel="stylesheet" href="assets/css/fonts.googleapis.com.css" />
		<!-- ace styles -->
		<link rel="stylesheet" href="assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
 
		<!--[if lte IE 9]>
			<link rel="stylesheet" href="assets/css/ace-part2.min.css" class="ace-main-stylesheet" />
		<![endif]-->
		<link rel="stylesheet" href="assets/css/ace-skins.min.css" />
		<link rel="stylesheet" href="assets/css/ace-rtl.min.css" />
 
		<!--[if lte IE 9]>
		  <link rel="stylesheet" href="assets/css/ace-ie.min.css" />
		<![endif]-->
 
		<!-- inline styles related to this page -->
 
		<!-- ace settings handler -->
		<script src="assets/js/ace-extra.min.js"></script>
 
		<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->
 
		<!--[if lte IE 8]>
		<script src="assets/js/html5shiv.min.js"></script>
		<script src="assets/js/respond.min.js"></script>
		<![endif]-->
	</head>

登录布局

仅用于登录页面的登录布局如下所示
 </head>
 <body class="login-layout">
 
  <div class="main-container">
   <div class="main-content">
    <div class="row">
     <div class="col-sm-10 col-sm-offset-1">
     <!-- page content goes here -->
     </div><!-- /.col -->
    </div><!-- /.row -->
   </div><!-- /.main-content -->
  </div><!-- /.main-container -->
 
 </body>
</html>