ငြမ်း

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

၁

၄

၈

၆

၁၂

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*

ဥပမာ

Nested အတန်းများတွင် ၎င်း၏ ပင်မကော်လံအရေအတွက်အထိ ပေါင်းထည့်သည့် ကော်လံအစုတစ်ခု ပါဝင်သင့်သည်။ ဥပမာအားဖြင့်၊ .span3တစ်ခုအတွင်းတွင် nested ကော်လံနှစ်ခုကို ထားရှိသင့်သည် .span6။

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

အဆင့် ၂

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

အရည်ကော်လံများ

၁

၄

၈

၆

၁၂

ရာခိုင်နှုန်းများ၊ ပစ်ဇယ်များ မဟုတ်ပါ။

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

အရည်တန်း

မည်သည့်အတန်းအရည်ကိုမဆို ရိုးရှင်းစွာပြောင်းလဲခြင်းဖြင့် ပြုလုပ် .rowပါ .row-fluid။ ကော်လံများသည် အတိအကျတူညီနေသဖြင့် fixed နှင့် fluid layout များကြားလှန်ရန် အလွန်ရိုးရှင်းပါသည်။

သေား

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

အရည် အသိုက်

fluid grid ဖြင့် အသိုက်ပြုလုပ်ခြင်းသည် အနည်းငယ်ကွဲပြားသည်- nested columns အရေအတွက်သည် parent နှင့် ကိုက်ညီရန် မလိုအပ်ပါ။ ယင်းအစား၊ အတန်းတစ်ခုစီသည် ပင်မကော်လံ၏ 100% နေရာယူသောကြောင့် အဆင့်တစ်ခုစီတွင် သင့်ကော်လံများကို ပြန်လည်သတ်မှတ်ထားသည်။

အရည် ၁၂

အရည် ၆

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

ပြောင်းလဲနိုင်သော	မူလတန်ဖိုး	ဖော်ပြချက်
`@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 မှ 979px	42px	20px
ပုံသေ	980px နှင့်အထက်	60px	20px
ကြီးမားသောပြသမှု	1210px နှင့်အထက်	70px	30px

မက်တာတက်ဂ် လိုအပ်သည်။

စက်များသည် တုံ့ပြန်မှုစာမျက်နှာများကို မှန်ကန်စွာပြသကြောင်း သေချာစေရန်၊ viewport မက်တာတဂ်ကို ထည့်သွင်းပါ။

<meta name = "viewport" content = "width=device-width၊ initial-scale=1.0" >

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

မီဒီယာမေးမြန်းချက်များသည် အခြေအနေများစွာ—အချိုးအစား၊ အနံ၊ ဖော်ပြမှု အမျိုးအစားစသည်-စသည်တို့အပေါ် အခြေခံ၍ စိတ်ကြိုက် 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 : 980px ) { ... }        
 
  // ဒက်ဒီကြီး
  @media ( မိနစ် - အကျယ် : 1200px ) { .. }