thymelef 布局 fragment

 需求：布局页面， 把首页分成四个页面： 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>

使用：

 

posted @ 2016-10-20 15:28  猪哥哥厉害  阅读(386)  评论(0)  编辑  收藏  举报