### （6）集成JQuery、Bootstrap
**集成jquery**
[jquery 下载地址](https://jquery.com/download/)
index.jsp 头部增加获取项目根目录（获取当前上下文）
```html
<%String path = request.getContextPath();%>
```
然后在body中增加以下js
```javascript
<script type="text/javascript" src="<%=path %>/static/lib/jquery/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(function() {
alert(1111);
});
</script>
```
没有报错Uncaught ReferenceError: $ is not defined，则表示集成成功
**集成Bootstrap**
[Bootstrap 下载地址]([https://v3.bootcss.com/](https://v3.bootcss.com/))
增加css样式文件
```css
<link rel="stylesheet" href="<%=path %>/static/lib/bootstrap-3.3.7-dist/css/bootstrap.min.css">
```
增加js文件
```javascript
<script type="text/javascript" src="<%=path %>/static/lib/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
```
**完整文件示例**
```html
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%String path = request.getContextPath();%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>首页</title>
<link rel="stylesheet" href="<%=path %>/static/lib/bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
<button>这是原生的按钮</button>
<button type="button" class="btn btn-success">Bootstrap Success</button>
<script type="text/javascript" src="<%=path %>/static/lib/jquery/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="<%=path %>/static/lib/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function() {
alert(1111);
});
</script>
</body>
</html>
```