ရေးပါတယ်။
လမ်းညွှန်မူများ၊ ဗျူဟာများနှင့် Bootstrap ကို တည်ဆောက်ထိန်းသိမ်းရာတွင် အသုံးပြုသည့် နည်းစနစ်များအကြောင်း သင်ကိုယ်တိုင် ပိုမိုလွယ်ကူစွာ စိတ်ကြိုက်ပြင်ဆင်ပြီး တိုးချဲ့နိုင်စေရန် လေ့လာပါ။
စတင်ခြင်းစာမျက်နှာများသည် ပရောဂျက်၏ နိဒါန်းခရီးစဉ်နှင့် ၎င်းကိုပေးဆောင်သည့်အရာများကို ပံ့ပိုးပေးသော်လည်း၊ ဤစာတမ်းသည် Bootstrap တွင် ကျွန်ုပ်တို့လုပ်ဆောင်သည့်အရာများကို အ ဘယ်ကြောင့် လုပ်ဆောင်ရသည်ကို အလေးပေးဖော်ပြထားသည်။ အခြားသူများထံမှ ကျွန်ုပ်တို့ထံမှ သင်ယူနိုင်စေရန်၊ ကျွန်ုပ်တို့နှင့်အတူ ပါဝင်ကူညီရန်နှင့် ကျွန်ုပ်တို့ တိုးတက်ကောင်းမွန်လာစေရန်အတွက် ဝဘ်ပေါ်တွင် တည်ဆောက်ရန် ကျွန်ုပ်တို့၏အတွေးအခေါ်ကို ရှင်းပြထားသည်။
မမှန်တဲ့အရာကို ကြည့်ပါ၊ ဒါမှမဟုတ် ပိုကောင်းအောင် လုပ်လို့ရလား။ ပြဿနာတစ်ခုကို ဖွင့်ပါ— သင်နှင့် ဆွေးနွေးလိုပါသည်။
ကျွန်ုပ်တို့သည် ဤအရာတစ်ခုစီကို တစ်လျှောက်လုံးတွင် စေ့စေ့ငုငုကြည့်မည်ဖြစ်သော်လည်း မြင့်မားသောအဆင့်တွင်၊ ဤအရာသည် ကျွန်ုပ်တို့၏ချဉ်းကပ်မှုကို လမ်းညွှန်ပေးသည်။
- အစိတ်အပိုင်းများသည် တုံ့ပြန်မှုရှိပြီး မိုဘိုင်းလ်-ပထမဖြစ်သင့်သည်။
- အစိတ်အပိုင်းများကို အခြေခံလူတန်းစားဖြင့် တည်ဆောက်ပြီး ပြုပြင်မွမ်းမံထားသော အတန်းများမှတစ်ဆင့် တိုးချဲ့သင့်သည်။
- အစိတ်အပိုင်းပြည်နယ်များသည် ဘုံ z-အညွှန်းစကေးကို နာခံသင့်သည်။
- ဖြစ်နိုင်သည့်အခါတိုင်း၊ JavaScript ထက် HTML နှင့် CSS အကောင်အထည်ဖော်မှုကို ပိုနှစ်သက်သည်။
- ဖြစ်နိုင်သည့်အခါတိုင်း၊ စိတ်ကြိုက်စတိုင်များထက် utilities ကိုသုံးပါ။
- ဖြစ်နိုင်သည့်အခါတိုင်း၊ တင်းကျပ်သော HTML လိုအပ်ချက်များ (ကလေးများ ရွေးချယ်မှုစနစ်များ) ကို ရှောင်ကြဉ်ပါ။
Bootstrap ၏ တုံ့ပြန်မှုပုံစံများကို တုံ့ပြန်မှုဖြစ်စေရန် တည်ဆောက်ထားပြီး၊ မကြာခဏ မိုဘိုင်းပထမ အဖြစ် ရည်ညွှန်းလေ့ရှိသည့် ချဉ်းကပ်မှုတစ်ခုဖြစ်သည် ။ ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏စာရွက်စာတမ်းများတွင် ဤအသုံးအနှုန်းကိုအသုံးပြုပြီး ၎င်းနှင့်အလွန်သဘောတူသော်လည်း တစ်ခါတစ်ရံတွင် ၎င်းသည် အလွန်ကျယ်ပြန့်နိုင်သည်။ အစိတ်အပိုင်းတိုင်းသည် Bootstrap တွင် လုံးလုံးလျားလျားတုံ့ပြန်မှုမဖြစ်ရသော်လည်း ၊ ဤတုံ့ပြန်မှုနည်းလမ်းသည် viewport ပိုကြီးလာသည်နှင့်အမျှ သင့်အား ပုံစံများထည့်ရန် တွန်းအားပေးခြင်းဖြင့် CSS overrides များကို လျှော့ချခြင်းအကြောင်းဖြစ်သည်။
Bootstrap တစ်လျှောက်၊ ကျွန်ုပ်တို့၏မီဒီယာမေးမြန်းချက်များတွင် ၎င်းကို အရှင်းလင်းဆုံးမြင်ရပါမည်။ အခြေအနေအများစုတွင်၊ min-widthကျွန်ုပ်တို့သည် သတ်မှတ်ထားသော breakpoint တွင် စတင်အသုံးပြုပြီး ပိုမိုမြင့်မားသော breakpoints များမှတဆင့် သယ်ဆောင်သည့် queries ကို အသုံးပြုပါသည်။ ဥပမာအားဖြင့်၊ တစ်ခုမှ အဆုံးမရှိ .d-noneအထိ အကျုံး ဝင်သည်။ min-width: 0အခြားတစ်ဖက်တွင်၊ .d-md-noneအလယ်အလတ်မှတ်တိုင်နှင့် အထက်တို့မှ အကျုံးဝင်သည်။
max-widthအစိတ်အပိုင်းတစ်ခု၏ မွေးရာပါ ရှုပ်ထွေးမှု လိုအပ်သည့်အခါ တစ်ခါတစ်ရံတွင် ကျွန်ုပ်တို့သည် ၎င်းကို အသုံးပြုပါမည် ။ တစ်ခါတစ်ရံတွင်၊ ဤအရာများသည် ကျွန်ုပ်တို့၏အစိတ်အပိုင်းများမှ ပင်မလုပ်ဆောင်နိုင်စွမ်းကို ပြန်လည်ရေးသားခြင်းထက် အကောင်အထည်ဖော်ရန်နှင့် ပံ့ပိုးရန်အတွက် လုပ်ဆောင်ရန်နှင့် စိတ်ပိုင်းဆိုင်ရာ ပိုမိုရှင်းလင်းသည်။ ဤချဉ်းကပ်မှုကို ကန့်သတ်ရန် ကျွန်ုပ်တို့ ကြိုးစားသော်လည်း ၎င်းကို အခါအားလျော်စွာ အသုံးပြုပါမည်။
ကျွန်ုပ်တို့၏ Reboot၊ အပြန်အလှန်ဘရောက်ဆာ ပုံမှန်ပြုလုပ်ခြင်းစတိုင်စာရွက်အပြင်၊ ကျွန်ုပ်တို့၏စတိုင်များအားလုံးသည် အတန်းများကို ရွေးချယ်သူများအဖြစ် အသုံးပြုရန် ရည်ရွယ်ပါသည်။ ဆိုလိုသည်မှာ အမျိုးအစားရွေးချယ်မှုစနစ်များ (ဥပမာ၊ input[type="text"]) နှင့် ပြင်ပမိဘအတန်းများ (ဥပမာ၊ ) တို့ကို ရှင်းရှင်းလင်းလင်း မောင်းနှင်ခြင်းကို ဆိုလိုသည် .parent .child။
ထို့ကြောင့်၊ အစိတ်အပိုင်းများကို အများအားဖြင့် လွှမ်းမိုး၍မရနိုင်သော ပိုင်ဆိုင်မှု-တန်ဖိုးအတွဲများကို တည်ဆောက်ထားသော အခြေခံလူတန်းစားဖြင့် တည်ဆောက်သင့်သည်။ ဥပမာ .btnနှင့် .btn-primary. ကျွန်ုပ်တို့သည် .btn၊ display၊ paddingနှင့် border-width. ထို့နောက် .btn-primaryအရောင်၊ နောက်ခံအရောင်၊ ဘောင်အရောင် စသည်ဖြင့် ထည့် လိုသည့် ပြုပြင်မွမ်းမံမှုများကို ကျွန်ုပ်တို့ အသုံးပြုပါသည်။
မူကွဲများစွာဖြင့် ပြောင်းလဲရမည့် ဂုဏ်သတ္တိများ သို့မဟုတ် တန်ဖိုးများ အများအပြားရှိမှသာ ပြုပြင်မွမ်းမံမှုအတန်းများကို အသုံးပြုသင့်သည်။ ပြုပြင်မွမ်းမံမှုများသည် အမြဲတမ်းမလိုအပ်ပါ၊ ထို့ကြောင့် သင်သည် ကုဒ်လိုင်းများကို အမှန်တကယ် သိမ်းဆည်းနေပြီး ၎င်းတို့ကို ဖန်တီးသည့်အခါ မလိုအပ်သော အစားထိုးမှုများကို တားဆီးထားကြောင်း သေချာပါစေ။ ပြုပြင်မွမ်းမံမှုများ၏ ကောင်းသောဥပမာများသည် ကျွန်ုပ်တို့၏ ဆောင်ပုဒ်အရောင်အတန်းများနှင့် အရွယ်အစားမျိုးကွဲများဖြစ်သည်။
Bootstrap တွင် စကေး နှစ်ခုရှိသည် z-index—အစိတ်အပိုင်းတစ်ခုအတွင်းရှိ အစိတ်အပိုင်းများနှင့် ထပ်ဆင့်သောအစိတ်အပိုင်းများ။
borderBootstrap ရှိ အချို့သော အစိတ်အပိုင်းများသည် ပိုင်ဆိုင်မှု ကို မွမ်းမံပြင်ဆင်ခြင်းမရှိဘဲ ဘောင်နှစ်ထပ်ကို တားဆီးရန် ထပ်နေသောဒြပ်စင်များဖြင့် တည်ဆောက်ထားသည် ။ ဥပမာအားဖြင့်၊ ခလုတ်အုပ်စုများ၊ ဖြည့်သွင်းသည့်အုပ်စုများနှင့် pagination။- ဤအစိတ်အပိုင်းများ သည် တစ်ဆင့် ခံ စံ
z-indexအတိုင်းအတာ တစ်ခု မျှဝေ ပါသည်။03 0ပုံသေ (initial),1is:hover,2is:active/.active, and ,3is:focus.- ဤချဉ်းကပ်မှုသည် သုံးစွဲသူ၏ ဦးစားပေးမှု အများဆုံးမျှော်လင့်ချက်နှင့် ကိုက်ညီပါသည်။ ဒြပ်စင်တစ်ခုအား အာရုံစိုက်ပါက၊ ၎င်းသည် မြင်ကွင်းနှင့် အသုံးပြုသူ၏အာရုံစိုက်မှုတွင်ဖြစ်သည်။ တက်ကြွသောဒြပ်စင်များသည် ပြည်နယ်ကိုညွှန်ပြသောကြောင့် ဒုတိယအမြင့်ဆုံးဖြစ်သည်။ Hover သည် အသုံးပြုသူ၏ ရည်ရွယ်ချက်ကို ညွှန်ပြသောကြောင့် တတိယအမြင့်ဆုံးဖြစ်သည်၊ သို့သော် အရာအားလုံးနီးပါးကို ရွှေ့ နိုင်သည်။
Bootstrap တွင် အချို့သော overlay အဖြစ် လုပ်ဆောင်သည့် အစိတ်အပိုင်းများစွာ ပါဝင်သည်။ ၎င်းတွင် အမြင့်ဆုံး z-index၊ dropdowns၊ fixed နှင့် sticky navbars၊ modals၊ tooltips နှင့် popover များ ပါဝင်သည်။ ဤအစိတ်အပိုင်းများတွင် ၎င်းတို့၏ကိုယ်ပိုင် z-indexစကေး များရှိသည် 1000။ ဤစမှတ်နံပါတ်သည် ကျပန်းဖြစ်ပြီး ကျွန်ုပ်တို့၏စတိုင်များနှင့် သင့်ပရောဂျက်၏စိတ်ကြိုက်စတိုင်များကြားတွင် ကြားခံလေးတစ်ခုအဖြစ် လုပ်ဆောင်ပါသည်။
ထပ်ဆင့်ထားသော အစိတ်အပိုင်းတစ်ခုစီ z-indexသည် အသုံးပြုသူအား အာရုံစူးစိုက်ထားသည့် သို့မဟုတ် ရွေ့လျားနေသော အစိတ်အပိုင်းများကို အချိန်တိုင်းကြည့်ရှုနိုင်စေရန် ဘုံ UI စည်းမျဉ်းများက ခွင့်ပြုသည့်နည်းလမ်းဖြင့် ၎င်း၏တန်ဖိုးကို အနည်းငယ်တိုးစေသည်။ ဥပမာအားဖြင့်၊ modal သည် document blocking (ဥပမာ၊ modal ၏လုပ်ဆောင်ချက်အတွက် save လုပ်၍ မရပါ) ထို့ကြောင့် ၎င်းကို ကျွန်ုပ်တို့၏ navbars များပေါ်တွင် တင်ထားသည်။
ဤအကြောင်းကို z-indexကျွန်ုပ်တို့၏ အပြင်အဆင်စာမျက်နှာတွင် ပိုမိုလေ့လာပါ ။
ဖြစ်နိုင်သည့်အခါတိုင်း၊ HTML နှင့် CSS ကို JavaScript ပေါ်တွင် ရေးလိုပါသည်။ ယေဘူယျအားဖြင့်၊ HTML နှင့် CSS တို့သည် မတူညီသော အတွေ့အကြုံအဆင့်အားလုံးရှိ လူများပိုမိုများပြားလာပြီး ပိုမိုရရှိနိုင်သည်။ HTML နှင့် CSS သည် JavaScript ထက် သင့်ဘရောက်ဆာတွင် ပိုမိုမြန်ဆန်ပြီး သင့်ဘရောက်ဆာသည် ယေဘုယျအားဖြင့် သင့်အတွက် လုပ်ဆောင်နိုင်စွမ်းများစွာကို ပေးဆောင်သည်။
ဤနိယာမသည် ကျွန်ုပ်တို့၏ ပထမတန်းစား JavaScript API သည် dataattributes ဖြစ်သည်။ ကျွန်ုပ်တို့၏ JavaScript ပလပ်အင်များကို အသုံးပြုရန်အတွက် သင်သည် မည်သည့် JavaScript နီးပါးမျှ ရေးသားရန် မလိုအပ်ပါ။ အဲဒီအစား HTML ရေးပါ။ ကျွန်ုပ်တို့၏ JavaScript ခြုံငုံသုံးသပ်ချက်စာမျက်နှာတွင် ဤအကြောင်းပိုမိုဖတ်ရှုပါ ။
Lastly, our styles build on the fundamental behaviors of common web elements. Whenever possible, we prefer to use what the browser provides. For example, you can put a .btn class on nearly any element, but most elements don’t provide any semantic value or browser functionality. So instead, we use <button>s and <a>s.
The same goes for more complex components. While we could write our own form validation plugin to add classes to a parent element based on an input’s state, thereby allowing us to style the text say red, we prefer using the :valid/:invalid pseudo-elements every browser provides us.
Utility classes—formerly helpers in Bootstrap 3—are a powerful ally in combatting CSS bloat and poor page performance. A utility class is typically a single, immutable property-value pairing expressed as a class (e.g., .d-block represents display: block;). Their primary appeal is speed of use while writing HTML and limiting the amount of custom CSS you have to write.
Specifically regarding custom CSS, utilities can help combat increasing file size by reducing your most commonly repeated property-value pairs into single classes. This can have a dramatic effect at scale in your projects.
အမြဲတမ်းမဖြစ်နိုင်သော်လည်း၊ ကျွန်ုပ်တို့သည် အစိတ်အပိုင်းများအတွက် ကျွန်ုပ်တို့၏ HTML လိုအပ်ချက်များတွင် အလွန်အမင်းဒေါသဖြစ်ခြင်းကို ရှောင်ရှားရန် ကြိုးပမ်းနေပါသည်။ ထို့ကြောင့် ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏ CSS Selectors များတွင် အတန်းတစ်ခုတည်းကို အာရုံစိုက်ပြီး ချက်ခြင်းကလေးရွေးချယ်ခြင်းများကို ရှောင်ရှားရန် ကြိုးစား >ပါသည်။ ၎င်းသည် သင့်အား အကောင်အထည်ဖော်မှုတွင် ပိုမိုပြောင်းလွယ်ပြင်လွယ်ဖြစ်စေပြီး ကျွန်ုပ်တို့��� CSS ကို ပိုမိုရိုးရှင်းပြီး တိကျမှုနည်းပါးစေသည်။