Блог

Главная - Вопросы по программированию - Как мне получить доступ к цветовой палитре начальной загрузки v5 через CDN

Как мне получить доступ к цветовой палитре начальной загрузки v5 через CDN

#wordpress #twig #bootstrap-5

Вопрос:

Поэтому я (любитель) использую CDN только для начальной загрузки v5 в своей пользовательской теме, А также хотел бы, Чтобы в моих файлах Twig были другие цвета (кроме тем primary, secondary и т. Д.), На которые они ссылаются здесь, Но я не выяснил, как это сделать правильно.

<div class="bg--bs-blue"> и <div class="font--bs-blue"> не работают, это что-то говорит об использовании root, но я не был уверен, что это значит?

Я действительно не хочу импортировать весь css — файл Botstrap, я действительно хотел бы продолжать использовать только 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));
}

~ Спасибо за любую помощь!

Ответ №1:

Это переменные CSS. Вы не можете использовать их непосредственно из CDN, но вы можете создавать новые классы, которые ссылаются на них…

 .text-indigo {
    color: var(--bs-indigo);
}
 
 <div class="text-indigo">This is indigo color text</div>

ДЕМОНСТРАЦИЯ

Комментарии:

1. Спасибо за вашу помощь … не могли бы вы также рассказать мне, как использовать индиго-100, индиго-200 и т. Д. ?

2. Они доступны только через SASS getbootstrap.com/docs/5.0/customize/color/#all-colors

3. Есть ли css-трюк для ссылки на весь список, например, с помощью подстановочного знака, чтобы мне не пришлось перепечатывать для каждого цвета .text-* { color: var(--bs-indigo); }

4. Извините, нет, это действительно то, как/почему используется SASS. Пожалуйста, отметьте принятый ответ, так как он отвечает на ваш первоначальный вопрос.

5. Кто-нибудь, пожалуйста, объясните, почему это не сработает для меня: .text--blue, .bkgd--blue { color: var(--bs-blue); } Текст—синий работает нормально, но bkgd—синий не работает?

Метки: