SpringBoot项目中使用Bootstrap 的CSS、JS资源

首先 需要在 application.properties 文件中添加这句

spring.mvc.static-path-pattern=/**

不然是使用不了的

还有一种办法就是 使用bootstrap的cdn地址,不怕麻烦的话,【斜脸笑】,建议还是使用以上方式

示例:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Bootstap demo </title>
 6         <link rel="stylesheet" href="/css/bootstrap.min.css">
 7     </head>
 8     <body>
 9     <nav aria-label="Page navigation">
10         <ul class="pagination">
11             <li>
12                 <a href="#" aria-label="Previous">
13                     <span aria-hidden="true">&laquo;</span>
14                 </a>
15             </li>
16             <li><a href="#">1</a></li>
17             <li><a href="#">2</a></li>
18             <li><a href="#">3</a></li>
19             <li><a href="#">4</a></li>
20             <li><a href="#">5</a></li>
21             <li>
22                 <a href="#" aria-label="Next">
23                     <span aria-hidden="true">&raquo;</span>
24                 </a>
25             </li>
26         </ul>
27     </nav>
28     </body>
29 </html>

效果:

 

转载于:https://www.cnblogs.com/oukele/p/10590695.html

A:要在Spring Boot应用使用Bootstrap,可以按照以下步骤进行操作: 1. 添加Bootstrap依赖:在pom.xml文件添加Bootstrap CSSJS的依赖。 ``` <!-- Bootstrap CSS --> <dependency> <groupId>org.webjars</groupId> <artifactId>bootstrap</artifactId> <version>5.0.0-beta3</version> </dependency> <!-- Bootstrap JS --> <dependency> <groupId>org.webjars</groupId> <artifactId>bootstrap</artifactId> <version>5.0.0-beta3</version> <type>jar</type> <scope>runtime</scope> </dependency> ``` 2. 创建Spring Boot Controller:创建一个Controller类并使用@RequestMapping注释映射到路径。在方法返回一个HTML文件。 ```java @Controller public class MyController { @RequestMapping(value="/",method=RequestMethod.GET) public String index() { return "index"; //此处返回的是HTML文件名 } } ``` 3. 创建HTML页面:在src/main/resources/templates目录下创建一个HTML文件,实现Bootstrap的布局和样式。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Spring Boot with Bootstrap</title> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/5.0.0-beta3/css/bootstrap.min.css" integrity="sha384-..."> <!--Bootstrap CSS的CDN--> </head> <body> <div class="container"> <h1>Hello, Bootstrap!</h1> <div class="alert alert-primary" role="alert"> A simple primary alert—check it out! </div> <div class="alert alert-secondary" role="alert"> A simple secondary alert—check it out! </div> </div> <script src="https://cdn.bootcss.com/bootstrap/5.0.0-beta3/js/bootstrap.min.js" integrity="sha384-..."></script> <!--Bootstrap JS的CDN--> </body> </html> ``` 4. 运行应用:使用Spring Boot插件运行应用程序。 ```bash mvn spring-boot:run ``` 然后打开浏览器并输入地址 http://localhost:8080,即可看到使用Bootstrap样式的页面。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值