Bootstrap和jQuery是目前Web開發中最常用的兩個前端工具，Bootstrap是一個基于HTML、CSS和JavaScript的前端框架，可以快速構建漂亮的響應式頁面；而jQuery則是一個JavaScript庫，簡化了DOM操作、事件處理、動畫效果等常用操作，提高了開發效率。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap加jQuery的示例</title>
<!-- 引入Bootstrap的CSS文件 -->
<link rel="stylesheet" >
</head>
<body>
<div class="container">
<h1>Bootstrap加jQuery的示例</h1>
<div class="alert alert-success" id="myAlert">
<strong>Well Done!</strong> You successfully read this important alert message.
</div>
<p>
<button class="btn btn-primary" id="myButton">點我彈出提示框</button>
</p>
</div>
<!-- 引入jQuery的JS文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- 引入Bootstrap的JS文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$("#myButton").click(function() {
$("#myAlert").fadeToggle(2000);
});
});
</script>
</body>
</html>在上述代碼中，我們先引入了Bootstrap的CSS文件和jQuery的JS文件，然后在文檔加載完成后，通過jQuery來綁定按鈕的點擊事件，在點擊按鈕時彈出提示框。
以上是在HTML文件中引入Bootstrap和jQuery的示例代碼，當然還可以通過NPM包管理工具的命令來安裝，在Vue、React等前端框架中也有相應的支持，可以更方便地使用Bootstrap和jQuery。
上一篇手機網頁怎么調css
下一篇手機網頁模板css