切换前的Bootstrap 5文本-复选框(没有额外的插件/插件)

切换前的Bootstrap 5文本-复选框是指在Bootstrap 5版本中，在没有使用额外插件或插件的情况下，实现文本和复选框之间的切换效果。

具体实现方法如下：

首先，在HTML文件中引入Bootstrap 5的CSS和JavaScript文件，确保页面可以正常加载Bootstrap框架。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

在HTML文件中创建一个包含文本和复选框的容器元素，例如一个<div>元素。

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="switch">
  <label class="form-check-label" for="switch">切换</label>
</div>

使用Bootstrap的CSS类来设置文本和复选框的样式。在上述代码中，form-check类用于创建一个复选框容器，form-switch类用于创建一个切换样式的复选框，form-check-input类用于设置复选框的样式，form-check-label类用于设置文本的样式。
使用JavaScript代码来实现文本和复选框之间的切换效果。可以通过监听复选框的状态改变事件，来动态修改文本的内容或样式。

document.getElementById("switch").addEventListener("change", function() {
  var label = document.querySelector(".form-check-label");
  if (this.checked) {
    label.textContent = "已开启";
    label.classList.add("text-success");
    label.classList.remove("text-danger");
  } else {
    label.textContent = "已关闭";
    label.classList.add("text-danger");
    label.classList.remove("text-success");
  }
});

在上述代码中，通过addEventListener方法监听复选框的change事件，当复选框状态改变时，根据复选框的选中状态来修改文本的内容和样式。如果复选框被选中，则将文本内容修改为"已开启"，并添加text-success类来设置文本颜色为绿色；如果复选框未被选中，则将文本内容修改为"已关闭"，并添加text-danger类来设置文本颜色为红色。

这样，当用户点击复选框时，文本内容和样式会根据复选框的状态进行切换。

推荐的腾讯云相关产品和产品介绍链接地址：