SSM项目中怎样引入并使用Bootstrap

Bootstrap

官网

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

下载

进入官网,点击用于生产环境的Bootstrap下的下载Bootstrap

SSM项目中怎样引入并使用Bootstrap_第1张图片

点击下载并解压

SSM项目中怎样引入并使用Bootstrap_第2张图片

解压之后

SSM项目中怎样引入并使用Bootstrap_第3张图片

SSM中使用Bootstrap

SSM项目目录下的webapp目录下新建static目录,将下载后的bootstrap的文件复制到static目录下。

再在webapp下新建js目录,将jquery引入进来。

SSM项目中怎样引入并使用Bootstrap_第4张图片

如果没有jquery文件或者bootstrap下载不成功,github下载

https://github.com/badaoliumang/StaticResourceCollection

新建index.jsp

在index.jsp中引入jquery与bootstrap

<%
 pageContext.setAttribute("APP_PATH", request.getContextPath());
%>



使用bootstrap

要使用什么组件就参照官网文档添加什么组件。

SSM项目中怎样引入并使用Bootstrap_第5张图片

需要修改什么样式就参照官网全局CSS样式

SSM项目中怎样引入并使用Bootstrap_第6张图片

举例

在index.jsp中加入巨幕组件

只需要在jsp中加入

 

Hello, world!

 

...

 

Learn more

启动服务器,并查看index.jsp显示效果

SSM项目中怎样引入并使用Bootstrap_第7张图片

 

 

你可能感兴趣的:(SSM)