需求：布局页面， 把首页分成四个页面： header footer ,content ,aside ，从githua 下载的原型， 所有内容是在一起的，这里拆分， 重用， 减少代码量
做法： 新建页面
页面内容：
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <link href="http://cdn.jsdelivr.net/webjars/bootstrap/3.3.6/css/bootstrap.min.css" th:href="@{/webjars/bootstrap/3.3.6/css/bootstrap.min.css}" rel="stylesheet" media="screen" /> <meta charset="utf-8"/> </head> <body> <div th:fragment="header"> <header class="main-header"> <a href="index2.html" class="logo"> <span class="logo-mini"><b>44</b>rrr</span> <span class="logo-lg"><b>4444</b></span> </a> <nav class="navbar navbar-static-top" role="navigation"> <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button"> <span class="sr-only">Toggle navigation</span> </a> <div class="navbar-custom-menu"> <ul class="nav navbar-nav"> <li class="dropdown user user-menu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <img src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image"/> <span class="hidden-xs">xxx</span> </a> <ul class="dropdown-menu"> <li class="user-header"> <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image"/> <p> xxxx- 系统管理员 <small>Member since Nov. 2016</small> </p> </li> <li class="user-footer"> <div class="pull-left"> <a href="#" class="btn btn-default btn-flat">Profile</a> </div> <div class="pull-right"> <a th:href="@{/logout}" class="btn btn-default btn-flat">Sign out</a> </div> </li> </ul> </li> </ul> </div> </nav> </header> </div> </body> </html>
使用：
