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>
<link
href="${APP_PATH }/static/bootstrap-3.3.7-dist/css/bootstrap.min.css"
rel="stylesheet">
<script
src="${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显示效果