ප්‍රධාන අන්තර්ගතය වෙත යන්න ලේඛන සංචාලනය වෙත යන්න
in English

CSS විචල්යයන්

වේගවත් සහ ඉදිරි දැක්මක් සහිත සැලසුම් සහ සංවර්ධනය සඳහා Bootstrap හි CSS අභිරුචි ගුණාංග භාවිතා කරන්න.

Sass නැවත සම්පාදනය කිරීමේ අවශ්‍යතාවයකින් තොරව තත්‍ය කාලීන අභිරුචිකරණය සඳහා Bootstrap එහි සම්පාදනය කරන ලද CSS හි බොහෝ CSS අභිරුචි ගුණාංග (විචල්‍ය) ඇතුළත් වේ. ඔබේ බ්‍රවුසරයේ පරීක්ෂක, කේත වැලිපිල්ලක් හෝ සාමාන්‍ය මූලාකෘතියක් තුළ වැඩ කරන විට අපගේ තේමා වර්ණ, බිඳුම් ලක්ෂ්‍ය සහ ප්‍රාථමික අකුරු අට්ටි වැනි බහුලව භාවිතා වන අගයන් වෙත මේවා පහසු ප්‍රවේශයක් සපයයි.

bs-තෙවන පාර්ශ්ව CSS සමඟ ගැටුම් වළක්වා ගැනීම සඳහා අපගේ සියලු අභිරුචි ගුණාංග උපසර්ග කර ඇත.

මූල විචල්යයන්

:rootBootstrap හි CSS පූරණය වන ඕනෑම තැනකට ප්‍රවේශ විය හැකි අප ඇතුලත් කරන විචල්‍යයන් මෙන්න (අවශ්‍ය බව සලකන්න ). ඒවා අපගේ _root.scssගොනුවේ පිහිටා ඇති අතර අපගේ සම්පාදනය කළ dist ගොනුවල ඇතුළත් වේ.

: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-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-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;
  --bs-body-color-rgb: 33, 37, 41;
  --bs-body-bg-rgb: 255, 255, 255;
  --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));
  --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-bg: #fff;
}

සංරචක විචල්යයන්

අපි විවිධ සංරචක සඳහා දේශීය විචල්‍යයන් ලෙස අභිරුචි ගුණාංග භාවිතා කිරීමට ද පටන් ගනිමු. මේ ආකාරයෙන් අපට අපගේ සම්පාදනය කරන ලද CSS අඩු කළ හැකිය, කැදලි වගු වැනි ස්ථානවල මෝස්තර උරුම නොවන බව සහතික කළ හැකිය, සහ Sass සම්පාදනය කිරීමෙන් පසු Bootstrap සංරචක මූලික නැවත සකස් කිරීමට සහ දිගු කිරීමට ඉඩ දෙන්න.

අපි CSS විචල්‍යයන් භාවිතා කරන්නේ කෙසේද යන්න පිළිබඳ යම් අවබෝධයක් සඳහා අපගේ වගු ලේඛන දෙස බලන්න .

අපි අපගේ ජාල හරහා CSS විචල්‍යයන් ද භාවිතා කරන්නෙමු—මූලික වශයෙන් කාණු සඳහා—ඉදිරියේදී තවත් සංරචක භාවිතයක් ඇත.

උදාහරණ

CSS විචල්‍යයන් Sass හි විචල්‍යවලට සමාන නම්‍යශීලී බවක් ලබා දෙයි, නමුත් බ්‍රවුසරයට සේවය කිරීමට පෙර සම්පාදනය කිරීමේ අවශ්‍යතාවයකින් තොරව. උදාහරණයක් ලෙස, මෙන්න අපි CSS විචල්‍යයන් සමඟ අපගේ පිටුවේ අකුරු සහ සබැඳි විලාස නැවත සකසන්නෙමු.

body {
  font: 1rem/1.5 var(--bs-font-sans-serif);
}
a {
  color: var(--bs-blue);
}

ජාලක බිඳවැටීම්

අපි අපගේ ජාල බිඳුම් ලක්ෂ්‍ය CSS විචල්‍යයන් ලෙස ඇතුළත් කරන අතර ( හැර xs), CSS විචල්‍ය මාධ්‍ය විමසුම්වල ක්‍රියා නොකරන බව මතක තබා ගන්න . මෙය විචල්‍යයන් සඳහා වන CSS පිරිවිතරයේ සැලසුම අනුව, නමුත් විචල්‍ය සඳහා සහය ඇතිව ඉදිරි වසරවලදී වෙනස් විය හැක env(). ප්‍රයෝජනවත් සබැඳි කිහිපයක් සඳහා මෙම Stack Overflow පිළිතුර පරීක්ෂා කරන්න . මේ අතරතුර, ඔබට මෙම විචල්‍යයන් වෙනත් CSS අවස්ථාවන්හිදී මෙන්ම ඔබගේ JavaScript තුළද භාවිතා කළ හැක.