Bootstrap 3.3.7 和 jQuery

Bootstrap 3.3.7 是一種流行的前端框架，它使用 HTML、CSS 和 JavaScript 來創建美觀、響應式的站點和 Web 應用程序。jQuery 是一個功能強大的 JavaScript 庫，它簡化了文檔遍歷、事件處理、動畫和 AJAX 操作的代碼。

Bootstrap 3.3.7 需要 jQuery 來實現某些功能，如下拉菜單、標簽頁、模態框等。因此，在使用 Bootstrap 3.3.7 時，需要在項目中引入 jQuery 庫。

<!-- 引入 Bootstrap 樣式庫 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<!-- 引入 jQuery 庫 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- 引入 Bootstrap JavaScript 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

在上面的代碼中，我們首先引入了 Bootstrap 的樣式庫，然后引入了 jQuery 庫。最后，引入了 Bootstrap 的 JavaScript 文件。

一旦 jQuery 庫被引入到項目中，我們就可以在代碼中使用 jQuery 的功能了。例如，當點擊一個按鈕時彈出一個模態框：

<button data-toggle="modal" data-target="#myModal">打開模態框</button>
<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">標題</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>這里是模態框的內容。</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">關閉</button>
<button type="button" class="btn btn-primary">保存更改</button>
</div>
</div>
</div>
</div>

在上面的代碼中，我們使用了 Bootstrap 提供的模態框組件，并使用了 jQuery 的 data() 方法來實現模態框的彈出。data-toggle 和 data-target 屬性告訴瀏覽器這個按鈕將觸發一個模態框，而#myModal表示要彈出的模態框的 ID。

以上就是 Bootstrap 3.3.7 和 jQuery 的簡介和用法。它們一起使用可以方便地創建出響應式、美觀的網站和 Web 應用程序。