Verwenden von Twitter Bootstrap im Spring Boot

View more categories:

1- Das Zweck des Artikel

Vor dem Lernen sollen Sie zuerst  Bootstrap kennenlernen :

Bootstrap ist ein HTML, CSS & JavaScript Framework erlaubt bei der Entwurf und Entwicklung der Applikation "Responsive Web Mobile". Bootstrap fasst HTML templates, CSS templates & Javascript und die grundlegenden vorhandenen Dinge wie: typography, forms, buttons, tables, navigation, modals, image carousels und die sonstigen Dingen um. Im Bootstrap gibt es Javascript Plugin, damit Ihr Design von Web Reponsive mehr einfach und leichter ist.

Bootstrap wird durch  Mark Otto und  Jacob Thornton in  Twitter entwickelt. Es wird wie eine Open-Source-Code am August 2011 auf  GitHub veröffentlicht.
Mehr sehen
Im Artikel leite ich Sie bei der Erstellung einer Applikation  Spring Boot mit der Verwendung von  Bootstrap. Und weil  Bootstrap ein  Html, Css, Javascript Framework ist, können Sie deshalb irgendeine Technologie für   View Layer  ( JSP, Thymeleaf, Freemarker,...).
Die Inhalt werden im Artikel gemeint:
  1. Eine Applikation von Spring Boot erstellen.
  2. Die notwendigen Bibliotheken deklarieren damit Sie Bootstrap verwenden können.
  3. Eine einfache Seite mit der Verwendung von UI Component durch Bootstrap erstellen.

2- Das Projekt Spring Boot erstellen

3- pom.xml konfigurieren

Bootstrap wurde in einer kleinen und schönen File  Jar eingepackt. Um es zu benutzen, können Sie es in  pom.xml deklarieren und deshalb können Sie bereit mit Bootstrap Framework arbeiten.
** 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>
Die vollen Inhalt von der File   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>

4- Resource Handler

Die Datenquelle vom  Bootstrap wird in die File Jar eingepackt.  Sie sollen sie aussetzen (expose) damit sie durch den Pfad zugriffen werden. Zum Beispiel:
  • 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/");
 
    }
 
}

5- Controller

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";
    }

}

6- Views

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>
Und hier ist die Image von Webseit und UI Component vom   Bootstrap:

View more categories: