in English

နိဒါန်း

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

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

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

CSS

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

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

JS

ကျွန်ုပ်တို့၏ အစိတ်အပိုင်းများစွာကို လုပ်ဆောင်ရန် JavaScript ကို အသုံးပြုရန် လိုအပ်သည်။ အထူးသဖြင့်၊ ၎င်းတို့သည် jQuery ၊ Popper နှင့် ကျွန်ုပ်တို့၏ကိုယ်ပိုင် JavaScript ပလပ်အင်များ လိုအပ်ပါသည်။ ကျွန်ုပ်တို့သည် jQuery ၏ ပါးလွှာသောတည်ဆောက်မှု ကို အသုံးပြု သော်လည်း ဗားရှင်းအပြည့်အစုံကိုလည်း ပံ့ပိုးထားသည်။

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

အတွဲ

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

သပ်သပ်

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

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

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

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

စတင်သူပုံစံ

သင်၏စာမျက်နှာများကို နောက်ဆုံးပေါ်ဒီဇိုင်းနှင့် ဖွံ့ဖြိုးတိုးတက်မှုစံချိန်စံညွှန်းများဖြင့် တည်ဆောက်ထားရန် သေချာပါစေ။ ဆိုလိုသည်မှာ 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, shrink-to-fit=no">

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

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

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

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" 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, shrink-to-fit=no">

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-4) တွင် ရှာတွေ့နိုင်ပါသည်။
  • ဆော့ဖ်ဝဲရေးသားသူများသည် npm သို့မဟုတ် အလားတူပေးပို့မှုယန္တရားများ bootstrapမှတဆင့် ဖြန့်ဝေသောအခါတွင် Bootstrap ၏လုပ်ဆောင်နိုင်စွမ်းကို ပြုပြင်မွမ်းမံခြင်း သို့မဟုတ် ပေါင်းထည့်သည့် အထုပ်များတွင် အဓိကစကားလုံးကို အသုံးပြုသင့်သည် ။

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

CSP များနှင့် မြှုပ်သွင်းထားသော SVGs

Bootstrap အစိတ်အပိုင်းအများအပြားတွင် ဘရောက်ဆာများနှင့် စက်များတစ်လျှောက်တွင် အစိတ်အပိုင်းများကို တသမတ်တည်းနှင့် လွယ်ကူစွာ ပုံစံသွင်းနိုင်ရန် ကျွန်ုပ်တို့၏ CSS တွင် ထည့်သွင်းထားသော SVGs များပါဝင်သည်။ ပိုမိုတင်းကျပ်သော CSP ဖွဲ့စည်းမှုပုံစံများ ရှိသော အဖွဲ့အစည်းများအတွက် ၊ ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏ထည့်သွင်းထားသော SVGs (အားလုံးမှတဆင့် အသုံးပြုထားသည့် background-image) ဖြစ်ရပ်အားလုံးကို မှတ်တမ်းတင်ထားပြီးဖြစ်သောကြောင့် သင့်ရွေးချယ်မှုများကို ပိုမိုသေချာစွာ ပြန်လည်သုံးသပ်နိုင်ပါသည်။

ကွန်မြူနတီစကားပြောဆိုမှု အပေါ် အခြေခံ၍ သင့်ကိုယ်ပိုင်ကုဒ်ဘေ့စ်တွင် ၎င်းကိုဖြေရှင်းရန်အတွက် အချို့သောရွေးချယ်မှုများတွင် URL များကို စက်တွင်းလက်ခံထားသောပိုင်ဆိုင်မှုများနှင့် အစားထိုးခြင်း၊ ပုံများကိုဖယ်ရှားခြင်းနှင့် inline ပုံများကိုအသုံးပြုခြင်း (အစိတ်အပိုင်းအားလုံးတွင်မဖြစ်နိုင်ပါ) နှင့် သင်၏ CSP ကိုမွမ်းမံခြင်းတို့ပါဝင်သည်။ ကျွန်ုပ်တို့၏အကြံပြုချက်မှာ သင့်ကိုယ်ပိုင်လုံခြုံရေးမူဝါဒများကို ဂရုတစိုက်ပြန်လည်သုံးသပ်ရန်နှင့် လိုအပ်ပါက ရှေ့သို့အကောင်းဆုံးလမ်းကြောင်းတစ်ခုပေါ်တွင် ဆုံးဖြတ်ရန်ဖြစ်သည်။