Использование Twitter Bootstrap в Spring Boot

View more categories:

1- Цель статьи

Перед тем как мы начнем изучение, нам нужно выделить несколько минут для того, чтобы понять про  Bootstrap:

Bootstrap является HTML, CSS & JavaScript Framework позволяющий делать дизайн и разрабатывать приложения "Responsive Web Mobile". Bootstrap включает HTML templates, CSS templates & Javascript и готовые базовые вещи как: typography, forms, buttons, tables, navigation, modals, image carousels и другие. В Bootstrap содержатся Javascript Plugin. Помогают делать дизайн вашего Web Reponsive легче и быстрее.

Bootstrap разработан с помощью  Mark Otto и Jacob Thornton в  Twitter. Он издан как открытый код ресурса в августе 2011 года на  GitHub.
Смотрите так же :
  • TODO Link!
В данной статье я покажу вам, как создать приложение Spring Boot, используя  Bootstrap. И потому что  Bootstrap является  Html, Css, Javascript Framework вы используете любую технологию для уровня  View  ( JSP, Thymeleaf, Freemarker,...).
Содержания, которые будут упомянуты в данной статье:
  1. Создать приложение Spring Boot.
  2. Объявить необходимые библиотеки, чтобы вы могли использовать Bootstrap.
  3. Создать простую страницу исползуя компоненты интерфейса (UI Component) предоставленные Bootstrap.

2- Создать проект Spring Boot

3- Объявить pom.xml

Bootstrap упакован в маленький красивый файл  Jar. Чтобы использовать его, вам нужно только объявить его в  pom.xml, и таким образом вы готовы работать с  Bootstrap Framework.
** Bootstrap **
<!-- https://mvnrepository.com/artifact/org.webjars/bootstrap -->
<dependency>
   <groupId>org.webjars</groupId>
   <artifactId>bootstrap</artifactId>
   <version>3.3.7-1</version>
</dependency>
Полное содержание файла  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/bootstrap -->
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>bootstrap</artifactId>
            <version>3.3.7-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

Ресурсы данных  Bootstrap упакованы в файле  Jar. Вам нужно показать (expose) их, чтобы они могли быть доступны путям. Например:
  • http://somedomain/SomeContextPath/webjars/bootstrap/3.3.7-1/css/bootstrap.min.css
  • http://somedomain/SomeContextPath/webjars/bootstrap/3.3.7-1/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/webjars/bootstrap/3.3.7-1/css/bootstrap.min.css
        //
        registry.addResourceHandler("/webjars/**") //
                .addResourceLocations("classpath:/META-INF/resources/webjars/");
    }

}

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- View

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"/>
      
      <!-- Bootstrap. @see version in pom.xml -->
      <link th:href="@{/webjars/bootstrap/3.3.7-1/css/bootstrap.min.css}"
                rel="stylesheet" media="screen"/>
                
      <script src="http://code.jquery.com/jquery.js"></script>
      <script th:src="@{/webjars/bootstrap/3.3.7-1/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>
И это изображение веб страницы с компонентами интерфейса (UI Component) у  Bootstrap:

View more categories: