bootstrap实现鼠标划过图片出现弹出框

要实现鼠标划过图片出现弹出框，可以使用Bootstrap的Modal组件。以下是实现的步骤：

引入Bootstrap的CSS和JS文件，确保它们在页面中被正确加载。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

创建一个包含图片的HTML元素，并为其添加一个唯一的ID。

<img src="image.jpg" id="myImage" alt="Image">

创建一个Modal弹出框的HTML结构，并为其添加一个唯一的ID。

<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- Modal内容 -->
    </div>
  </div>
</div>

使用JavaScript代码来实现鼠标划过图片时弹出Modal弹出框的效果。

$(document).ready(function(){
  $("#myImage").hover(function(){
    $("#myModal").modal('show');
  }, function(){
    $("#myModal").modal('hide');
  });
});

在上述代码中，我们使用了jQuery的hover()方法来监听鼠标的划过事件。当鼠标划过图片时，我们通过modal('show')方法来显示Modal弹出框；当鼠标离开图片时，我们通过modal('hide')方法来隐藏Modal弹出框。

注意：在实际使用中，你需要根据自己的实际情况来修改图片的路径、Modal弹出框的内容以及其他样式等