ငြမ်း

Bootstrap ကို တုံ့ပြန်မှု 12-ကော်လံဇယားပေါ်တွင် တည်ဆောက်ထားသည်။ ကျွန်ုပ်တို့သည် ထိုစနစ်အပေါ်အခြေခံ၍ ပုံသေ နှင့် fluid-width အပြင်အဆင်များပါ၀င်ပါသည်။

မူရင်း 940px ဇယားကွက်

၁

၄

၈

၆

၁၂

Bootstrap ၏ တစ်စိတ်တစ်ပိုင်းအဖြစ် ပံ့ပိုးပေးထားသည့် မူရင်းဂရစ်စနစ်သည် 940px ကျယ်ဝန်းသော၊ 12-ကော်လံဇယား ဖြစ်သည်။

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

<div class = "row" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

ဤနေရာတွင် ပြထားသည့်အတိုင်း၊ ကျွန်ုပ်တို့၏ grid စနစ်၏ တစ်စိတ်တစ်ပိုင်းအဖြစ် ကျွန်ုပ်တို့သတ်မှတ်ထားသော အခြေခံကော်လံ ၁၂ ခု၏ တစ်ခုစီကို "ကော်လံ" နှစ်ခုဖြင့် အခြေခံ အပြင်အဆင်ကို ဖန်တီးနိုင်သည်။

နှိမ်ခံကော်လံ

၄

၄ ထေရ ၄

၃ ထေရ ၃

၈ ထေရ ၄

<div class = "row" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset4" > ... </div> 
</div>

အသိုက်ကော်လံများ

Bootstrap ရှိ static (အရည်မဟုတ်သော) ဂရစ်စနစ်ဖြင့်၊ nesting လုပ်ရန်လွယ်ကူသည်။ သင့်အကြောင်းအရာကို စုစည်းရန်၊ ရှိပြီးသား ကော်လံတစ်ခုအတွင်း ကော်လံ အသစ်တစ်ခု .rowနှင့် အစုံ လိုက်ကို ပေါင်းထည့်လိုက်ပါ ။.span*.span*

ဥပမာ

ကော်လံအဆင့် ၁

အဆင့် ၂

<div class = "row" > 
  <div class = "span12" > 
    ကော်လံအဆင့် ၁
    <div class = "row" > 
      <div class = "span6" > အဆင့် 2 </div> 
      <div class = "span6" > အဆင့် 2 </div> 
    </div>
  </div>
</div>

Grid စိတ်ကြိုက်ပြင်ဆင်ခြင်း။

ပြောင်းလဲနိုင်သော	မူလတန်ဖိုး	ဖော်ပြချက်
`@gridColumns`	၁၂	ကော်လံအရေအတွက်
`@gridColumnWidth`	60px	ကော်လံတစ်ခုစီ၏ အကျယ်
`@gridGutterWidth`	20px	ကော်လံများကြားတွင် အနုတ်လက္ခဏာဆောင်သည့်နေရာ
`@siteWidth`	ကော်လံများနှင့် ရေမြောင်းအားလုံး၏ ပေါင်းလဒ်ကို တွက်ချက်ထားသည်။	`.container-fixed()`Mixin ၏ အကျယ်ကို သတ်မှတ်ရန် ကော်လံများနှင့် ရေမြောင်းများ အရေအတွက်ကို ရေတွက်ပါ။

LESS တွင် ကိန်းရှင်များ

Bootstrap တွင်ထည့်သွင်းထားသော default 940px grid system ကို စိတ်ကြိုက်ပြင်ဆင်ရန်အတွက် လက်တစ်ဆုပ်စာသည် အထက်တွင်မှတ်တမ်းတင်ထားသော ကိန်းရှင်များဖြစ်သည်။ ဂရစ်အတွက် variable အားလုံးကို variables.less တွင် သိမ်းဆည်းထားသည်။

စိတ်ကြိုက်လုပ်နည်း

ဇယားကွက်ကို မွမ်းမံခြင်းဆိုသည်မှာ ကိန်းရှင်သုံးခုကို @grid*ပြောင်းလဲခြင်းနှင့် Bootstrap ပြန်လည်ပေါင်းစည်းခြင်းကို ဆိုလိုသည်။ grid variable များကို variables.less တွင် ပြောင်းပြီး ပြန်လည်ပေါင်းစည်းရန် မှတ်တမ်းတင်ထားသော နည်းလမ်းလေးခု ထဲမှ တစ်ခုကို အသုံးပြုပါ ။ အကယ်၍ သင်သည် နောက်ထပ်ကော်လံများကို ထပ်ထည့်ပါက၊ grid.less ရှိသူများအတွက် CSS ကို ထည့်ရန်သေချာပါစေ။

တုံ့ပြန်မှုရှိနေခြင်း။

ဇယားကွက်ကို စိတ်ကြိုက်ပြင်ဆင်ခြင်းသည် 940px ဇယားကွက်တွင်သာ အလုပ်လုပ်ပါသည်။ Bootstrap ၏ တုံ့ပြန်မှုဆိုင်ရာ ကဏ္ဍများကို ဆက်လက်ထိန်းသိမ်းထားရန်၊ သင်သည် responsive.less တွင် ဂရစ်များကို စိတ်ကြိုက်ပြင်ဆင်ရပါမည်။

ပုံသေ အပြင်အဆင်

ပုံသေနှင့် ရိုးရှင်းသော 940px ကျယ်ဝန်းသော၊ တစ်ခုတည်းသော ဝဘ်ဆိုဒ် သို့မဟုတ် စာမျက်နှာတစ်ခုအတွက် ပံ့ပိုးပေးသည့် မည်သည့်ဝဘ်ဆိုဒ် သို့မဟုတ် စာမျက်နှာအတွက်မဆို ဗဟိုပြုထားသော အပြင်အဆင် <div class="container">။

<body>
  <div class = "container" > 
    ...
  </div>
</body>

အရည် အဆင်အပြင်

<div class="container-fluid">ပြောင်းလွယ်ပြင်လွယ်ရှိသော စာမျက်နှာဖွဲ့စည်းပုံ၊ min- နှင့် max-widths နှင့် ဘယ်ဘက် sidebar ကို ပေးသည်။ အက်ပ်များနှင့် စာရွက်စာတမ်းများအတွက် အလွန်ကောင်းမွန်သည်။

<div class = "container-fluid" > 
  <div class = "row-fluid" > 
    <div class = "span2" > 
      <!---Sidebar အကြောင်းအရာ-->
    </div>
    <div class = "span10" > 
      <!---ကိုယ်ထည် အကြောင်းအရာ-->
    </div>
  </div>
</div>

ပံ့ပိုးထားသော စက်များ

Bootstrap သည် မတူညီသော စက်များနှင့် မျက်နှာပြင် ရုပ်ထွက်များပေါ်တွင် သင့်ပရောဂျက်များကို ပိုမိုသင့်လျော်စေရန် ကူညီပေးရန် မီဒီယာမေးမြန်းချက်လက်တစ်ဆုပ်စာကို ပံ့ပိုးပေးပါသည်။ ဤတွင် ပါဝင်သည်-

တံဆိပ်	အပြင်အဆင် အကျယ်	ကော်လံအကျယ်	ရေမြောင်းအကျယ်
စမတ်ဖုန်းများ	480px နှင့် အောက်	အရည်ကော်လံများ၊ ပုံသေအကျယ်များမရှိပါ။
ပုံတူတက်ဘလက်များ	480px မှ 768px	အရည်ကော်လံများ၊ ပုံသေအကျယ်များမရှိပါ။
ရှုခင်းကျောက်ပြားများ	768px မှ 940px	44px	20px
ပုံသေ	940px နှင့်အထက်	60px	20px
ကြီးမားသောပြသမှု	1210px နှင့်အထက်	70px	30px

သူတို့ဘာလုပ်တာလဲ။

မီဒီယာမေးမြန်းချက်များသည် အခြေအနေများစွာ—အချိုးအစား၊ အနံ၊ ဖော်ပြမှု အမျိုးအစားစသည်-စသည်တို့အပေါ် အခြေခံ၍ စိတ်ကြိုက် CSS ကို ခွင့်ပြုပေးသော်လည်း အများအားဖြင့် ပတ်လည် min-widthနှင့် max-width.

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

မီဒီယာမေးခွန်းများကို အသုံးပြု

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

စုစည်းထားသော တုံ့ပြန်မှုဗားရှင်း၊ bootstrap-responsive.css ကို အသုံးပြုပါ။
@import "responsive.less" ကိုထည့်၍ Bootstrap ကို ပြန်လည်စုစည်းပါ။
သီးခြားအဖြစ် responsive.less ကို ပြင်ဆင်ပြီး ပြန်လည်ပေါင်းစည်းပါ။

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

  // အခင်းအကျင်း ဖုန်းတွေနဲ့ ဆင်းတယ်။
  @media ( အများဆုံး - အကျယ် : 480px ) { ... }     
 
  // ပုံတူတက်ဘလက်သို့ ဖုန်းအခင်းအကျင်း
  @media ( အများဆုံး - အကျယ် : 768px ) { ... }     
 
  // တက်ဘလက်ကို အခင်းအကျင်းနှင့် ဒက်စ်တော့သို့ ပုံတူရိုက်ပါ။
  @media ( min - width : 768px ) နှင့် ( အများဆုံး - width : 940px ) { ... }        
 
  // ဒက်စတော့ကြီးကြီး
  @media ( မိနစ် - အကျယ် : 1200px ) { .. }