前端框架--bootstrap

前端框架–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相关的插件，但由于内容较多，小编决定分多个帖子进行讲解。内容有误之处，烦请联系小编进行更改或删除，谢谢！