Bootstrap

官網

https://v3.bootcss.com/getting-started/#download

下載

進入官網，點擊用于生產環境的Bootstrap下的下載Bootstrap

點擊下載并解壓

解壓之后

SSM中使用Bootstrap

SSM項目目錄下的webapp目錄下新建static目錄，將下載后的bootstrap的文件復制到static目錄下。

再在webapp下新建js目錄，將jquery引入進來。

如果沒有jquery文件或者bootstrap下載不成功，github下載

https://github.com/badaoliumang/StaticResourceCollection

新建index.jsp

在index.jsp中引入jquery與bootstrap

<%pageContext.setAttribute("APP_PATH", request.getContextPath()); %> <!-- web路徑： 不以/開始的相對路徑，找資源，以當前資源的路徑為基準，經常容易出問題。 以/開始的相對路徑，找資源，以服務器的路徑為標準(http://localhost:3306)；需要加上項目名http://localhost:3306/ssm-crud--> <script type="text/javascript"src="${APP_PATH }/static/js/jquery-1.12.4.min.js"> </script> <linkhref="${APP_PATH }/static/bootstrap-3.3.7-dist/css/bootstrap.min.css"rel="stylesheet"> <scriptsrc="${APP_PATH }/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"> </script>

使用bootstrap

要使用什么組件就參照官網文檔添加什么組件。

需要修改什么樣式就參照官網全局CSS樣式

舉例

在index.jsp中加入巨幕組件

只需要在jsp中加入

<div class="jumbotron"><h1>Hello, world!</h1><p>...</p><p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p> </div>

啟動服務器，并查看index.jsp顯示效果

?

?

總結

以上是生活随笔為你收集整理的SSM项目中怎样引入并使用Bootstrap的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。