You辉编程-BootStrap+jQuery快速上手
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Bootstrap+jQuery 示例</title>
<!-- 引入Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-4">
<button id="toggle-btn" class="btn btn-primary">Toggle Text</button>
<div id="text-container">
Hello, Bootstrap & jQuery!
</div>
</div>
<!-- 引入jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<!-- 引入Bootstrap的JavaScript组件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<script>
$(document).ready(function() {
$('#toggle-btn').click(function() {
$('#text-container').toggle('slow');
});
});
</script>
</body>
</html>这个示例展示了如何使用Bootstrap和jQuery来创建一个简单的网页，其中包含一个按钮和一个可以通过点击按钮来切换（显示/隐藏）的文本区域。当按钮被点击时，相关的文本容器会以"slow"动画效果切换显示状态。这个示例简单明了，适合初学者快速了解如何将这两个库结合使用。
评论已关闭