### （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>
```