如何修改Bootstrap 5.2默认标签页样式为目标样式（采用主色调）

要修改Bootstrap 5.2默认标签页的样式，你可以通过自定义CSS覆盖框架的默认样式，同时利用Bootstrap内置的--bs-primary CSS变量来保持风格统一。以下是调整后的完整代码，实现了更简洁的标签页样式，完全使用primary色调：

<!DOCTYPE html>
<html>
<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <style>
        /* 自定义标签页容器样式 */
        .nav-custom-tabs {
            border-bottom: none;
            gap: 0.5rem;
        }

        /* 通用标签样式 */
        .nav-custom-tabs .nav-link {
            border: none;
            border-radius: 0.375rem;
            padding: 0.75rem 1.25rem;
            color: var(--bs-primary);
            transition: all 0.2s ease;
        }

        /* 激活态标签样式 */
        .nav-custom-tabs .nav-link.active {
            background-color: var(--bs-primary);
            color: white;
        }

        /* 标签hover状态 */
        .nav-custom-tabs .nav-link:not(.active):hover {
            background-color: rgba(var(--bs-primary-rgb), 0.1);
        }

        /* 禁用态标签样式 */
        .nav-custom-tabs .nav-link.disabled {
            color: var(--bs-secondary-color);
            background-color: transparent;
            cursor: not-allowed;
        }
    </style>
</head>
<body>
    <ul class="nav nav-custom-tabs">
        <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Active</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link disabled">Disabled</a>
        </li>
    </ul>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>
</html>

样式说明： #

• 移除了默认标签页底部的边框，改用间距（gap）分隔标签
• 给所有标签添加圆角和合适的内边距，提升视觉舒适度
• 激活态标签直接使用Bootstrap的primary背景色，文字改为白色，符合框架的配色规范
• 非激活标签hover时显示浅primary背景色，保持交互反馈
• 禁用态标签沿用Bootstrap的次级文本颜色，保持统一的禁用风格

你可以根据需求进一步调整border-radius、padding等属性值，实现更贴合你需求的样式。

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