# spring-boot2.0 thymeleaf bootstrap 整合示例
本文主要讲述如何结合在springboot项目中结合thymeleaf和bootstrap。最后会把项目的下载地址放出来。
先看看最终效果：
效果看完之后，有木有心动，接下来我们一起自己动手打造一个。
-------------------
## 新建项目
首先在idea或者eclipse(STS)中新建springboot项目，在选择依赖（Dependences）时引入web和thymeleaf，如果忘记了也没关系，后面给出的pom.xml里面有完整的依赖，直接拷贝到自己项目的pom.xml即可。
## 引入需要的依赖
在pom.xml加入以下依赖：
1 引入bootstrap：
```
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>3.3.5</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>3.1.1</version>
</dependency>
```
2 引入nekohtml解除html严格语法限制：
```
<dependency>
<groupId>net.sourceforge.nekohtml</groupId>
<artifactId>nekohtml</artifactId>
</dependency>
```
如果按以上步骤做完，pom.xml中的所有依赖的内容如下，如果自己新建项目有异常的直接复制以下到自己的pom.xml中：
```
<dependencies>
<!--引入thymeleaf-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<!--解除HTML严格语法-->
<dependency>
<groupId>net.sourceforge.nekohtml</groupId>
<artifactId>nekohtml</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!--bootstrap-->
<!-- 在springboot中集成bootstrap https://blog.csdn.net/sinat_24048051/article/details/77531834-->
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>3.3.5</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>3.1.1</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
</dependencies>
```
## 编辑文件
下面我们将新建需要用到的3个文件，模拟真实开发过程中mvc这块内容。
需要新建的文件有实体类 Article.java，控制器 SiteController.java，页面 index.html。
文件结构如下：
### Article
首先在项目的 src\main\java\com 目录下新建model文件夹用以存放需要的所有实体类，然后在model文件夹中新建实体类Article.java，内容如下：
```
public class Article {
private String title;
private String content;
private String url;
get/set ... //省略
}
```
### SiteController
接着我们需要新建一个controller作为我们测试要访问的controller，这个controller利用thymeleaf将数据渲染到页面。
在项目的 src\main\java\com 路径下新建一个包，包名为 controller 存放所有的控制器；接着在这个包下面新建SiteController.java，内容如下：
```
@Controller
public class SiteController {
@RequestMapping("/")
public String index(Model model) {
ArrayList<Article> list = new ArrayList<>();
list.add(new Article("Async：简洁优雅的异步之道","在异步处理方案中，目前最为简洁优雅的便是async函数（以下简称A函数）。","www.baidu.com"));
list.add(new Article("H5 前端性能测试实践","H5 页面发版灵活，轻量，又具有跨平台的特性，在业务上有很多应用场景。","www.baidu.com"));
list.add(new Article("学习Python的建议","Python是最容易入门的编程语言。","www.baidu.com"));
model.addAttribute("articleList",list);
return "index";
}
}
```
### index.html
这个文件主要用以呈现最终的页面效果，主要内容来源于bootsrap官网给出的demo，在文件夹 bootstrap-3.3.7\docs\examples\jumbotron路径下，同学们可以前往官网[下载](https://github.com/twbs/bootstrap/archive/v3.3.7.zip)，内容如下：
```
<!DOCTYPE html>
<html lang="en">
<head>
<!--https://blog.csdn.net/sinat_24048051/article/details/77531834-->
<script src="webjars/jquery/3.1.1/jquery.min.js"></script>
<script src="webjars/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="webjars/bootstrap/3.3.5/css/bootstrap.min.css" />
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
</form>
</div><!--/.navbar-collapse -->
</div>
</nav>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p>
</div>
</div>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4" th:each="article:${articleList}">
<h2 th:text="${article.title}">Heading</h2>
<p th:text="${article.content}">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" th:href="${'https://'+article.url}" role="button">View details »</a></p>
</div>
</div>
<hr>
<footer>
<p>© 2016 Company, Inc.</p>
</footer>
</div> <!-- /container -->
</body>
</html>
```
其中主要注意的一点是bootstrap样式文件的引入是使用如下形式：
```
<script src="webjars/......"></script>
```
而thymeleaf主要体现在下面这几段：
`
spring-boot2.0 thymeleaf bootstrap 整合示例
3星 · 超过75%的资源 需积分: 1 160 浏览量
2018-09-03
21:03:51
上传
评论
收藏 72KB 7Z 举报 
springboot-thymeleaf-bootstrap-demo.7z （94个子文件） 
springboot-thymeleaf-bootstrap-demo 
springboot-thymeleaf-bootstrap-demo.iml 8KB mvnw.cmd 5KB mvnw 6KB src test java com ApplicationTests.java 323B main resources application.properties 0B templates 
index.html 3KB static java com model Article.java 750B controller SiteController.java 980B Application.java 295B target generated-test-sources test-annotations generated-sources annotations classes application.properties 0B com model Article.class 1010B controller SiteController.class 2KB Application.class 665B templates index.html 3KB test-classes com ApplicationTests.class 584B .idea libraries Maven__org_yaml_snakeyaml_1_19.xml 480B Maven__net_bytebuddy_byte_buddy_agent_1_7_11.xml 563B Maven__org_springframework_boot_spring_boot_test_2_0_4_RELEASE.xml 656B Maven__org_assertj_assertj_core_3_9_1.xml 520B Maven__ch_qos_logback_logback_core_1_2_3.xml 532B Maven__org_slf4j_slf4j_api_1_7_25.xml 498B Maven__junit_junit_4_12.xml 440B Maven__org_springframework_boot_spring_boot_starter_2_0_4_RELEASE.xml 677B Maven__org_apache_tomcat_embed_tomcat_embed_el_8_5_32.xml 596B Maven__org_springframework_spring_aop_5_0_8_RELEASE.xml 594B Maven__org_thymeleaf_thymeleaf_3_0_9_RELEASE.xml 563B Maven__org_attoparser_attoparser_2_0_4_RELEASE.xml 574B Maven__org_apache_logging_log4j_log4j_to_slf4j_2_10_0.xml 593B Maven__com_fasterxml_jackson_core_jackson_databind_2_9_6.xml 608B Maven__com_jayway_jsonpath_json_path_2_4_0.xml 531B Maven__org_webjars_jquery_3_1_1.xml 478B Maven__javax_annotation_javax_annotation_api_1_3_2.xml 596B Maven__org_springframework_boot_spring_boot_starter_tomcat_2_0_4_RELEASE.xml 726B Maven__org_springframework_spring_web_5_0_8_RELEASE.xml 594B Maven__org_springframework_spring_beans_5_0_8_RELEASE.xml 608B Maven__ch_qos_logback_logback_classic_1_2_3.xml 553B Maven__org_mockito_mockito_core_2_15_0.xml 527B Maven__org_springframework_spring_core_5_0_8_RELEASE.xml 601B Maven__org_apache_tomcat_embed_tomcat_embed_websocket_8_5_32.xml 645B Maven__org_springframework_boot_spring_boot_starter_thymeleaf_2_0_4_RELEASE.xml 747B Maven__org_springframework_spring_jcl_5_0_8_RELEASE.xml 594B Maven__net_bytebuddy_byte_buddy_1_7_11.xml 521B Maven__net_sourceforge_nekohtml_nekohtml_1_9_22.xml 551B Maven__org_springframework_spring_test_5_0_8_RELEASE.xml 601B Maven__org_thymeleaf_extras_thymeleaf_extras_java8time_3_0_1_RELEASE.xml 710B Maven__com_vaadin_external_google_android_json_0_0_20131108_vaadin1.xml 685B Maven__org_hamcrest_hamcrest_core_1_3.xml 517B Maven__net_minidev_accessors_smart_1_2.xml 527B Maven__org_webjars_bootstrap_3_3_5.xml 499B Maven__org_ow2_asm_asm_5_0_4.xml 457B Maven__com_fasterxml_jackson_core_jackson_annotations_2_9_0.xml 629B Maven__org_hamcrest_hamcrest_library_1_3.xml 538B Maven__org_slf4j_jul_to_slf4j_1_7_25.xml 519B Maven__org_springframework_boot_spring_boot_test_autoconfigure_2_0_4_RELEASE.xml 754B Maven__org_thymeleaf_thymeleaf_spring5_3_0_9_RELEASE.xml 619B Maven__com_fasterxml_jackson_core_jackson_core_2_9_6.xml 580B Maven__org_springframework_boot_spring_boot_autoconfigure_2_0_4_RELEASE.xml 719B Maven__org_apache_logging_log4j_log4j_api_2_10_0.xml 558B Maven__org_jboss_logging_jboss_logging_3_3_2_Final.xml 593B Maven__com_fasterxml_classmate_1_3_4.xml 507B Maven__org_springframework_boot_spring_boot_starter_test_2_0_4_RELEASE.xml 712B Maven__org_objenesis_objenesis_2_6.xml 493B Maven__org_skyscreamer_jsonassert_1_5_0.xml 522B Maven__org_apache_tomcat_embed_tomcat_embed_core_8_5_32.xml 610B Maven__com_fasterxml_jackson_datatype_jackson_datatype_jdk8_2_9_6.xml 659B Maven__org_unbescape_unbescape_1_1_5_RELEASE.xml 563B Maven__com_fasterxml_jackson_datatype_jackson_datatype_jsr310_2_9_6.xml 673B Maven__org_xmlunit_xmlunit_core_2_5_1.xml 520B Maven__javax_validation_validation_api_2_0_1_Final.xml 596B Maven__com_fasterxml_jackson_module_jackson_module_parameter_names_2_9_6.xml 714B Maven__org_springframework_spring_webmvc_5_0_8_RELEASE.xml 615B Maven__xml_apis_xml_apis_1_4_01.xml 487B Maven__org_springframework_boot_spring_boot_2_0_4_RELEASE.xml 621B Maven__org_springframework_spring_context_5_0_8_RELEASE.xml 622B Maven__org_springframework_boot_spring_boot_starter_json_2_0_4_RELEASE.xml 712B Maven__xerces_xercesImpl_2_11_0.xml 493B Maven__org_springframework_boot_spring_boot_starter_web_2_0_4_RELEASE.xml 705B Maven__net_minidev_json_smart_2_3.xml 492B Maven__org_springframework_spring_expression_5_0_8_RELEASE.xml 643B Maven__org_hibernate_validator_hibernate_validator_6_0_11_Final.xml 666B Maven__org_springframework_boot_spring_boot_starter_logging_2_0_4_RELEASE.xml 733B misc.xml 439B compiler.xml 682B uiDesigner.xml 9KB workspace.xml 23KB encodings.xml 172B inspectionProfiles Project_Default.xml 170KB modules.xml 310B sbt.xml 159B .mvn wrapper 
maven-wrapper.jar 46KB maven-wrapper.properties 110B pom.xml 2KB .gitignore 268B readme.md 9KB资源评论
luozhd2018-10-19不错，值得学习
小宇哥好2018-09-19别下载 没有意义 基本的数据库都没有
