ငြမ်း

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 ၏ ပရောဂျက်တစ်ခုဖြစ်သည့် 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*

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

အဆင့် ၂

<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 grid ဖြင့် အသိုက်လုပ်ခြင်းသည် အနည်းငယ်ကွဲပြားသည်- nested ကော်လံအရေအတွက်သည် မိဘ၏ ကော်လံအရေအတွက်နှင့် မကိုက်ညီသင့်ပါ။ ယင်းအစား၊ အတန်းတစ်ခုစီသည် ပင်မကော်လံ၏ 100% နေရာယူသောကြောင့် nested ကော်လံအဆင့်တစ်ခုစီကို ပြန်လည်သတ်မှတ်ထားသည်။

အရည် ၁၂

အရည် ၆

<div class = "row-fluid" > 
  <div class = "span12" > 
    ကော်လံအဆင့် ၁
    <div class = "row-fluid" > 
      <div class = "span6" > အဆင့် 2 </div> 
      <div class = "span6" > အဆင့် 2 </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 and below	Fluid columns, no fixed widths
Phones	480px and below	Fluid columns, no fixed widths

/* Large desktop */
@media (min-width: 1200px) { ... }
 
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }
 
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }
 
/* Landscape phones and down */
@media (max-width: 480px) { ... }

Responsive utility classes

For faster mobile-friendly development, use these utility classes for showing and hiding content by device. Below is a table of the available classes and their effect on a given media query layout (labeled by device). They can be found in responsive.less.

Class	Phones 767px and below	Tablets 979px to 768px	Desktops Default
`.visible-phone`	Visible	Hidden	Hidden
`.visible-tablet`	Hidden	Visible	Hidden
`.visible-desktop`	Hidden	Hidden	Visible
`.hidden-phone`	Hidden	Visible	Visible
`.hidden-tablet`	Visible	Hidden	Visible
`.hidden-desktop`	Visible	Visible	Hidden

When to use

Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.

Responsive utilities test case

Resize your browser or load on different devices to test the above classes.

Visible on...

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

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

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

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

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

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