Utiliser Twitter Bootstrap dans Spring Boot
View more Tutorials:
Avant de démarrer la lecon, nous prenons quelques minutes pour comprendre Bootstrap:
Bootstrap est un HTML, CSS & JavaScript Framework permettant de concevoir et de développer des applications "Responsive Web Mobile". Bootstrap comprend HTML templates, CSS templates & Javascript et des bases ainsi que des élements disponibles telles que: typography, forms, buttons, tables, navigation, modals, image carousels et autres. Bootstrap a des Javascript Plugin qui aide à concevoir votre Web Reponsive plus facilement et plus rapidement.

Bootstrap est développé par Mark Otto et Jacob Thornton à Twitter. Il est publié comme un code de ressource ouverte publié en aout 2011 sur GitHub.
See more:
Dans cet article, je vais vous montrer comment créer une application Spring Boot à l'aide de Bootstrap. Et parce que Bootstrap est un Html, Css, Javascript Framework donc vous utilisez n'importe laquelle technologie pour la couche View (JSP, Thymeleaf, Freemarker,...).
Les contenus mis à jour dans ce lecon:
- Créer une application Spring Boot.
- Déclarer des bibliothèques nécessaires pourque vous puissiez utiliser Bootstrap.
- Créer une page simple utilisant des composants de l'interface d'utilisateur (UI Component) fournits par Bootstrap.


Bootstrap a été enveloppé dans un petit et joli fichier Jar. Afin de l'utiliser, vous devez simplement le déclarer dans le fichier pom.xml, donc vous êtes prêt à travailler avec Bootstrap Framework.
** Bootstrap **
<!-- https://mvnrepository.com/artifact/org.webjars/jquery --> <dependency> <groupId>org.webjars</groupId> <artifactId>jquery</artifactId> <version>3.3.1-1</version> </dependency> <!-- https://mvnrepository.com/artifact/org.webjars/popper.js --> <dependency> <groupId>org.webjars</groupId> <artifactId>popper.js</artifactId> <version>1.14.1</version> </dependency> <!-- https://mvnrepository.com/artifact/org.webjars/bootstrap --> <dependency> <groupId>org.webjars</groupId> <artifactId>bootstrap</artifactId> <version>4.1.1</version> </dependency>
Le contenu complet du fichier pom.xml:
pom.xml
<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>org.o7planning</groupId> <artifactId>SpringBootBootstrap</artifactId> <version>0.0.1-SNAPSHOT</version> <packaging>jar</packaging> <name>SpringBootBootstrap</name> <description>Spring Boot + Bootstrap</description> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.0.0.RELEASE</version> <relativePath /> <!-- lookup parent from repository --> </parent> <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding> <java.version>1.8</java.version> </properties> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> <!-- https://mvnrepository.com/artifact/org.webjars/jquery --> <dependency> <groupId>org.webjars</groupId> <artifactId>jquery</artifactId> <version>3.3.1-1</version> </dependency> <!-- https://mvnrepository.com/artifact/org.webjars/popper.js --> <dependency> <groupId>org.webjars</groupId> <artifactId>popper.js</artifactId> <version>1.14.1</version> </dependency> <!-- https://mvnrepository.com/artifact/org.webjars/bootstrap --> <dependency> <groupId>org.webjars</groupId> <artifactId>bootstrap</artifactId> <version>4.1.1</version> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> </dependencies> <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </plugin> </plugins> </build> </project>
Les ressources de données de Bootstrap sont empaquées dans le fichier Jar. Vous devez les exposer (expose), pour qu'elles puissent être accédées par des répertoires, par exemple :
- http://somedomain/SomeContextPath/jquery/jquery.min.css
- http://somedomain/SomeContextPath/popper/popper.min.js
- http://somedomain/SomeContextPath/bootstrap/css/bootstrap.min.css
- http://somedomain/SomeContextPath/bootstrap/js/bootstrap.min.js

WebMvcConfig.java
package org.o7planning.sbbootstrap.config; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; @Configuration public class WebMvcConfig implements WebMvcConfigurer { @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { // // Access Bootstrap static resource: // // // http://somedomain/SomeContextPath/jquery/jquery.min.css // registry.addResourceHandler("/jquery/**") // .addResourceLocations("classpath:/META-INF/resources/webjars/jquery/3.3.1-1/"); // // http://somedomain/SomeContextPath/popper/popper.min.js // registry.addResourceHandler("/popper/**") // .addResourceLocations("classpath:/META-INF/resources/webjars/popper.js/1.14.1/umd/"); // http://somedomain/SomeContextPath/bootstrap/css/bootstrap.min.css // http://somedomain/SomeContextPath/bootstrap/js/bootstrap.min.js // registry.addResourceHandler("/bootstrap/**") // .addResourceLocations("classpath:/META-INF/resources/webjars/bootstrap/4.1.1/"); } }
HelloWorldController.java
package org.o7planning.sbbootstrap.controller; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; @Controller public class HelloWorldController { @RequestMapping("/") public String helloWorld(Model model) { return "index"; } }

index.html
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"/> <title>Twitter Bootstrap Example</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <!-- See configuration in WebMvConfig.java --> <link th:href="@{/bootstrap/css/bootstrap.min.css}" rel="stylesheet" media="screen"/> <script th:src="@{/jquery/jquery.min.js}"></script> <script th:src="@{/popper/popper.min.js}"></script> <script th:src="@{/bootstrap/js/bootstrap.min.js}"></script> </head> <body> <h2>Hello Twitter Bootstrap</h2> <div class="btn-group"> <button type="button" class="btn btn-success">This is a success button</button> <button type="button" class="btn btn-warning">This is a warning button</button> <button type="button" class="btn btn-danger">This is a danger button</button> </div> </body> </html>
Et voici est l'image du site web avec des composants d'interface d'utilisateur (UI Component) de Bootstrap:
