Bootstrap ဖြင့် စတင်လိုက်ပါ။

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

ဤစာမျက်နှာတွင်

အမြန်စတင်ပါ။

တည်ဆောက်မှုအဆင့်များမလိုအပ်ဘဲ CDN မှတစ်ဆင့် Bootstrap ၏ထုတ်လုပ်ရန်အဆင်သင့်ဖြစ်သော CSS နှင့် JavaScript ကို ထည့်သွင်းခြင်းဖြင့် စတင်လိုက်ပါ။ ဤ Bootstrap CodePen သရုပ်ပြ ဖြင့် လက်တွေ့ကြည့်ပါ ။

index.htmlသင့်ပရောဂျက်အမြစ်တွင် ဖိုင် အသစ်တစ်ခုဖန်တီးပါ ။ မိုဘိုင်းစက်ပစ္စည်းများတွင် သင့်လျော်သော တုံ့ပြန်မှုဆိုင်ရာ အပြုအမူ<meta name="viewport"> အတွက် တဂ်ကိုလည်း ထည့်သွင်းပါ ။
```
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>
```

Bootstrap ၏ CSS နှင့် JS တို့ပါဝင်သည်။ မပိတ်မီ ကျွန်ုပ်တို့၏ CSS အတွက် တဂ် <link>နှင့် ကျွန်ုပ်တို့၏ JavaScript အစုအဝေး ( dropdowns၊ poppers နှင့် tooltips များကို နေရာချထားရန်အတွက် Popper အပါအဝင်) အတွက် tag ကို ထည့်ပါ ။ ကျွန်ုပ်တို့၏ CDN လင့်ခ် များအကြောင်း ပိုမိုလေ့လာပါ ။<head><script></body>

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

Popper နှင့် ကျွန်ုပ်တို့၏ JS တို့ကို သီးခြားစီ ထည့်သွင်းနိုင်သည် ။ အကယ်၍ သင်သည် dropdowns၊ popovers သို့မဟုတ် tooltips များကို အသုံးမပြုပါက Popper မပါဝင်ဘဲ ကီလိုဘိုက်အချို့ကို သိမ်းဆည်းပါ။

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

မင်္ဂလာပါကမ္ဘာလောက! သင်၏ Bootstrapped စာမျက်နှာကိုကြည့်ရှုရန် သင့်ရွေးချယ်သောဘရောက်ဆာတွင် စာမျက်နှာကိုဖွင့်ပါ။ ယခုတွင် သင်သည် သင်၏ကိုယ်ပိုင် အပြင်အဆင် ကို ဖန်တီးကာ အစိတ်အပိုင်း များစွာကို ထည့်သွင်း ကာ ကျွန်ုပ်တို့၏ တရားဝင်ဥပမာ များကို အသုံးပြုခြင်း ဖြင့် Bootstrap ဖြင့် စတင်တည်ဆောက်နိုင်ပြီ ဖြစ်သည်။

CDN လင့်ခ်များ

အကိုးအကားအဖြစ်၊ ဤသည်မှာ ကျွန်ုပ်တို့၏ အဓိက CDN လင့်ခ်များဖြစ်သည်။

ဖော်ပြချက်	URL
CSS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css`
JS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js`

Contents page တွင်ဖော်ပြထားသော ကျွန်ုပ်တို့၏နောက်ထပ်တည်ဆောက်မှု မှန်သမျှကို ရယူရန် CDN ကို သင်အသုံးပြုနိုင်သည် ။

နောက်တစ်ဆင့်

Bootstrap အသုံးပြု သည့် အရေးကြီးသော ကမ္ဘာလုံးဆိုင်ရာ ပတ်၀န်းကျင်ဆက်တင် အချို့အကြောင်း အနည်းငယ် ပိုမိုဖတ်ရှုပါ ။
ကျွန်ုပ်တို့ ၏အကြောင်းအရာများကဏ္ဍ ရှိ Bootstrap တွင်ပါဝင်သည့်အရာများ နှင့် အောက်တွင် JavaScript လိုအပ် သည့်အစိတ်အပိုင်းများစာရင်းကို ဖတ် ပါ။
ပါဝါနည်းနည်းပိုလိုပါသလား။ ပက် ကေ့ဂျ်မန်နေဂျာမှတစ်ဆင့် အရင်းအမြစ်ဖိုင်များကို ထည့် သွင်းခြင်းဖြင့် Bootstrap ဖြင့် တည်ဆောက်ရန် စဉ်းစားပါ ။
Bootstrap ကို module တစ်ခုအနေဖြင့်အသုံးပြုရန်ရှာဖွေနေ <script type="module">ပါသလား။ ကျေးဇူးပြု၍ ကျွန်ုပ်တို့၏ Bootstrap ကို အသုံးပြုသည့် module အပိုင်းအဖြစ် ကိုးကားပါ။

JS အစိတ်အပိုင်းများ

ကျွန်ုပ်တို့၏ JavaScript နှင့် Popper သည် မည်သည့်အစိတ်အပိုင်းများကို အထူးတလည်လိုအပ်နေသနည်း။ အောက်က show components link ကိုနှိပ်ပါ။ ယေဘူယျ စာမျက်နှာဖွဲ့စည်းပုံနှင့် ပတ်သက်၍ မသေချာပါက ဥပမာ စာမျက်နှာ နမူနာပုံစံကို ဆက်လက်ဖတ်ရှုပါ။

JavaScript လိုအပ်သော အစိတ်အပိုင်းများကို ပြပါ။

ပယ်ရန် သတိပေးချက်များ
ပြည်နယ်များကို ခလုတ်ဖွင့်ရန်နှင့် အမှန်ခြစ်ဘောက်စ်/ရေဒီယို လုပ်ဆောင်နိုင်စွမ်းအတွက် ခလုတ်များ
ဆလိုက်အပြုအမူများ၊ ထိန်းချုပ်မှုများ၊ နှင့် အညွှန်းများအားလုံးအတွက် ဝိုင်းလေး
အကြောင်းအရာ၏ မြင်နိုင်စွမ်းကို ပြောင်းရန်အတွက် ခေါက်သိမ်းပါ။
ပြသရန် နှင့် နေရာချထားခြင်းအတွက် dropdowns ( Popper လိုအပ်သည် )
ပြသခြင်း၊ နေရာချထားခြင်းနှင့် လှိမ့်ခြင်းအပြုအမူအတွက် မော်ဒယ်များ
တုံ့ပြန်မှုအပြုအမူများကိုအကောင်အထည်ဖော်ရန် ကျွန်ုပ်တို့၏ခေါက်သိမ်းမှုနှင့် Offcanvas ပလပ်အင်များကို တိုးချဲ့ရန်အတွက် Navbar
အကြောင်းအရာအကန့်များကို ပြောင်းရန်အတွက် တဘ်ပလပ်အင်ဖြင့် ရေကြောင်းများ
ပြသရန်၊ နေရာချထားခြင်း၊ နှင့် scroll အပြုအမူအတွက် အကွက်များ
Scrollspy သည် လှုပ်ရှားမှုနှင့် လမ်းကြောင်းပြခြင်းဆိုင်ရာ အပ်ဒိတ်များအတွက် Scrollspy
ပြသရန်နှင့် ပယ်ရန် ဆန္ဒပြုမှုများ
ပြသခြင်းနှင့် နေရာချထားခြင်းအတွက် ကိရိယာအကြံပြုချက်များ နှင့် popovers ( Popper လည်း လိုအပ်သည် )

အရေးကြီးသောကမ္ဘာများ

Bootstrap သည် အရေးကြီးသော ကမ္ဘာလုံးဆိုင်ရာပုံစံများနှင့် ဆက်တင်များလက်တစ်ဆုပ်စာကို အသုံးပြုထားပြီး ၎င်းတို့အားလုံးနီးပါးသည် ဘရောက်ဆာစတိုင်များကို ပုံမှန်ဖြစ်စေရန် အတွက် သီးသန့်နီးပါးဖြစ်သည်။ ငုပ်ကြစို့။

HTML5 စာတမ်းအမျိုးအစား

Bootstrap သည် HTML5 doctype ကိုအသုံးပြုရန်လိုအပ်သည်။ အဲဒါမရှိရင်၊ ရယ်စရာကောင်းပြီး မပြည့်စုံတဲ့ပုံစံကို သင်တွေ့ပါလိမ့်မယ်။

<!doctype html>
<html lang="en">
  ...
</html>

တုံ့ပြန်မှုရှိသော မက်တာတက်ဂ်

Bootstrap သည် မိုဘိုင်းလ်ကို ဦးစွာ တီထွင် ထား ခြင်းဖြစ်ပြီး၊ ကျွန်ုပ်တို့သည် မိုဘိုင်းလ်စက်ပစ္စည်းများအတွက် ကုဒ်ကို ဦးစွာ အကောင်းဆုံးဖြစ်အောင် လုပ်ဆောင်ပြီးနောက် CSS မီဒီယာမေးမြန်းချက်များကို အသုံးပြု၍ လိုအပ်သလို အစိတ်အပိုင်းများကို အတိုင်းအတာအထိ ချဲ့ထွင်သည့် ဗျူဟာတစ်ခုဖြစ်သည်။ စက်အားလုံးအတွက် သင့်လျော်သော သရုပ်ဖော်ခြင်းနှင့် ထိခြင်းချဲ့ခြင်းတို့ကို သေချာစေရန်၊ တုံ့ပြန်မှုရှိသော viewport မက်တာတက်ဂ်ကို သင်၏ <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

အမြန်စတင်ခြင်း တွင် ဤလုပ်ဆောင်ချက်၏ ဥပမာတစ်ခုကို သင်တွေ့မြင်နိုင်ပါသည် ။

သေတ္တာအရွယ်အစား

CSS တွင် ပိုမိုရိုးရှင်းသောအရွယ်အစားအတွက် ၊ ကျွန်ုပ်တို့သည် ကမ္ဘာလုံးဆိုင်ရာ box-sizingတန်ဖိုးကို content-box. border-box၎င်းသည် paddingဒြပ်စင်တစ်ခု၏ နောက်ဆုံးတွက်ချက်ထားသော အကျယ်ကို မထိခိုက်စေကြောင်း သေချာသော်လည်း ၎င်းသည် Google Maps နှင့် Google Custom Search Engine ကဲ့သို့သော ပြင်ပဆော့ဖ်ဝဲလ်အချို့ကို ပြဿနာဖြစ်စေနိုင်သည်။

ရှားရှားပါးပါး အခါသမယတွင် ၎င်းကို ထပ်ရန်လိုသည်၊ အောက်ပါကဲ့သို့ တစ်ခုခုကို အသုံးပြုပါ။

.selector-for-some-widget {
  box-sizing: content-box;
}

အထက်ဖော်ပြပါ အတိုအထွာများဖြင့်၊ ထုတ်လုပ်လိုက်သော အကြောင်းအရာများ အပါအဝင်၊ အစုအဝေး အစိတ်အပိုင်းများ— ::beforeအားလုံးသည် ၎င်း အတွက် ::afterသတ်မှတ်ထားသည့် အရာများကို အမွေဆက်ခံ မည်ဖြစ်သည်။box-sizing.selector-for-some-widget

CSS Tricks တွင် အကွက်ပုံစံနှင့် အရွယ်အစား အကြောင်း ပိုမိုလေ့လာပါ ။

ပြန်ဖွင့်ပါ။

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

ရပ်ရွာ

Bootstrap ဖွံ့ဖြိုးတိုးတက်မှုအတွက် နောက်ဆုံးပေါ်နေနှင့် ဤအသုံးဝင်သောအရင်းအမြစ်များဖြင့် အသိုင်းအဝိုင်းထံ ဆက်သွယ်ပါ။

တရားဝင် Bootstrap Blog ကိုဖတ်ပြီး စာရင်းသွင်းပါ ။
ကျွန်ုပ်တို့၏ GitHub ဆွေးနွေးချက်များ ကို မေးမြန်းစူးစမ်းပါ ။
IRC ရှိ Bootstrappers များနှင့် စကားပြောပါ။ irc.libera.chatဆာဗာပေါ်တွင်၊ ချန်နယ် #bootstrapတွင်။
အကောင်အထည်ဖော်ရေးအကူအညီကို Stack Overflow (tagged bootstrap-5) တွင် ရှာတွေ့နိုင်ပါသည်။
ဆော့ဖ်ဝဲရေးသားသူများသည် npm သို့မဟုတ် အလားတူပေးပို့မှုယန္တရားများ bootstrapမှတဆင့် ဖြန့်ဝေသောအခါတွင် Bootstrap ၏လုပ်ဆောင်နိုင်စွမ်းကို ပြုပြင်မွမ်းမံခြင်း သို့မဟုတ် ပေါင်းထည့်သည့် အထုပ်များတွင် အဓိကစကားလုံးကို အသုံးပြုသင့်သည် ။

နောက်ဆုံးထွက် အတင်းအဖျင်းနှင့် အမိုက်စား တေးဂီတဗီဒီယိုများအတွက် Twitter တွင် @getbootstrap ကိုလည်း လိုက် ကြည့်နိုင်ပါသည်။