ወደ ዋናው ይዘት ዝለል ወደ ሰነዶች ዳሰሳ ዝለል
Check
in English

የሲኤስኤስ ተለዋዋጮች

ለፈጣን እና ወደፊት ለሚታይ ንድፍ እና ልማት የ Bootstrap's CSS ብጁ ባህሪያትን ይጠቀሙ።

በዚህ ገጽ ላይ

ቡትስትራፕ Sassን እንደገና ማጠናቀር ሳያስፈልገው በቅጽበት ለማበጀት በተዘጋጀው CSS ውስጥ ብዙ የ CSS ብጁ ንብረቶችን (ተለዋዋጮችን) ያካትታል። እነዚህ እንደ የእኛ ጭብጥ ቀለሞች፣ መግቻ ነጥቦች እና ዋና ቅርጸ-ቁምፊ ቁልል በአሳሽዎ ተቆጣጣሪ፣ በኮድ ማጠሪያ ሳጥን ወይም በአጠቃላይ ፕሮቶታይፕ ውስጥ ለመሳሰሉት በተለምዶ ጥቅም ላይ የዋሉ እሴቶችን በቀላሉ ማግኘት ይችላሉ።

bs-ከሦስተኛ ወገን CSS ጋር አለመግባባቶችን ለማስወገድ ሁሉም የእኛ ብጁ ንብረቶቻችን በቅድመ-ቅጥያ ተቀምጠዋል ።

የስር ተለዋዋጮች

:rootየ Bootstrap CSS በተጫነ በማንኛውም ቦታ ሊደረስባቸው የሚችሉ (የሚፈለገው መሆኑን ልብ ይበሉ) የምናካትታቸው ተለዋዋጮች እዚህ አሉ ። እነሱ በእኛ _root.scssፋይል ውስጥ ይገኛሉ እና በእኛ የተጠናቀሩ የዲስት ፋይሎቻችን ውስጥ ተካትተዋል።

: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-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-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", "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-bg: #fff;
  --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-2xl: 2rem;
  --bs-border-radius-pill: 50rem;
  --bs-link-color: #0d6efd;
  --bs-link-hover-color: #0a58ca;
  --bs-code-color: #d63384;
  --bs-highlight-bg: #fff3cd;
}

የአካል ክፍሎች ተለዋዋጮች

Bootstrap 5 ብጁ ንብረቶችን እንደ አካባቢያዊ ተለዋዋጮች ለተለያዩ አካላት እየተጠቀመ ነው። በዚህ መንገድ የተቀናበረውን ሲኤስኤስን እንቀንሳለን፣ ቅጦች እንደ ጎጆ ጠረጴዛዎች ባሉ ቦታዎች ላይ እንደማይወርሱ እናረጋግጣለን እና ከሳስ ከተጠናቀረ በኋላ አንዳንድ መሰረታዊ የ Bootstrap ክፍሎችን እንደገና ማስተካከል እና ማራዘም እንችላለን።

የሲኤስኤስ ተለዋዋጮችን እንዴት እንደምንጠቀም አንዳንድ ግንዛቤ ለማግኘት የኛን የሰንጠረዥ ሰነድ ይመልከቱ ። የእኛ navbars እንደ v5.2.0 የ CSS ተለዋዋጮችንም ይጠቀማሉ። እኛ ደግሞ የCSS ተለዋዋጮችን በመላ ግሪዶቻችን እየተጠቀምን ነው-በዋነኛነት ለገጣኖች አዲሱን መርጦ የመግባት CSS ፍርግርግ -ለወደፊቱ ተጨማሪ አካላት አጠቃቀም።

በሚቻልበት ጊዜ፣ የCSS ተለዋዋጮችን በመሠረታዊ አካላት ደረጃ (ለምሳሌ .navbarለናቭባር እና ንዑስ ክፍሎቹ) እንመድባለን። ይህ የት እና እንዴት ማበጀት እንደሚቻል መገመትን ይቀንሳል፣ እና በቀጣይ ዝመናዎች በቡድናችን ቀላል ለውጦችን ይፈቅዳል።

ቅድመ ቅጥያ

አብዛኛዎቹ የሲኤስኤስ ተለዋዋጮች ከእራስዎ ኮድ ቤዝ ጋር ግጭትን ለማስወገድ ቅድመ ቅጥያ ይጠቀማሉ። --ይህ ቅድመ ቅጥያ በእያንዳንዱ የCSS ተለዋዋጭ ላይ ከሚፈለገው በተጨማሪ ነው ።

$prefixቅድመ ቅጥያውን በ Sass ተለዋዋጭ በኩል አብጅ ። በነባሪነት ተቀናብሯል bs-(የመከታተያ ሰረዝን ልብ ይበሉ)።

ምሳሌዎች

የሲኤስኤስ ተለዋዋጮች ከ Sass ተለዋዋጮች ጋር ተመሳሳይ የሆነ ተለዋዋጭነት ይሰጣሉ፣ ነገር ግን ወደ አሳሹ ከመቅረቡ በፊት ማጠናቀር ሳያስፈልግ። ለምሳሌ፣ እዚህ የገጻችንን ቅርጸ-ቁምፊ እና የአገናኝ ስልቶችን ከCSS ተለዋዋጮች ጋር ዳግም እያስጀመርን ነው።

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

የፍርግርግ መግቻ ነጥቦች

የፍርግርግ መግቻ ነጥቦችን እንደ ሲኤስኤስ ተለዋዋጮች (ከ በስተቀር xs) ብንጨምርም፣ የ CSS ተለዋዋጮች በሚዲያ መጠይቆች ላይ እንደማይሰሩ ይወቁ ። ይህ በCSS ዝርዝር ውስጥ ለተለዋዋጮች ዲዛይን ነው፣ነገር ግን በሚቀጥሉት አመታት ለተለዋዋጮች ድጋፍ ሊለወጥ ይችላል env()። ለአንዳንድ አጋዥ አገናኞች ይህንን የቁልል ፍሰት መልስ ይመልከቱ ። እስከዚያው ድረስ፣ እነዚህን ተለዋዋጮች በሌሎች የሲኤስኤስ ሁኔታዎች፣ እንዲሁም በእርስዎ ጃቫስክሪፕት ውስጥ መጠቀም ይችላሉ።