Source

နိဒါန်း

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

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

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

CSS

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

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

JS

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

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

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

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

JavaScript လိုအပ်သော အစိတ်အပိုင်းများကို ပြပါ။
  • ပယ်ရန် သတိပေးချက်များ
  • ပြည်နယ်များကို ခလုတ်ဖွင့်ရန်နှင့် အမှန်ခြစ်ဘောက်စ်/ရေဒီယို လုပ်ဆောင်နိုင်စွမ်းအတွက် ခလုတ်များ
  • ဆလိုက်အပြုအမူများ၊ ထိန်းချုပ်မှုများ၊ နှင့် အညွှန်းများအားလုံးအတွက် ဝိုင်းလေး
  • အကြောင်းအရာ၏ မြင်နိုင်စွမ်းကို ပြောင်းရန်အတွက် ခေါက်သိမ်းပါ။
  • ပြသရန် နှင့် နေရာချထားခြင်းအတွက် dropdowns ( Popper.js လိုအပ်သည် )
  • ပြသခြင်း၊ နေရာချထားခြင်းနှင့် လှိမ့်ခြင်းအပြုအမူအတွက် မော်ဒယ်များ
  • တုံ့ပြန်မှုအပြုအမူကိုအကောင်အထည်ဖော်ရန် ကျွန်ုပ်တို့၏ခေါက်သိမ်းမှုပလပ်အင်ကို တိုးချဲ့ရန်အတွက် Navbar
  • ပြသခြင်းနှင့် နေရာချထားခြင်းအတွက် ကိရိယာအကြံပြုချက်များနှင့် popovers ( Popper.js ကိုလည်း လိုအပ်သည် )
  • 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, shrink-to-fit=no">

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

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

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 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 ဖွံ့ဖြိုးတိုးတက်မှုအတွက် နောက်ဆုံးရသတင်းရယူပြီး ဤအသုံးဝင်သောအရင်းအမြစ်များဖြင့် အသိုင်းအဝိုင်းထံ ဆက်သွယ်ပါ။

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

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