如何使用bootstrap 5在没有jQuery的情况下编写JavaScript代码？

在没有jQuery的情况下，使用Bootstrap 5编写JavaScript代码可以通过以下步骤实现：

引入Bootstrap 5的JavaScript文件：在HTML文件中，通过<script>标签引入Bootstrap 5的JavaScript文件。可以从Bootstrap官方网站下载最新版本的Bootstrap，并将其引入到项目中。例如：

<script src="path/to/bootstrap.min.js"></script>

使用原生JavaScript操作DOM：由于没有jQuery，我们需要使用原生JavaScript来操作DOM元素。可以使用document.querySelector()或document.querySelectorAll()等方法获取DOM元素，并使用JavaScript的事件监听器来绑定事件。例如：

document.querySelector('#myButton').addEventListener('click', function() {
  // 在这里编写点击按钮后的操作
});

使用Bootstrap提供的JavaScript组件：Bootstrap 5提供了一些JavaScript组件，如模态框、折叠菜单、标签页等。可以通过在DOM元素上添加特定的data-*属性来启用这些组件，并使用JavaScript来控制它们的行为。例如：

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  打开模态框
</button>

<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">模态框标题</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        模态框内容
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">保存</button>
      </div>
    </div>
  </div>
</div>

以上代码展示了一个使用Bootstrap 5的模态框组件。通过添加data-bs-toggle="modal"和data-bs-target="#myModal"属性，可以实现点击按钮后打开模态框的效果。

总结：在没有jQuery的情况下，使用Bootstrap 5编写JavaScript代码需要引入Bootstrap的JavaScript文件，并使用原生JavaScript操作DOM元素和事件监听器。此外，可以使用Bootstrap提供的JavaScript组件来实现一些常见的交互效果。更多关于Bootstrap 5的详细信息和使用方法，可以参考腾讯云的Bootstrap产品介绍页面：腾讯云Bootstrap产品介绍。