ငြမ်း

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

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

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

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

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

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

ဤပုံစံများကို scaffolding.less တွင်တွေ့နိုင် သည် ။

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

Bootstrap 2 ဖြင့်၊ HTML5 Boilerplate ကို ပါဝါပေးသော Nicolas Gallagher နှင့် Jonathan Neal တို့၏ ပရောဂျက် ဖြစ်သော Normalize.css ၏ မျက်နှာသာဖြင့် ပြန်လည်သတ်မှတ်ခြင်း အဟောင်းကို ဖယ်ရှား လိုက်ပါသည် ။ ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏ reset.less တွင် Normalize အများအပြားကို အသုံးပြုနေစဉ် ၊ Bootstrap အတွက် အထူးပြုလုပ်ထားသော အစိတ်အပိုင်းအချို့ကို ကျွန်ုပ်တို့ ဖယ်ရှားလိုက်ပါသည်။

တိုက်ရိုက်ဂရစ်ဥပမာ

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

၁

၂

၃

၄

၅

၉

အခြေခံဇယား HTML

ရိုးရှင်းသော ကော်လံနှစ်ခု အပြင်အဆင်အတွက်၊ တစ်ခုဖန်တီးပြီး သင့်လျော်သော ကော်လံ .rowအရေအတွက်ကို ထည့်ပါ ။ .span*၎င်းသည် 12 ကော်လံဇယားကွက်တစ်ခုဖြစ်သောကြောင့်၊ တစ်ခုစီ .span*သည် ထိုကော်လံ 12 ခု၏ အရေအတွက်ကို ချဲ့ထွင်ပြီး အတန်းတစ်ခုစီအတွက် 12 အထိ အမြဲထည့်သင့်သည် (သို့မဟုတ် ပင်မရှိ ကော်လံအရေအတွက်)။

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

ဤဥပမာဖြင့်၊ ကျွန်ုပ်တို့ တွင် စုစုပေါင်း ကော်လံ ၁၂ ခု .span4နှင့် .span8အတန်း အပြည့်အစုံကို ပြုလုပ်ထားသည်။

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

.offset*အတန်း များကို အသုံးပြု၍ ကော်လံများကို ညာဘက်သို့ ရွှေ့ပါ ။ အတန်းတစ်ခုစီသည် ကော်လံတစ်ခု၏ ဘယ်ဘက်အနားသတ်ကို ကော်လံတစ်ခုလုံးဖြင့် တိုးစေသည်။ ဥပမာ၊ ကော်လံလေးခုကို .offset4ရွှေ့ ပါ။.span4

၄

၃ ထေရီ ၂

၃ ထေရ ၁

၃ ထေရီ ၂

၆ ထေရ ၃

<div class = "row" > 
  <div class = "span4" > ... </div> 
  <div class = "span3 offset2" > ... </div> 
</div>

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

သင့်အကြောင်းအရာကို မူရင်းဇယားကွက်ဖြင့် စုစည်းရန်၊ ရှိပြီးသား ကော်လံတစ်ခုအတွင်း ကော်လံ အသစ် .rowနှင့် ကော်လံအစုံကို ပေါင်းထည့်ပါ ။ Nested အတန်းများတွင် ၎င်း၏ပင်မကော်လံအရေအတွက်အထိ ပေါင်းထည့်သည့် ကော်လံအစုတစ်ခု ပါဝင်သင့်သည်။.span*.span*

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

အဆင့် ၂

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

တိုက်ရိုက်အရည်ဇယားဥပမာ

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

၁

၄

၈

၆

၁၂

အခြေခံ အရည်ဇယား HTML

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

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

အရည်နှိမ်ခြင်း။

ပုံသေဂရစ်စနစ် အော့ဖ်ဆက်ခြင်းကဲ့သို့ အလားတူနည်းလမ်းဖြင့် လုပ်ဆောင်သည်- ထို .offset*ကော်လံအများအပြားကို ချေဖျက်ရန် မည်သည့်ကော်လံကိုမဆို ပေါင်းထည့်ပါ။

၄

၄ ထေရ ၄

၃ ထေရ ၃

၆ ထေရာ ၆

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

အရည် အသိုက်

Fluid grids သည် nesting ကို ကွဲပြားစွာ အသုံးပြုသည်- ကော်လံများ၏ nested အဆင့်တစ်ခုစီသည် ကော်လံ 12 ခုအထိ ပေါင်းသင့်သည်။ အဘယ်ကြောင့်ဆိုသော် fluid grid သည် အကျယ်များကို သတ်မှတ်ရန်အတွက် pixels မဟုတ်ဘဲ ရာခိုင်နှုန်းများကို အသုံးပြုသောကြောင့်ဖြစ်သည်။

အရည် ၁၂

အရည် ၆

<div class = "row-fluid" > 
  <div class = "span12" > 
    အရည် ၁၂
    <div class = "row-fluid" > 
      <div class = "span6" > 
        အရည် ၆
        <div class = "row-fluid" > 
          <div class = "span6" > အရည် 6 </div> 
          <div class = "span6" > အရည် 6 </div> 
        </div>
      </div>
      <div class = "span6" > အရည် 6 </div> 
    </div>
  </div>
</div>

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

လိုအပ် မှသာ ဘုံပုံသေ-အကျယ် (နှင့် ရွေးချယ်နိုင်သော တုံ့ပြန်မှု) အပြင်အဆင်ကို ပံ့ပိုးပေးသည် <div class="container">။

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

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

<div class="container-fluid">— အပလီကေးရှင်းများနှင့် စာရွက်စာတမ်းများအတွက် ကောင်းမွန်သော ကော်လံနှစ်ခုပါသော စာမျက်နှာတစ်ခု ဖန်တီးပါ ။

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

တုံ့ပြန်မှုအင်္ဂါရပ်များကို ဖွင့်ခြင်း။

သင့်စာရွက်စာတမ်း အတွင်းရှိ သင့်လျော်သော မက်တာတက်ဂ်နှင့် အပိုစတိုင်စာရွက် အပါအဝင် သင့်ပရောဂျက်တွင် တုံ့ပြန်မှုရှိသော CSS ကို ဖွင့် <head>ပါ။ အကယ်၍ သင်သည် စိတ်ကြိုက်ပြုလုပ်ခြင်းစာမျက်နှာမှ Bootstrap ကို ပြုစုပြီးပါက၊ သင်သည် meta tag ကိုသာ ထည့်သွင်းရန် လိုအပ်သည်။

<meta name = "viewport" content = "width=device-width၊ initial-scale=1.0" >  
<link href = "assets/css/bootstrap-responsive.css" rel = "stylesheet" >

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

တုံ့ပြန်မှု Bootstrap အကြောင်း

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

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

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

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

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

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

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

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

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

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

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

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

Responsive utilities test case

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

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

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

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

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

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

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

ကမ္ဘာလုံးဆိုင်ရာ ဆက်တင်များ