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的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。