Bootstrap 5能否不使用CSS、仅通过HTML修改激活标签链接颜色？

这个需求完全可以基于现有HTML结构实现，不需要复杂的额外逻辑，有两种适配当前Bootstrap环境的低成本落地方式：

• 方案一：直接使用Bootstrap内置的文本颜色工具类，无需写自定义代码
  直接给对应标签添加内置类即可完成初始状态的颜色设置：
  • 未激活的导航链接添加text-muted类，对应标准灰色文本
  • 初始激活的导航链接添加text-dark类，对应深黑色文本
    调整后的完整代码如下：

  <!-- navigation -->
  <nav>
   <div class="nav nav-sm bg-faded rounded" role="tablist" style="font-size:15px;">
    <a class="nav-item nav-link active text-dark" data-toggle="tab" href="#nav-one" role="tab" aria-controls="nav-one" aria-selected="true">link 1</a>
    <a class="nav-item nav-link text-muted" data-toggle="tab" href="#nav-two" role="tab" aria-controls="nav-two" aria-selected="false">link 2</a>
   </div>
  </nav>
  <!-- end navigation -->
  

• 方案二：实现标签切换时的自动颜色联动
  方案一仅适配固定初始显示的场景，如果需要点击切换标签时，自动同步激活/未激活状态的文本颜色，不需要写JS逻辑，仅需在页面内添加几行内嵌样式（无需外链CSS）即可：

  /* 覆盖导航链接的默认主题蓝色，统一设置为灰色 */
  .nav-link {
    color: #6c757d;
  }
  /* 匹配激活状态的导航链接，设置为黑色 */
  .nav-link.active {
    color: #212529;
  }
  

  这段样式直接写在页面的<style>标签内，放在Bootstrap引入代码的后方即可生效，不会破坏原有标签页的交互逻辑。

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