آموزش متغیرهای CSS در بوت استرپ

0 دیدگاه

در این فصل، همه متغیرهای CSS که بوت استرپ در اختیار توسعه‌دهندگان قرار می‌دهد بررسی می‌شود؛ متغیرهایی که امکان طراحی و توسعه سریع‌تر و قابل تنظیم‌تر رابط کاربری را فراهم می‌کنند.

فایل CSS نهایی بوت استرپ شامل مجموعه بزرگی از متغیرهای سفارشی CSS است که بدون نیاز به بازکامپایل کردن Sass، اجازه می‌دهند ظاهر صفحه را به‌سرعت تغییر دهید. این متغیرها شامل مقادیر پرکاربردی مانند رنگ‌های قالب، نقاط شکست (breakpoints) برای طراحی واکنش گرا، و نوع فونت‌های اصلی هستند. شما می‌توانید این مقادیر را به‌راحتی در مرورگر، هنگام نمونه‌سازی اولیه یا کار با ابزارهای توسعه مشاهده و تنظیم کنید.

تمام متغیرهای سفارشی بوت استرپ با پیشوند bs- شروع می‌شوند تا از تداخل با کدهای CSS دیگر کتابخانه‌ها یا پروژه شما جلوگیری شود.

متغیرهای ریشه (Root variables)

این متغیرها در هر بخشی از پروژه که CSS بوت استرپ بارگذاری شده باشد، قابل استفاده‌اند. محل تعریف آن‌ها فایل _root.scss است و در فایل‌های نهایی داخل پوشه dist نیز قرار دارند.

متغیرهای پیش‌فرض در بوت استرپ

متغیرهایی هستند که در تمام حالات رنگی (روشن یا تیره) در دسترس‌اند و پایه طراحی کلی رابط کاربری محسوب می‌شوند.

:root,
    [data-bs-theme=light] {
    --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-black: #000;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    --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-primary-rgb: 13, 110, 253;
    --bs-secondary-rgb: 108, 117, 125;
    --bs-success-rgb: 25, 135, 84;
    --bs-info-rgb: 13, 202, 240;
    --bs-warning-rgb: 255, 193, 7;
    --bs-danger-rgb: 220, 53, 69;
    --bs-light-rgb: 248, 249, 250;
    --bs-dark-rgb: 33, 37, 41;
    --bs-primary-text-emphasis: #052c65;
    --bs-secondary-text-emphasis: #2b2f32;
    --bs-success-text-emphasis: #0a3622;
    --bs-info-text-emphasis: #055160;
    --bs-warning-text-emphasis: #664d03;
    --bs-danger-text-emphasis: #58151c;
    --bs-light-text-emphasis: #495057;
    --bs-dark-text-emphasis: #495057;
    --bs-primary-bg-subtle: #cfe2ff;
    --bs-secondary-bg-subtle: #e2e3e5;
    --bs-success-bg-subtle: #d1e7dd;
    --bs-info-bg-subtle: #cff4fc;
    --bs-warning-bg-subtle: #fff3cd;
    --bs-danger-bg-subtle: #f8d7da;
    --bs-light-bg-subtle: #fcfcfd;
    --bs-dark-bg-subtle: #ced4da;
    --bs-primary-border-subtle: #9ec5fe;
    --bs-secondary-border-subtle: #c4c8cb;
    --bs-success-border-subtle: #a3cfbb;
    --bs-info-border-subtle: #9eeaf9;
    --bs-warning-border-subtle: #ffe69c;
    --bs-danger-border-subtle: #f1aeb5;
    --bs-light-border-subtle: #e9ecef;
    --bs-dark-border-subtle: #adb5bd;
    --bs-white-rgb: 255, 255, 255;
    --bs-black-rgb: 0, 0, 0;
    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, 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));
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
    --bs-body-color: #212529;
    --bs-body-color-rgb: 33, 37, 41;
    --bs-body-bg: #fff;
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-emphasis-color: #000;
    --bs-emphasis-color-rgb: 0, 0, 0;
    --bs-secondary-color: rgba(33, 37, 41, 0.75);
    --bs-secondary-color-rgb: 33, 37, 41;
    --bs-secondary-bg: #e9ecef;
    --bs-secondary-bg-rgb: 233, 236, 239;
    --bs-tertiary-color: rgba(33, 37, 41, 0.5);
    --bs-tertiary-color-rgb: 33, 37, 41;
    --bs-tertiary-bg: #f8f9fa;
    --bs-tertiary-bg-rgb: 248, 249, 250;
    --bs-heading-color: inherit;
    --bs-link-color: #0d6efd;
    --bs-link-color-rgb: 13, 110, 253;
    --bs-link-decoration: underline;
    --bs-link-hover-color: #0a58ca;
    --bs-link-hover-color-rgb: 10, 88, 202;
    --bs-code-color: #d63384;
    --bs-highlight-bg: #fff3cd;
    --bs-border-width: 1px;
    --bs-border-style: solid;
    --bs-border-color: #dee2e6;
    --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
    --bs-border-radius: 0.375rem;
    --bs-border-radius-sm: 0.25rem;
    --bs-border-radius-lg: 0.5rem;
    --bs-border-radius-xl: 1rem;
    --bs-border-radius-xxl: 2rem;
    --bs-border-radius-2xl: var(--bs-border-radius-xxl);
    --bs-border-radius-pill: 50rem;
    --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
    --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
    --bs-focus-ring-width: 0.25rem;
    --bs-focus-ring-opacity: 0.25;
    --bs-focus-ring-color: rgba(13, 110, 253, 0.25);
    --bs-form-valid-color: #198754;
    --bs-form-valid-border-color: #198754;
    --bs-form-invalid-color: #dc3545;
    --bs-form-invalid-border-color: #dc3545;
    }

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

:root,

[data-bs-theme=light] {

--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-black: #000;

--bs-white: #fff;

--bs-gray: #6c757d;

--bs-gray-dark: #343a40;

--bs-gray-100: #f8f9fa;

--bs-gray-200: #e9ecef;

--bs-gray-300: #dee2e6;

--bs-gray-400: #ced4da;

--bs-gray-500: #adb5bd;

--bs-gray-600: #6c757d;

--bs-gray-700: #495057;

--bs-gray-800: #343a40;

--bs-gray-900: #212529;

--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-primary-rgb: 13, 110, 253;

--bs-secondary-rgb: 108, 117, 125;

--bs-success-rgb: 25, 135, 84;

--bs-info-rgb: 13, 202, 240;

--bs-warning-rgb: 255, 193, 7;

--bs-danger-rgb: 220, 53, 69;

--bs-light-rgb: 248, 249, 250;

--bs-dark-rgb: 33, 37, 41;

--bs-primary-text-emphasis: #052c65;

--bs-secondary-text-emphasis: #2b2f32;

--bs-success-text-emphasis: #0a3622;

--bs-info-text-emphasis: #055160;

--bs-warning-text-emphasis: #664d03;

--bs-danger-text-emphasis: #58151c;

--bs-light-text-emphasis: #495057;

--bs-dark-text-emphasis: #495057;

--bs-primary-bg-subtle: #cfe2ff;

--bs-secondary-bg-subtle: #e2e3e5;

--bs-success-bg-subtle: #d1e7dd;

--bs-info-bg-subtle: #cff4fc;

--bs-warning-bg-subtle: #fff3cd;

--bs-danger-bg-subtle: #f8d7da;

--bs-light-bg-subtle: #fcfcfd;

--bs-dark-bg-subtle: #ced4da;

--bs-primary-border-subtle: #9ec5fe;

--bs-secondary-border-subtle: #c4c8cb;

--bs-success-border-subtle: #a3cfbb;

--bs-info-border-subtle: #9eeaf9;

--bs-warning-border-subtle: #ffe69c;

--bs-danger-border-subtle: #f1aeb5;

--bs-light-border-subtle: #e9ecef;

--bs-dark-border-subtle: #adb5bd;

--bs-white-rgb: 255, 255, 255;

--bs-black-rgb: 0, 0, 0;

--bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, 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));

--bs-body-font-family: var(--bs-font-sans-serif);

--bs-body-font-size: 1rem;

--bs-body-font-weight: 400;

--bs-body-line-height: 1.5;

--bs-body-color: #212529;

--bs-body-color-rgb: 33, 37, 41;

--bs-body-bg: #fff;

--bs-body-bg-rgb: 255, 255, 255;

--bs-emphasis-color: #000;

--bs-emphasis-color-rgb: 0, 0, 0;

--bs-secondary-color: rgba(33, 37, 41, 0.75);

--bs-secondary-color-rgb: 33, 37, 41;

--bs-secondary-bg: #e9ecef;

--bs-secondary-bg-rgb: 233, 236, 239;

--bs-tertiary-color: rgba(33, 37, 41, 0.5);

--bs-tertiary-color-rgb: 33, 37, 41;

--bs-tertiary-bg: #f8f9fa;

--bs-tertiary-bg-rgb: 248, 249, 250;

--bs-heading-color: inherit;

--bs-link-color: #0d6efd;

--bs-link-color-rgb: 13, 110, 253;

--bs-link-decoration: underline;

--bs-link-hover-color: #0a58ca;

--bs-link-hover-color-rgb: 10, 88, 202;

--bs-code-color: #d63384;

--bs-highlight-bg: #fff3cd;

--bs-border-width: 1px;

--bs-border-style: solid;

--bs-border-color: #dee2e6;

--bs-border-color-translucent: rgba(0, 0, 0, 0.175);

--bs-border-radius: 0.375rem;

--bs-border-radius-sm: 0.25rem;

--bs-border-radius-lg: 0.5rem;

--bs-border-radius-xl: 1rem;

--bs-border-radius-xxl: 2rem;

--bs-border-radius-2xl: var(--bs-border-radius-xxl);

--bs-border-radius-pill: 50rem;

--bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);

--bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);

--bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);

--bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);

--bs-focus-ring-width: 0.25rem;

--bs-focus-ring-opacity: 0.25;

--bs-focus-ring-color: rgba(13, 110, 253, 0.25);

--bs-form-valid-color: #198754;

--bs-form-valid-border-color: #198754;

--bs-form-invalid-color: #dc3545;

--bs-form-invalid-border-color: #dc3545;

}

متغیرهای حالت تیره (Dark mode variables)

این دسته از متغیرها تنها در حالت تیره پیش‌فرض بوت استرپ فعال هستند و برای طراحی تم‌های تیره استفاده می‌شوند.

[data-bs-theme=dark] {
        color-scheme: dark;
        --bs-body-color: #adb5bd;
        --bs-body-color-rgb: 173, 181, 189;
        --bs-body-bg: #212529;
        --bs-body-bg-rgb: 33, 37, 41;
        --bs-emphasis-color: #fff;
        --bs-emphasis-color-rgb: 255, 255, 255;
        --bs-secondary-color: rgba(173, 181, 189, 0.75);
        --bs-secondary-color-rgb: 173, 181, 189;
        --bs-secondary-bg: #343a40;
        --bs-secondary-bg-rgb: 52, 58, 64;
        --bs-tertiary-color: rgba(173, 181, 189, 0.5);
        --bs-tertiary-color-rgb: 173, 181, 189;
        --bs-tertiary-bg: #2b3035;
        --bs-tertiary-bg-rgb: 43, 48, 53;
        --bs-primary-text-emphasis: #6ea8fe;
        --bs-secondary-text-emphasis: #a7acb1;
        --bs-success-text-emphasis: #75b798;
        --bs-info-text-emphasis: #6edff6;
        --bs-warning-text-emphasis: #ffda6a;
        --bs-danger-text-emphasis: #ea868f;
        --bs-light-text-emphasis: #f8f9fa;
        --bs-dark-text-emphasis: #dee2e6;
        --bs-primary-bg-subtle: #031633;
        --bs-secondary-bg-subtle: #161719;
        --bs-success-bg-subtle: #051b11;
        --bs-info-bg-subtle: #032830;
        --bs-warning-bg-subtle: #332701;
        --bs-danger-bg-subtle: #2c0b0e;
        --bs-light-bg-subtle: #343a40;
        --bs-dark-bg-subtle: #1a1d20;
        --bs-primary-border-subtle: #084298;
        --bs-secondary-border-subtle: #41464b;
        --bs-success-border-subtle: #0f5132;
        --bs-info-border-subtle: #087990;
        --bs-warning-border-subtle: #997404;
        --bs-danger-border-subtle: #842029;
        --bs-light-border-subtle: #495057;
        --bs-dark-border-subtle: #343a40;
        --bs-heading-color: inherit;
        --bs-link-color: #6ea8fe;
        --bs-link-hover-color: #8bb9fe;
        --bs-link-color-rgb: 110, 168, 254;
        --bs-link-hover-color-rgb: 139, 185, 254;
        --bs-code-color: #e685b5;
        --bs-border-color: #495057;
        --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
        --bs-form-valid-color: #75b798;
        --bs-form-valid-border-color: #75b798;
        --bs-form-invalid-color: #ea868f;
        --bs-form-invalid-border-color: #ea868f;
      }

[data-bs-theme=dark] {

color-scheme: dark;

--bs-body-color: #adb5bd;

--bs-body-color-rgb: 173, 181, 189;

--bs-body-bg: #212529;

--bs-body-bg-rgb: 33, 37, 41;

--bs-emphasis-color: #fff;

--bs-emphasis-color-rgb: 255, 255, 255;

--bs-secondary-color: rgba(173, 181, 189, 0.75);

--bs-secondary-color-rgb: 173, 181, 189;

--bs-secondary-bg: #343a40;

--bs-secondary-bg-rgb: 52, 58, 64;

--bs-tertiary-color: rgba(173, 181, 189, 0.5);

--bs-tertiary-color-rgb: 173, 181, 189;

--bs-tertiary-bg: #2b3035;

--bs-tertiary-bg-rgb: 43, 48, 53;

--bs-primary-text-emphasis: #6ea8fe;

--bs-secondary-text-emphasis: #a7acb1;

--bs-success-text-emphasis: #75b798;

--bs-info-text-emphasis: #6edff6;

--bs-warning-text-emphasis: #ffda6a;

--bs-danger-text-emphasis: #ea868f;

--bs-light-text-emphasis: #f8f9fa;

--bs-dark-text-emphasis: #dee2e6;

--bs-primary-bg-subtle: #031633;

--bs-secondary-bg-subtle: #161719;

--bs-success-bg-subtle: #051b11;

--bs-info-bg-subtle: #032830;

--bs-warning-bg-subtle: #332701;

--bs-danger-bg-subtle: #2c0b0e;

--bs-light-bg-subtle: #343a40;

--bs-dark-bg-subtle: #1a1d20;

--bs-primary-border-subtle: #084298;

--bs-secondary-border-subtle: #41464b;

--bs-success-border-subtle: #0f5132;

--bs-info-border-subtle: #087990;

--bs-warning-border-subtle: #997404;

--bs-danger-border-subtle: #842029;

--bs-light-border-subtle: #495057;

--bs-dark-border-subtle: #343a40;

--bs-heading-color: inherit;

--bs-link-color: #6ea8fe;

--bs-link-hover-color: #8bb9fe;

--bs-link-color-rgb: 110, 168, 254;

--bs-link-hover-color-rgb: 139, 185, 254;

--bs-code-color: #e685b5;

--bs-border-color: #495057;

--bs-border-color-translucent: rgba(255, 255, 255, 0.15);

--bs-form-valid-color: #75b798;

--bs-form-valid-border-color: #75b798;

--bs-form-invalid-color: #ea868f;

--bs-form-invalid-border-color: #ea868f;

}

متغیرهای عناصر (Component variables)

در بوت استرپ ۵ استفاده از متغیرهای سفارشی به‌صورت محلی در عناصر مختلف (مثل دکمه‌ها، کارت‌ها یا نوار ناوبری) بیشتر شده است. این کار باعث کاهش حجم فایل CSS نهایی، جلوگیری از به‌ارث رسیدن ناخواسته استایل‌ها (مثلاً در جدول‌های تو در تو)، و در عین حال فراهم شدن امکان تنظیم و گسترش ظاهر عناصر بعد از کامپایل Sass می‌شود.

متغیرهای CSS به‌طور خاص در عناصری مانند نوار ناوبری (navbar)، سیستم شبکه‌ای (grid) و موارد دیگر به کار می‌روند. وقتی این متغیرها در سطح پایه‌ای یک عنصر تعریف شوند، تنظیم آن‌ها در آینده بسیار ساده‌تر خواهد بود.

پیشوند در بوت استرپ

برای جلوگیری از تداخل با کدهای CSS پروژه شما، اکثر متغیرهای بوت استرپ دارای پیشوند مشخصی هستند. همه متغیرهای CSS باید با -- آغاز شوند و پیشوند نیز به دنبال آن بیاید.

پیشوند پیش‌فرض bs- است، اما در صورت نیاز می‌توان آن را از طریق متغیر Sass با نام $prefix تغییر داد.

مثال

متغیرهای CSS انعطاف‌پذیری شبیه به متغیرهای Sass دارند، با این تفاوت که نیازی به کامپایل ندارند و مستقیماً در مرورگر اجرا می‌شوند. مثلاً از این متغیرها می‌توان برای تعریف نوع فونت پایه صفحه یا استایل لینک‌ها استفاده کرد.

 body {
        font: 1rem/1.5 var(--bs-font-monospace);
    }
    a {
        color: var(--bs-red);
    }

body {

font: 1rem/1.5 var(--bs-font-monospace);

}

a {

color: var(--bs-red);

}

متغیرهای حالت فوکوس (Focus Variables)

با ترکیب Sass و CSS، بوت استرپ این امکان را فراهم کرده که بتوانید استایل فوکوس مخصوص (برای حالت انتخاب‌شدن عناصر مثل فیلدهای ورودی) را برای عناصر خاص تنظیم کنید. البته هنوز امکان تغییر کلی تمام استایل‌های فوکوس در سطح کل پروژه وجود ندارد.

مقادیر پیش‌فرض این استایل‌ها در Sass تعریف می‌شوند و می‌توان آن‌ها را پیش از مرحله کامپایل تغییر داد.

scss/_variables.scss
    $focus-ring-width:      .25rem;
    $focus-ring-opacity:    .25;
    $focus-ring-color:      rgba($primary, $focus-ring-opacity);
    $focus-ring-blur:       0;
    $focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color;

scss/_variables.scss

$focus-ring-width: .25rem;

$focus-ring-opacity: .25;

$focus-ring-color: rgba($primary, $focus-ring-opacity);

$focus-ring-blur: 0;

$focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color;

سپس این مقادیر در سطح ریشه (:root) به متغیرهای CSS تبدیل می‌شوند که می‌توانید آن‌ها را به‌صورت زنده (real-time) تنظیم کنید. این متغیرها گزینه‌هایی برای تغییر مکان فوکوس در محور x و y نیز دارند که مقدار پیش‌فرض آن‌ها صفر است.

scss/_root.scss
    --#{$prefix}focus-ring-width: #{$focus-ring-width};
    --#{$prefix}focus-ring-opacity: #{$focus-ring-opacity};
    --#{$prefix}focus-ring-color: #{$focus-ring-color};

scss/_root.scss

--#{$prefix}focus-ring-width: #{$focus-ring-width};

--#{$prefix}focus-ring-opacity: #{$focus-ring-opacity};

--#{$prefix}focus-ring-color: #{$focus-ring-color};

نقاط شکست شبکه‌ای (Grid Breakpoints)

نقاط شکست مانند md، lg، xl و xxl به‌صورت متغیرهای CSS در دسترس‌اند (به جز xs). البته توجه داشته باشید که متغیرهای CSS را نمی‌توان مستقیماً در دستورهای media query استفاده کرد.

5/5 - (1 امتیاز)

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.

نظرات

دوره آموزش طراحی فروشگاه اینترنتی بدون کد نویسی در 8 ساعت

انتشار: ۲۲ اردیبهشت ۱۴۰۴

آموزش متغیرهای CSS در بوت استرپ

متغیرهای ریشه (Root variables)

متغیرهای پیش‌فرض در بوت استرپ

متغیرهای حالت تیره (Dark mode variables)

متغیرهای عناصر (Component variables)

پیشوند در بوت استرپ

متغیرهای حالت فوکوس (Focus Variables)

نقاط شکست شبکه‌ای (Grid Breakpoints)

دسته بندی موضوعات

آخرین محصولات فروشگاه

نظرات

بازخوردهای خود را برای ما ارسال کنید

لغو پاسخ

مطالب مرتبط