11.14 引入前端组件

我们使用基于Bootstrap的前端UI库Flat UI。首先去Flat UI的首页：<http://www.bootcss.com/p/flat-ui/> 下载zip包，加压后，放到我们的工程里，放置的目录是：src/main/resources/static 。如下图所示：

我们在list.ftl头部引入静态资源文件：

1. <head>
2. <meta charset="utf-8">
3. <title>Blog</title>
4. <meta name="description"
5. content="Blog, using Flat UI Kit Free is a Twitter Bootstrap Framework design and Theme, this responsive framework includes a PSD and HTML version."/>

7. <meta name="viewport" content="width=1000, initial-scale=1.0, maximum-scale=1.0">

9. <!-- Loading Bootstrap -->
10. <link href="/flatui/dist/css/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

12. <!-- Loading Flat UI -->
13. <link href="/flatui/dist/css/flat-ui.css" rel="stylesheet">
14. <link href="/flatui/docs/assets/css/demo.css" rel="stylesheet">

16. <link rel="shortcut icon" href="/flatui/img/favicon.ico">

18. <script src="/flatui/dist/js/vendor/jquery.min.js"></script>
19. <script src="/flatui/dist/js/flat-ui.js"></script>
20. <script src="/flatui/dist/js/vendor/html5shiv.js"></script>
21. <script src="/flatui/dist/js/vendor/respond.min.js"></script>

23. <link rel="stylesheet" href="/blog/blog.css">
24. <script src="/blog/blog.js"></script>
25. </head>

其中，我们的这个SpringBoot应用中默认的静态资源的跟路径是src/main/resources/static，然后我们的HTML代码中引用的路径是在此根目录下的相对路径。

提示：更多的关于Spring Boot静态资源处理内容可以参考文章： <http://www.jianshu.com/p/d127c4f78bb8>

然后，我们再把我们的文章列表布局优化一下：

1. <div class="container">
2. <h1>我的博客</h1>
3. <table class="table table-responsive table-bordered">
4. <thead>
5. <th>序号</th>
6. <th>标题</th>
7. <th>作者</th>
8. <th>发表时间</th>
9. <th>操作</th>
10. </thead>
11. <tbody>
12. <#-- 使用FTL指令 -->
13. <#list articles as article>
14. <tr>
15. <td>${article.id}</td>
16. <td>${article.title}</td>
17. <td>${article.author}</td>
18. <td>${article.gmtModified}</td>
19. <td><a href="#" target="_blank">编辑</a></td>
20. </tr>
21. </#list>
22. </tbody>
23. </table>
24. </div>

重新build工程，在此访问文章列表页，我们将看到一个比刚才漂亮多了的页面：

考虑到头部的静态资源文件基本都是公共的代码，我们单独抽取到一个head.ftl文件中, 然后在list.ftl中直接这样引用：

1. <#include "head.ftl">