ရေးပါတယ်။

စတင်ခြင်းစာမျက်နှာများသည် ပရောဂျက်၏ နိဒါန်းခရီးစဉ်နှင့် ၎င်းကိုပေးဆောင်သည့်အရာများကို ပံ့ပိုးပေးသော်လည်း၊ ဤစာတမ်းသည် 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ထို့နောက် အရောင်၊ နောက်ခံအရောင်၊ ဘောင်အရောင် စသည်ဖြင့် ပေါင်းထည့် လိုသည့် ပြုပြင်မွမ်းမံမှုများကို အသုံးပြု ပါသည်။

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

z-အညွှန်းကိန်းများ

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ကျွန်ုပ်တို့၏ အပြင်အဆင်စာမျက်နှာတွင် ပိုမိုလေ့လာပါ ။

JS အပေါ် HTML နှင့် CSS

ဖြစ်နိုင်သည့်အခါတိုင်း၊ HTML နှင့် CSS ကို JavaScript ပေါ်တွင် ရေးလိုပါသည်။ ယေဘူယျအားဖြင့်၊ HTML နှင့် CSS သည် မတူညီသော အတွေ့အကြုံအဆင့်အားလုံးရှိ လူများပိုမိုများပြားလာပြီး ပိုမိုရရှိနိုင်သည်။ HTML နှင့် CSS သည် JavaScript ထက် သင့်ဘရောက်ဆာတွင် ပိုမိုမြန်ဆန်ပြီး သင့်ဘရောက်ဆာသည် ယေဘုယျအားဖြင့် သင့်အတွက် လုပ်ဆောင်နိုင်စွမ်းများစွာကို ပေးဆောင်ပါသည်။

ဤနိယာမသည် ကျွန်ုပ်တို့၏ ပထမတန်းစား JavaScript API dataဖြစ်သည် ကျွန်ုပ်တို့၏ JavaScript ပလပ်အင်များကို အသုံးပြုရန်အတွက် သင်သည် မည်သည့် JavaScript နီးပါးမျှ ရေးသားရန် မလိုအပ်ပါ။ အဲဒီအစား HTML ရေးပါ။ ကျွန်ုပ်တို့၏ JavaScript ခြုံငုံသုံးသပ်ချက်စာမျက်နှာတွင် ဤအကြောင်းပိုမိုဖတ်ရှုပါ ။

နောက်ဆုံးအနေဖြင့်၊ ကျွန်ုပ်တို့၏စတိုင်များသည် ဘုံဝဘ်ဒြပ်စင်များ၏ အခြေခံအမူအကျင့်များပေါ်တွင် တည်ဆောက်ထားသည်။ ဖြစ်နိုင်သည့်အခါတိုင်း၊ ကျွန်ုပ်တို့သည် ဘရောင်ဇာမှ ပေးဆောင်သည့်အရာကို အသုံးပြုလိုပါသည်။ ဥပမာအားဖြင့်၊ သင်သည် .btnမည်သည့်ဒြပ်စင်နီးပါးတွင်မဆို အတန်းတစ်ခုကို ထည့်သွင်းနိုင်သော်လည်း၊ ဒြပ်စင်အများစုသည် မည်သည့် semantic value သို့မဟုတ် browser လုပ်ဆောင်နိုင်စွမ်းကိုမျှ မပေးစွမ်းပါ။ ထို့ကြောင့်၊ ကျွန်ုပ်တို့သည် <button>s နှင့် <a>s ကိုသုံးသည်။

ပိုရှုပ်ထွေးတဲ့ အစိတ်အပိုင်းတွေအတွက်လည်း အလားတူပါပဲ။ ထည့်သွင်းမှု၏အခြေအနေအပေါ်အခြေခံ၍ အတန်းများထည့်ရန် ကျွန်ုပ်တို့၏ကိုယ်ပိုင်ပုံစံအတည်ပြုခြင်းပလပ်အင်ကို ကျွန်ုပ်တို့ရေးနိုင်သော်လည်း၊ ထို့ကြောင့် ကျွန်ုပ်တို့အား အနီရောင်ဟု စာသားပုံစံသတ်မှတ်နိုင်စေခြင်းဖြင့် ကျွန်ုပ်တို့ကိုပေးဆောင်သည့် ဘရောက်ဆာတိုင်း၏ / pseudo-elements များကို အသုံးပြုခြင်းကို ပို နှစ်သက်:valid ပါသည် :invalid။

အသုံးအဆောင်များ

Utility အတန်းများ—ယခင် Bootstrap 3 တွင် ကူညီပေးသူများ—သည် CSS ဖောင်းပွမှုနှင့် စာမျက်နှာစွမ်းဆောင်ရည် ညံ့ဖျင်းမှုကို တိုက်ဖျက်ရာတွင် အားကောင်းသည့် မဟာမိတ်ဖြစ်သည်။ utility class သည် ပုံမှန်အားဖြင့် class တစ်ခုအနေဖြင့် ဖော်ပြထားသော မပြောင်းလဲနိုင်သော ပစ္စည်း-တန်ဖိုးအတွဲတွဲတစ်ခု (ဥပမာ၊ .d-blockကိုယ်စားပြု display: block;)။ ၎င်းတို့၏ အဓိက အယူခံမှာ HTML ရေးသားရာတွင် အသုံးပြုသည့် မြန်နှုန်းနှင့် သင်ရေးရန် စိတ်ကြိုက် CSS ပမာဏကို ကန့်သတ်ခြင်း ဖြစ်သည်။

စိတ်ကြိုက် CSS နှင့် ပတ်သက်၍ အထူးသဖြင့်၊ utilities များသည် သင်၏ အများဆုံး ထပ်ခါတလဲလဲ ပိုင်ဆိုင်မှု-တန်ဖိုးအတွဲများကို အတန်းတစ်ခုတည်းသို့ လျှော့ချခြင်းဖြင့် ဖိုင်အရွယ်အစား တိုးလာမှုကို တိုက်ဖျက်ရာတွင် ကူညီပေးနိုင်ပါသည်။ ၎င်းသည် သင့်ပရောဂျက်များတွင် အတိုင်းအတာတစ်ခုအထိ သိသိသာသာအကျိုးသက်ရောက်မှုရှိနိုင်သည်။

ပြောင်းလွယ်ပြင်လွယ် HTML

အမြဲတမ်းမဖြစ်နိုင်သော်လည်း၊ ကျွန်ုပ်တို့သည် အစိတ်အပိုင်းများအတွက် ကျွန်ုပ်တို့၏ HTML လိုအပ်ချက်များတွင် အလွန်အမင်းဒေါသဖြစ်ခြင်းကို ရှောင်ရှားရန် ကြိုးပမ်းနေပါသည်။ ထို့ကြောင့် ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏ CSS Selectors များတွင် အတန်းတစ်ခုတည်းကို အာရုံစိုက်ပြီး ချက်ခြင်းကလေးရွေးချယ်ခြင်းများကို ရှောင်ရှားရန် ကြိုးစား >ပါသည်။ ၎င်းသည် သင့်အား အကောင်အထည်ဖော်မှုတွင် ပိုမိုပြောင်းလွယ်ပြင်လွယ်ဖြစ်စေပြီး ကျွန်ုပ်တို့၏ CSS ကို ပိုမိုရိုးရှင်းပြီး တိကျမှုနည်းပါးစေသည်။

ကုဒ်သဘောတူညီချက်များ

ကုဒ်လမ်းညွှန် (Bootstrap ပူးတွဲဖန်တီးသူ၊ @mdo မှ) သည် Bootstrap တစ်လျှောက် ကျွန်ုပ်တို့၏ HTML နှင့် CSS ကို မည်သို့ရေးကြောင်း မှတ်တမ်းတင်ထားသည်။ ၎င်းသည် ယေဘူယျပုံစံချခြင်းဆိုင်ရာ လမ်းညွှန်ချက်များ၊ ဘုံအသိတရားမူလများ၊ ပိုင်ဆိုင်မှုနှင့် ရည်ညွှန်းချက်အမှာစာများနှင့် အခြားအရာများအတွက် တိကျသောအချက်များဖြစ်သည်။

ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏ Sass/CSS တွင် ဤစံနှုန်းများနှင့် အခြားအရာများကို လိုက်နာရန် Stylelint ကို အသုံးပြု ပါသည်။ ကျွန်ုပ်တို့၏ စိတ်ကြိုက် Stylelint config သည် open source ဖြစ်ပြီး အခြားသူများ အသုံးပြုရန်နှင့် တိုးချဲ့ရန်အတွက် ရနိုင်ပါသည်။

ကျွန်ုပ်တို့သည် စံနှင့် အခေါ်အဝေါ် HTML တို့ကို ကျင့်သုံးရန်၊ ဘုံအမှားများကို ရှာဖွေဖော်ထုတ်ရန် vnu-jar ကို အသုံးပြု ပါသည်။