前端框架–bootstrap
一:bootstrap是什么?
bootstrap是一个集成了css和html的前端框架。能够快速开发web应用程序和网站。
二:bootstrap的使用流程
1.将bootstrap的js和css相关文件夹导入到webapp目录下,在spring-mvc.xml中放开静态资源
<!-- 放开静态资源 -->
<!--location 配置静态资源的路径 mapping /** 代表/bootstrap/路径下所有的请求都放开-->
<!-- 为什么配置两颗星?
第一个*:bootstrap文件夹下的所有文件
第二个* :bootstrap文件夹下的所有文件和文件夹
-->
<mvc:resources location="/bootstrap/" mapping="/bootstrap/**"></mvc:resources>
<mvc:resources location="/js/" mapping="/js/**"></mvc:resources>
<mvc:resources location="/images/" mapping="/images/**"></mvc:resources>
2.在前端HTML中使用link及script标签将js和css引入到jsp页面。(路径需要自定义更改)
<!-- 引入bootstrap css文件 -->
<link href="<%=request.getContextPath()%>/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="<%=request.getContextPath()%>/bootstrap/css/bootstrap.dropdown.hack.css" rel="stylesheet" />
<!-- 引入bootstrap js文件 -->
<script src="<%=request.getContextPath()%>/bootstrap/js/jquery-3.3.1.min.js"></script>
<script src="<%=request.getContextPath()%>/bootstrap/js/bootstrap.min.js"></script>
<!-- 引入bootbox相关js -->
<script src="<%=request.getContextPath()%>/js/bootbox/bootbox.locales.min.js" type="text/javascript"></script>
<script src="<%=request.getContextPath()%>/js/bootbox/bootbox.min.js" type="text/javascript"></script>
写在最后
通过上述操作就能简单快捷的使用绚丽的jsp页面元素。本来在本帖要继续介绍与bootstrap相关的插件,但由于内容较多,小编决定分多个帖子进行讲解。内容有误之处,烦请联系小编进行更改或删除,谢谢!