အဓိကအကြောင်းအရာသို့ ကျော်သွားပါ။ စာရွက်စာတမ်းလမ်းညွှန်မှုသို့ ကျော်သွားပါ။
in English

နိဒါန်း

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

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

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

သင့်ပရောဂျက်သို့ Bootstrap အမြန်ထည့်လိုပါသလား။ အခမဲ့ open source CDN jsDelivr ကိုသုံးပါ။ ပက်ကေ့ဂျ်မန်နေဂျာကို အသုံးပြုခြင်း သို့မဟုတ် အရင်းအမြစ်ဖိုင်များကို ဒေါင်းလုဒ်လုပ်ရန် လိုအပ်ပါသလား။ ဒေါင်းလုဒ်စာမျက်နှာသို့သွားပါ ။

CSS

ကျွန်ုပ်တို့၏ CSS ကိုတင်ရန် အခြားစတိုင်စာရွက်များရှေ့တွင် စတိုင်စာရွက်ကို ကော်ပီကူးထည့် <link>ပါ ။<head>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

JS

ကျွန်ုပ်တို့၏ အစိတ်အပိုင်းများစွာကို လုပ်ဆောင်ရန် JavaScript ကို အသုံးပြုရန် လိုအပ်သည်။ အထူးသဖြင့်၊ ၎င်းတို့သည် ကျွန်ုပ်တို့၏ကိုယ်ပိုင် JavaScript ပလပ်အင်များနှင့် Popper လိုအပ်ပါသည် ။ ၎င်းတို့ကို ဖွင့ ် ရန်အတွက် သင့်စာမျက်နှာများ၏ အဆုံးအနီး၊ အပိတ် tag မတိုင်မီတွင် အောက်ပါ များထဲမှ တစ်ခုကို<script></body> ထားပါ ။

အတွဲ

Bootstrap JavaScript ပလပ်အင်တိုင်းနှင့် ကျွန်ုပ်တို့၏အစုအဝေးနှစ်ခုထဲမှ တစ်ခုနှင့် မှီခိုမှုတို့ကို ထည့်သွင်းပါ။ နှစ်ခုလုံး bootstrap.bundle.jsနှင့် ကျွန်ုပ်တို့၏ tooltips နှင့် popovers အတွက် Popperbootstrap.bundle.min.js ပါဝင်သည် ။ Bootstrap တွင် ပါ၀င်သည်များအကြောင်း နောက်ထပ်အချက်အလက်များအတွက်၊ ကျွန်ုပ်တို့၏ အကြောင်းအရာများ ကဏ္ဍကို ကြည့်ပါ။

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

သပ်သပ်

အကယ်၍ သင်သည် သီးခြား scripts ဖြေရှင်းချက်ဖြင့် သွားရန် ဆုံးဖြတ်ပါက၊ Popper သည် ဦးစွာ (သင်သည် tooltips သို့မဟုတ် popovers များကို အသုံးပြုနေပါက)၊ ထို့နောက် ကျွန်ုပ်တို့၏ JavaScript plugins များကို အရင်လာရပါမည်။

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

မော်ဂျူးများ

အကယ်၍ သင်အသုံးပြု ပါက၊ ကျွန်ုပ်တို့၏ Bootstrap ကိုအသုံးပြုသည့် module အပိုင်းအဖြစ်<script type="module"> ကျေးဇူးပြု၍ ကိုးကားပါ ။

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

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

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

စတင်သူ နမူနာပုံစံ

သင်၏စာမျက်နှာများကို နောက်ဆုံးပေါ်ဒီဇိုင်းနှင့် ဖွံ့ဖြိုးတိုးတက်မှုစံချိန်စံညွှန်းများဖြင့် တည်ဆောက်ထားရန် သေချာပါစေ။ ဆိုလိုသည်မှာ HTML5 doctype ကိုအသုံးပြုခြင်းနှင့် သင့်လျော်သောတုံ့ပြန်မှုပြုမူများအတွက် viewport meta tag အပါအဝင်ဖြစ်သည်။ အဲဒါတွေအားလုံးကို ပေါင်းပြီး သင့်စာမျက်နှာတွေက ဒီလိုမျိုး ဖြစ်သင့်ပါတယ်-

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

နောက်အဆင့်များအတွက်၊ သင့်ဆိုက်၏အကြောင်းအရာနှင့် အစိတ်အပိုင်းများကို စတင် ဖော်ပြရန် Layout docs သို့မဟုတ် ကျွန်ုပ်တို့၏ တရားဝင်နမူနာ များကို ဝင်ရောက်ကြည့်ရှုပါ။

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

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">

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

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

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

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