--- title: 'Spring Boot webjars' disqus: hackmd --- ###### tags: `SpringBoot` Spring Boot webjars === [TOC] ## 適用場景 想要在spring boot 裡面使用bootstrap 還有jQuery ## 先備條件 pom.xml ```xml= <dependency> <groupId>org.webjars</groupId> <artifactId>bootstrap</artifactId> <version>3.3.7-1</version> </dependency> <dependency> <groupId>org.webjars</groupId> <artifactId>jquery</artifactId> <version>3.1.1</version> </dependency> <dependency> <groupId>org.webjars</groupId> <artifactId>webjars-locator-core</artifactId> </dependency> ``` ## 檔案結構目錄 ## 程式碼部分 index2.html ```htmlmixed= <html> <head> <script src="/webjars/jquery/3.1.1/jquery.min.js"></script> <script src="/webjars/bootstrap/3.3.7-1/js/bootstrap.min.js"></script> <title>WebJars Demo</title> <link rel="stylesheet" href="/webjars/bootstrap/3.3.7-1/css/bootstrap.min.css" /> </head> <body> <div class="container"><br/> <div class="alert alert-success"> <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a> <strong>Success!</strong> It is working as we expected. </div> </div> </body> </html> ``` index3.html ```htmlembedded= <html> <head> <script src="/webjars/jquery/jquery.min.js"></script> <script src="/webjars/bootstrap/js/bootstrap.min.js"></script> <title>WebJars Demo</title> <link rel="stylesheet" href="/webjars/bootstrap/css/bootstrap.min.css" /> </head> <body> <div class="container"><br/> <div class="alert alert-success"> <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a> <strong>Success!</strong> It is working as we expected. </div> </div> </body> </html> ``` > 在使用webjars-locator-core後 index3.html不再需要指定版本號碼，這對我們來說非常方便! ![](https://i.imgur.com/PkXAbrB.png) ![](https://i.imgur.com/LCnHYbZ.png) ## 參考連結