Spring?Boot整合Bootstrap的超詳細(xì)步驟
更新時間：2023年05月08日 11:06:07 作者：wangkay88
之前做前端開發(fā),在使用bootstrap的時候都是去官網(wǎng)下載,然后放到項目中,在頁面引用,下面這篇文章主要給大家介紹了關(guān)于Spring?Boot整合Bootstrap的超詳細(xì)步驟,需要的朋友可以參考下
一、添加 Bootstrap 依賴
在 pom.xml 文件中添加以下依賴：
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>5.1.3</version>
</dependency>這里使用 WebJars 來管理 Bootstrap 的依賴，它可以將前端框架作為一個 jar 包進(jìn)行引用，方便管理和升級。
二、配置靜態(tài)資源
在 Spring Boot 項目中，靜態(tài)資源默認(rèn)放置在 src/main/resources/static 目錄下。因此，我們需要將 Bootstrap 的靜態(tài)資源也放置在該目錄下。
- 在 src/main/resources/static 目錄下新建一個名為webjars的目錄。
- 在 webjars 目錄下新建一個名為 bootstrap 的目錄。
- 將 bootstrap-5.1.3 目錄中的 css、js和 fonts 三個子目錄復(fù)制到src/main/resources/static/webjars/bootstrap 目錄下。
這樣，我們就成功將 Bootstrap 的靜態(tài)資源放置在了 Spring Boot 項目的靜態(tài)資源目錄下。
三、創(chuàng)建一個 Bootstrap 頁面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Spring Boot + Bootstrap</title>
<link rel="stylesheet" href="/webjars/bootstrap/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
</head>
<body>
<div class="container">
<h1>Hello, Spring Boot!</h1>
</div>
<script src="/webjars/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>運行程序
訪問 http://localhost:8080，應(yīng)該能看到一個帶有標(biāo)題的頁面，這就說明我們已經(jīng)成功地整合了 Bootstrap 前端框架。
五、使用 Bootstrap 組件
除了引入 Bootstrap 的樣式和腳本文件外，我們還可以使用 Bootstrap 提供的組件來構(gòu)建頁面。以下是一個使用 Bootstrap 柵格系統(tǒng)和表單組件的示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Spring Boot + Bootstrap</title>
<link rel="stylesheet" href="/webjars/bootstrap/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
</head>
<body>
<div class="container">
<h1>Hello, Spring Boot!</h1>
<div class="row">
<div class="col-md-6">
<form>
<div class="form-group">
<label for="inputName">Name</label>
<input type="text" class="form-control" id="inputName" placeholder="Enter your name">
</div>
<div class="form-group">
<label for="inputEmail">Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Enter your email">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
<script src="/webjars/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>在這個頁面中，我們使用了 Bootstrap 的柵格系統(tǒng)來將表單組件布局為兩列，使用了表單組件來收集用戶的姓名和電子郵件地址，并使用了按鈕組件來提交表單。
高級用法：使用 Thymeleaf 和 Bootstrap
除了手動編寫 HTML 頁面外，我們還可以使用 Thymeleaf 模板引擎來結(jié)合 Bootstrap 來構(gòu)建頁面。下面是一個使用 Thymeleaf 和 Bootstrap 的示例：
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Spring Boot + Bootstrap + Thymeleaf</title>
<link rel="stylesheet" href="/webjars/bootstrap/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
</head>
<body>
<div class="container">
<h1>Hello, Spring Boot!</h1>
<div class="row">
<div class="col-md-6">
<form th:action="@{/submit}" method="post">
<div class="form-group">
<label for="inputName">Name</label>
<input type="text" class="form-control" id="inputName" placeholder="Enter your name" th:field="*{name}">
</div>
<div class="form-group">
<label for="inputEmail">Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Enter your email" th:field="*{email}">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
<script src="/webjars/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>在這個頁面中，我們使用了 Thymeleaf 的表達(dá)式語言來動態(tài)地生成表單組件，使用了 Thymeleaf 的表單綁定來將表單數(shù)據(jù)綁定到模型對象上。使用 Thymeleaf 可以讓我們更加便捷地生成 HTML 頁面，并且提供了強大的表達(dá)式語言來處理頁面邏輯。
使用CDN加速加載Bootstrap資源
在生產(chǎn)環(huán)境中，為了加速頁面加載速度，我們可以將 Bootstrap 的靜態(tài)資源文件放在 CDN 上。這樣可以減少服務(wù)器的壓力，并且可以利用 CDN 的分布式網(wǎng)絡(luò)加速頁面加載。以下是一個使用 CDN 加速加載 Bootstrap 資源的示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Spring Boot + Bootstrap</title>
<link rel="stylesheet" rel="external nofollow" >
</head>
<body>
<div class="container">
<h1>Hello, Spring Boot!</h1>
<div class="row">
<div class="col-md-6">
<form>
<div class="form-group">
<label for="inputName">Name</label>
<input type="text" class="form-control" id="inputName" placeholder="Enter your name">
</div>
<div class="form-group">
<label for="inputEmail">Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Enter your email">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.2/js/bootstrap.min.js"></script>
</body>
</html>使用Thymeleaf Layouts
在使用 Thymeleaf 和 Bootstrap 構(gòu)建頁面時，我們還可以使用 Thymeleaf Layouts 來更加方便地組織頁面結(jié)構(gòu)。Thymeleaf Layouts 是一款 Thymeleaf 模板引擎的擴(kuò)展，提供了布局和片段的功能，可以讓我們更加方便地重用頁面結(jié)構(gòu)。以下是一個使用 Thymeleaf Layouts 的示例：
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta charset="UTF-8">
<title layout:title-pattern="$LAYOUT_TITLE - $CONTENT_TITLE">Spring Boot + Bootstrap</title>
<link rel="stylesheet" th:href="@{/webjars/bootstrap/css/bootstrap.min.css}" rel="external nofollow" >
</head>
<body>
<header layout:fragment="header">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Pricing</a>
</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<section layout:fragment="content"></section>
</div>
<script th:src="@{/webjars/jquery/jquery.min.js}"></script>
<script th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script>
</body>
</html>在這個頁面中，我們定義了一個 layout 命名空間，并使用 layout 命名空間中的 title-pattern 屬性來動態(tài)設(shè)置頁面標(biāo)題。在 header 片段中定義了導(dǎo)航欄，而 content 片段則留給子頁面來填充。
index.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="layout">
<head>
<meta charset="UTF-8">
<title>Home</title>
</head>
<body>
<header layout:fragment="header"></header>
<section layout:fragment="content">
<h1>Hello, Spring Boot!</h1>
<div class="row">
<div class="col-md-6">
<form>
<div class="form-group">
<label for="inputName">Name</label>
<input type="text" class="form-control" id="inputName" placeholder="Enter your name">
<div class="form-group">
<label for="inputEmail">Email address</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Enter your email">
</div>
<div class="form-group">
<label for="inputPassword">Password</label>
<input type="password" class="form-control" id="inputPassword" placeholder="Enter your password">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<div class="col-md-6">
<img src="https://picsum.photos/500/300" alt="Random image" class="img-fluid">
</div>
</div>
</section>
</body>
</html>在子頁面中，我們使用 layout:decorate 屬性來引用 layout.html，并使用 header 和 content 片段來填充導(dǎo)航欄和主要內(nèi)容。在主要內(nèi)容中，我們使用 Bootstrap 的表單和網(wǎng)格系統(tǒng)來創(chuàng)建一個登錄表單和一個隨機圖片。
總結(jié)
到此這篇關(guān)于Spring Boot整合Bootstrap的超詳細(xì)步驟的文章就介紹到這了,更多相關(guān)SpringBoot整合Bootstrap內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
SpringBoot集成yitter-idgenerator(雪花漂移)分布式Id自增的實現(xiàn)
本文主要介紹了SpringBoot集成yitter-idgenerator(雪花漂移)分布式Id自增的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
MyBatis使用標(biāo)簽動態(tài)操作數(shù)據(jù)庫詳解
這篇文章主要介紹了MyBatis中使用標(biāo)簽動態(tài)操作數(shù)據(jù)庫的方法,動態(tài)SQL是指在運行PL/SQL塊時動態(tài)輸入SQL語句,是Mybatis的強大特性之?,能夠完成不同條件下不同的sql拼接,需要的朋友可以參考下2024-05-05
java中常見XML解析器的使用詳解(JAXP,DOM4J,Jsoup,JsoupXPath)
為了處理和操作XML數(shù)據(jù),我們需要使用XML解析器,本文將介紹幾種常用的XML解析器,包括JAXP、DOM4J、Jsoup和JsoupXPath,需要的小伙伴可以參考一下2023-11-11
Swagger 是一個開源的框架,用于設(shè)計、構(gòu)建、文檔化和使用 RESTful 風(fēng)格的 Web 服務(wù),Spring Boot 是一個用于構(gòu)建獨立的、基于生產(chǎn)級別的 Spring 應(yīng)用程序的框架,本文講給大家介紹一下SpringBoot整合swagger的操作指南,需要的朋友可以參考下2023-09-09
Springboot項目Mybatis升級為Mybatis-Plus的詳細(xì)步驟
在許多 Java 項目中,MyBatis 是一個廣泛使用的 ORM 框架,然而,隨著 MyBatis-Plus 的出現(xiàn),許多開發(fā)者開始遷移到這個更加簡潔、高效的工具,它在 MyBatis 的基礎(chǔ)上提供了更多的功能,所以本文將介紹Springboot項目Mybatis升級為Mybatis-Plus的詳細(xì)步驟2025-03-03
在本文中我們給大家整理了關(guān)于Java透明窗體的設(shè)置方法以及需要注意的地方，需要的朋友們學(xué)習(xí)參考下。2019-03-03
這篇文章主要給大家介紹了關(guān)于通過JDK源碼角度分析Long類的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用long類具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-11-11
SpringCloud中Zuul網(wǎng)關(guān)原理及其配置
Spring?Cloud是一個基于Spring?Boot實現(xiàn)的微服務(wù)應(yīng)用開發(fā)工具，其中的Zuul網(wǎng)關(guān)可以實現(xiàn)負(fù)載均衡、路由轉(zhuǎn)發(fā)、鑒權(quán)、限流等功能，本文將從Spring?Cloud中Zuul網(wǎng)關(guān)的原理、使用場景和配置過程詳細(xì)介紹，幫助大家更好地了解和應(yīng)用Zuul網(wǎng)關(guān),需要的朋友可以參考下2023-06-06
這篇文章主要介紹了SpringBoot3-yaml文件配置方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
Java負(fù)載均衡服務(wù)器實現(xiàn)上傳文件同步
這篇文章主要介紹了Java負(fù)載均衡服務(wù)器實現(xiàn)上傳文件同步,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-09-09