我如何通过 CDN 访问 Bootstrap v5 调色板

Question

所以我（一个业余爱好者）在我的自定义主题中只使用 Bootstrap v5 的 CDN，并且还想在我的 Twig 中使用其他颜色（除了主要、次要等主题）他们引用的文件 here，但我还没有找到正确的方法。

<div class="bg--bs-blue"> 和 <div class="font--bs-blue"> 不工作，它说了一些关于使用 root 但不确定那是什么意思？

我真的不想导入整个 Botstrap css 文件，我真的想尽可能继续只使用 CDN - 我在“检查”我的文件时看到了那些颜色和字体源文件，所以我假设它们以某种方式可用？

:root {
    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-primary: #0d6efd;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    --bs-font-sans-serif: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
}

~感谢您的帮助！

Answer 1

这些是CSS variables。您不能直接从 CDN 使用它们，但您可以创建新的类来引用它们...

.text-indigo {
    color: var(--bs-indigo);
}

<div class="text-indigo">This is indigo color text</div>

Demo

我如何通过 CDN 访问 Bootstrap v5 调色板

How would I access the Bootstrap v5 color palette via CDN

wordpress

twig

bootstrap-5