如何仅使用Bootstrap实现切换按钮点击前后的标签切换？

可以通过Bootstrap的btn-check组件结合CSS伪类选择器实现，完全不需要JavaScript或jQuery。核心思路是利用复选框的:checked状态，通过相邻兄弟选择器控制标签内不同文本的显示与隐藏。

修改后的完整代码如下：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container d-flex mb-4 p-4"> 
    <div class="btn-1 m-2"> 
        <input type="checkbox" class="btn-check" id="btn-check" autocomplete="off"> 
        <label class="btn btn-primary" for="btn-check"> 
            <span class="show-text">Show list</span>
            <span class="hide-text">Hide list</span>
        </label> 
    </div>
</div>
<style>
/* 初始状态隐藏Hide list */
.hide-text {
    display: none;
}
/* 复选框选中时，切换文本显示状态 */
#btn-check:checked + label .show-text {
    display: none;
}
#btn-check:checked + label .hide-text {
    display: inline;
}
</style>

原理说明： #

• Bootstrap的btn-check是隐藏的复选框，点击关联的label会触发复选框的选中/取消状态
• 通过CSS的:checked伪类检测复选框状态，结合相邻兄弟选择器+选中对应的label元素
• 利用display属性切换两个文本元素的可见性，实现点击前后的标签内容切换

内容的提问来源于stack exchange，提问作者Majoris