ငြမ်း

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

HTML5 doctype လိုအပ်သည်။

Bootstrap သည် HTML5 doctype ကိုအသုံးပြုရန်လိုအပ်သော HTML ဒြပ်စင်များနှင့် CSS ဂုဏ်သတ္တိများကိုအသုံးပြုသည်။ သင့်ပရောဂျက်ရှိ Bootstrapped စာမျက်နှာတိုင်း၏အစတွင် ၎င်းကို ထည့်သွင်းရန်သေချာပါစေ။

<!DOCTYPE html>
<html lang = "en" > 
  ...
</html>

စာစီစာရိုက်နှင့် လင့်ခ်များ

scaffolding.less ဖိုင် အတွင်း၊ ကျွန်ုပ်တို့သည် အခြေခံ ကမ္ဘာလုံးဆိုင်ရာ ပြသမှု၊ စာစီစာရိုက်နှင့် လင့်ခ်ပုံစံများကို သတ်မှတ်ပေးပါသည်။ အတိအကျအားဖြင့်၊ ကျွန်ုပ်တို့:

ခန္ဓာကိုယ်ရှိ အနားသတ်များကို ဖယ်ရှားပါ။
background-color: white;ပေါ်တွင် သတ်မှတ်body
ကျွန်ုပ်တို့၏ စာစီစာရိုက်အခြေခံအဖြစ် @baseFontFamily, @baseFontSize, နှင့် အရည်အချင်းများ ကို အသုံးပြုပါ။@baseLineHeight
ကမ္ဘာလုံးဆိုင်ရာ လင့်ခ်အရောင်ကို သတ်မှတ်ပြီး @linkColorလင့်ခ်မျဉ်းကြောင်းများကိုသာ ဖွင့်ပါ။:hover

Normalize မှတဆင့် ပြန်လည်သတ်မှတ်ပါ။

Bootstrap 2 တွင်၊ ရိုးရာ CSS ပြန်လည်သတ်မှတ်မှုသည် HTML5 Boilerplate ကိုလည်း စွမ်းဆောင်ပေး သည့် Nicolas Gallagher ၏ ပရောဂျက်ဖြစ်သော Normalize.css မှ ဒြပ်စင်များကို အသုံးပြုရန် တိုးတက်လာသည် ။

အသစ်ပြန်လည်သတ်မှတ်ခြင်းကို reset.less တွင် ဆက်လက်တွေ့ရှိ နိုင်သော်လည်း အတိုချုံးနှင့် တိကျမှုအတွက် ဒြပ်စင်များစွာကို ဖယ်ရှားထားသည်။

၁

၄

၈

၆

၁၂

Bootstrap တွင် ပေးထားသည့် မူရင်းဇယားကွက်စနစ်သည် အကျယ် 724px၊ 940px (တုံ့ပြန်မှု CSS မပါဝင်) နှင့် 1170px တွင် ထုတ်ပေးသည့် ကော်လံ 12 ခုကို အသုံးပြုသည်။ 767px viewports အောက်တွင်၊ ကော်လံများသည် အရည်များဖြစ်လာပြီး ဒေါင်လိုက်အကွက်များ။

<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 = "span6" > 
    အဆင့် 1 ကော်လံ
    <div class = "row" > 
      <div class = "span3" > အဆင့် 2 </div> 
      <div class = "span3" > အဆင့် 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	ကော်လံများကြားတွင် အနုတ်လက္ခဏာနေရာ

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>

တုံ့ပြန်မှုကိရိယာများ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

တုံ့ပြန်နိုင်သော အသုံးဝင်မှုသင်တန်းများ

အဲဒါတွေကဘာလဲ

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

ဘယ်အချိန်မှာ သုံးမလဲ။

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

ဥပမာအားဖြင့်၊ သင်သည် <select>မိုဘိုင်းအပြင်အဆင်များပေါ်တွင် nav အတွက် အစိတ်အပိုင်းတစ်ခုကို ပြသနိုင်သော်လည်း တက်ဘလက်များ သို့မဟုတ် ဒက်စ်တော့များတွင် မဟုတ်ပါ။

ပံ့ပိုးမှုသင်တန်းများ

ဤနေရာတွင် ပြထားသည်မှာ ကျွန်ုပ်တို့ ပံ့ပိုးပေးသည့် အတန်းများ၏ ဇယားတစ်ခုဖြစ်ပြီး ပေးထားသော မီဒီယာမေးမြန်းမှု အပြင်အဆင် (စက်ဖြင့် အညွှန်းတပ်ထားသည်) ပေါ်တွင် ၎င်းတို့၏ အကျိုးသက်ရောက်မှုများ။ တွင်တွေ့နိုင်သည် responsive.less။

အတန်း	ဖုန်းများ480px နှင့် အောက်	တက်ဘလက်များ767px နှင့် အောက်	တော်ပြီ။768px နှင့် အထက်
`.visible-phone`	မြင်သာသည်။	ဝှက်ထားသည်။	ဝှက်ထားသည်။
`.visible-tablet`	ဝှက်ထားသည်။	မြင်သာသည်။	ဝှက်ထားသည်။
`.visible-desktop`	ဝှက်ထားသည်။	ဝှက်ထားသည်။	မြင်သာသည်။
`.hidden-phone`	ဝှက်ထားသည်။	မြင်သာသည်။	မြင်သာသည်။
`.hidden-tablet`	မြင်သာသည်။	ဝှက်ထားသည်။	မြင်သာသည်။
`.hidden-desktop`	မြင်သာသည်။	မြင်သာသည်။	ဝှက်ထားသည်။

စာမေးပွဲကိစ္စ

အထက်ဖော်ပြပါ အတန်းများကို စမ်းသပ်ရန် သင့်ဘရောက်ဆာကို အရွယ်အစားပြောင်းပါ သို့မဟုတ် မတူညီသော စက်များတွင် တင်ပါ။

မြင်နိုင်သည်...

အစိမ်းရောင် checkmarks များသည် သင့်လက်ရှိ viewport တွင် class ကို မြင်နိုင်သည်ဟု ညွှန်ပြပါသည်။

ဖုန်း✔ ဖုန်း
တက်ဘလက်✔ တက်ဘလက်
ဒက်ဒီ✔ Desktop

ဝှက်ထားသည်...

ဤတွင်၊ အစိမ်းရောင် အမှတ်အသားများသည် သင်၏ လက်ရှိရှုထောင့်တွင် အတန်းကို ဝှက်ထားကြောင်း ဖော်ပြသည်။

ဖုန်း✔ ဖုန်း
တက်ဘလက်✔ တက်ဘလက်
ဒက်ဒီ✔ Desktop