在网页设计中，div元素是构成网页布局的基本元素。Bootstrap 是一个流行的前端框架，它提供了一系列的类和组件，使得网页开发变得更加简单快捷。在这篇文章中，我们将探讨如何使用 Bootstrap 来轻松设置 div 元素的聚焦与互动。
聚焦（Focus）
在网页中，聚焦是指将键盘或鼠标焦点放在一个可交互的元素上。Bootstrap 提供了几个类来帮助设置 div 元素的聚焦效果。
1. 使用 focus 类
Bootstrap 提供了一个 focus 类，可以用来给 div 元素添加聚焦效果。这个类通常用于按钮或输入框，但也可以用于 div 元素。
<div class="focus">这是一个聚焦的 div 元素</div>
当用户将鼠标悬停在 div 上时，它将获得聚焦效果。
2. 使用 JavaScript
如果你想要更复杂的聚焦效果，可以使用 JavaScript 来实现。以下是一个简单的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<title>Focus Example</title>
<script>
document.addEventListener('DOMContentLoaded', function () {
var div = document.querySelector('.focus-div');
div.addEventListener('mouseenter', function () {
this.classList.add('focus');
});
div.addEventListener('mouseleave', function () {
this.classList.remove('focus');
});
});
</script>
</head>
<body>
<div class="focus-div">这是一个可聚焦的 div 元素</div>
</body>
</html>
在这个例子中，当鼠标悬停在 div 上时，它会添加 focus 类，从而改变其样式。
互动（Interaction）
互动是指用户与网页元素之间的交互。Bootstrap 提供了一些组件和类来帮助设置 div 元素的互动效果。
1. 使用模态框（Modal）
模态框是一种常见的交互元素，可以用来显示信息或表单。以下是一个使用 Bootstrap 模态框的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<title>Modal Example</title>
</head>
<body>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
打开模态框
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="myModalLabel">模态框标题</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
这是模态框的内容。
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
在这个例子中，当用户点击按钮时，会打开一个模态框。
2. 使用折叠面板（Collapse）
折叠面板可以用来显示或隐藏内容。以下是一个使用 Bootstrap 折叠面板的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<title>Collapse Example</title>
</head>
<body>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
点击我
</button>
<div class="collapse" id="collapseExample">
<div class="card card-body">
这是折叠面板的内容。
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
在这个例子中，当用户点击按钮时，折叠面板会展开。
通过使用 Bootstrap，你可以轻松地设置 div 元素的聚焦与互动效果，让你的网页更加生动有趣。