CSS ကိန်းရှင်များ

Bootstrap တွင် ၎င်း၏စုစည်းထားသော CSS တွင် CSS စိတ်ကြိုက်ဂုဏ်သတ္တိများ (variables) နှစ်ဒါဇင်ခန့် ပါဝင်ပြီး အစိတ်အပိုင်းတစ်ခုချင်းစီအလိုက် ပိုမိုကောင်းမွန်သော စိတ်ကြိုက်ပြင်ဆင်မှုအတွက် နောက်ထပ် ဒါဇင်များစွာပါဝင်ပါသည်။ ၎င်းတို့သည် သင့်ဘရောက်ဆာ၏ စစ်ဆေးရေးမှူး၊ ကုဒ်သဲပုံး သို့မဟုတ် ယေဘုယျပုံတူပုံတူရိုက်ခြင်းတွင် လုပ်ဆောင်သောအခါတွင် ကျွန်ုပ်တို့၏ ဆောင်ပုဒ်အရောင်များ၊ ခွဲမှတ်များနှင့် ပင်မဖောင့်အတွဲများကဲ့သို့ အသုံးများသော တန်ဖိုးများကို လွယ်ကူစွာ အသုံးပြုခွင့်ပေးပါသည်။

bs-ပြင်ပအဖွဲ့အစည်း CSS နှင့် ကွဲလွဲမှုများကို ရှောင်ရှားရန် ကျွန်ုပ်တို့၏ စိတ်ကြိုက်ဂုဏ်သတ္တိများအားလုံးကို ရှေ့ဆက်ထားသည် ။

Root အပြောင်းအလဲများ

:rootဤသည်မှာ Bootstrap ၏ CSS ကို တင်ထားသည့် မည်သည့်နေရာတွင်မဆို ဝင်ရောက်ကြည့်ရှုနိုင်သည့် (လိုအပ်ကြောင်း သတိပြုပါ) တွင် ကျွန်ုပ်တို့ပါဝင်သည့် variable များ ဖြစ်သည်။ ၎င်းတို့သည် _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-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));
}

အစိတ်အပိုင်း ကိန်းရှင်များ

ကျွန်ုပ်တို့သည် အစိတ်အပိုင်းအမျိုးမျိုးအတွက် စိတ်ကြိုက်ဂုဏ်သတ္တိများကို ဒေသဆိုင်ရာ ကိန်းရှင်များအဖြစ် စတင်အသုံးပြုနေပြီဖြစ်သည်။ ဤနည်းဖြင့် ကျွန်ုပ်တို့၏စုစည်းထားသော CSS ကို လျှော့ချနိုင်ပြီး၊ nested tables ကဲ့သို့သော နေရာများတွင် စတိုင်များကို အမွေဆက်ခံခြင်းမရှိကြောင်း သေချာစေရန်နှင့် Sass စုစည်းပြီးနောက် Bootstrap အစိတ်အပိုင်းအချို့ကို အခြေခံအနားယူခြင်းနှင့် တိုးချဲ့ခြင်းကို ခွင့်ပြုပါသည်။

ကျွန်ုပ်တို့သည် CSS variables များကို မည်သို့အသုံးပြုနေပုံကို ထိုးထွင်းသိမြင်နိုင် စေရန်အတွက် ကျွန်ုပ်တို့၏ဇယားစာရွက်စာတမ်းများကို ကြည့်ရှု ပါ ။

ကျွန်ုပ်တို့သည် အနာဂတ်တွင် အစိတ်အပိုင်းအသုံးပြုမှု ပိုများလာသဖြင့် ကျွန်ုပ်တို့၏ ဂရစ်ဒ်များ—အဓိကအားဖြင့် ရေမြောင်းများအတွက် CSS variable များကိုလည်း အသုံးပြုနေပါသည်။

ဥပမာများ

CSS variable များသည် Sass ၏ variable များနှင့် ဆင်တူသော ပြောင်းလွယ်ပြင်လွယ်ကို ပေးစွမ်းသော်လည်း browser တွင် အသုံးမပြုမီ compilation ပြုလုပ်ရန် မလိုအပ်ပါ။ ဥပမာအားဖြင့်၊ ဤနေရာတွင် ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏ စာမျက်နှာ၏ ဖောင့်နှင့် CSS variable များဖြင့် လင့်ခ်ပုံစံများကို ပြန်လည်သတ်မှတ်နေပါသည်။

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