jQuery Bootstrap是一種非常流行的前端框架，它由jQuery和Bootstrap兩個著名的庫組合而成。它的優勢如下：

// 引入jQuery和Bootstrap庫
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" >
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

1. 響應式設計

/* 柵格代碼段 */
<div class="row">
<div class="col-sm-4">1</div>
<div class="col-sm-4">2</div>
<div class="col-sm-4">3</div>
</div>

采用Bootstraps的柵格系統設計，在不同的屏幕寬度下展示不同的樣式效果。

2. 大量可用組件

/* 模態框代碼段 */
<!-- 模態框按鈕 --><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
彈出模態框
</button>
<!-- 模態框內容 --><div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- 模態框頭部 --><div class="modal-header">
<h4 class="modal-title">模態框標題</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- 模態框主體 --><div class="modal-body">
模態框內容
</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>

jQuery Bootstrap內置了許多可用組件，例如按鈕、表格、導航欄、圖標、彈出框、分頁等，這些組件都極大地提高了開發效率。

3. 輕松自定義樣式

// 自定義按鈕樣式
<style>
.btn-primary {
background-color: #4CAF50;
border-color: #4CAF50;
}
</style>

與其他框架不同，jQuery Bootstrap具有可自定義的組件樣式。除了自帶的CSS，我們還可以自定義更具個性化的樣式。