引入BootStrap前端框架
1、BootStrap官网下载地址 https://v3.bootcss.com/
2、下载好后解压缩，在webapp下新建目录static静态资源文件夹，将解压缩的内容存放在static静态资源文件夹下即可
3、在webapp下新建index.jsp页面
QQ图片20190426170758.png
4、在index.jsp引入样式
<!-- 引入样式 -->
<link href="static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
5、在static静态资源文件夹下新建js文件夹，将下载好的jquery.js存放进去，并将其引入index.jsp
QQ图片20190426171612.png
<!-- 引入jquery -->
<script type="text/javascript" src="static/js/jquery-1.12.4.min.js"></script>
测试
<button class="btn btn-success">按钮</button>
效果如图所示：
QQ图片20190426174010.png
具体样式可参考BootStrap官网自行选择
网友评论