အထက်

ဝဲ

မှန်တယ်

အောက်တွင်

Twitter မှ Bootstrap

Bootstrap သည် ဝဘ်အက်ပ်များနှင့် ဝဘ်ဆိုက်များကို စတင်ဖန်တီးရန်အတွက် Twitter မှ ကိရိယာတန်ဆာပလာတစ်ခုဖြစ်သည်။
၎င်းတွင် စာစီစာရိုက်၊ ဖောင်များ၊ ခလုတ်များ၊ ဇယားများ၊ ဇယားကွက်များ၊ လမ်းညွှန်ချက်များနှင့် အခြားအရာများအတွက် အခြေခံ CSS နှင့် HTML ပါဝင်သည်။

Nerd သတိပေးချက်- Bootstrap ကို Less ဖြင့် တည်ဆောက်ထားပြီး ခေတ်မီဘရောက်ဆာများကို စိတ်ထဲရှိရှိ တံခါးအပြင်ဘက်တွင် အလုပ်လုပ်ရန် ဒီဇိုင်းထုတ်ထားသည်။

CSS ကို Hotlink လုပ်ပါ။

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

လျှော့သုံးပါ။

Less သုံးတဲ့ ပရိတ်သတ် ? ပြဿနာမရှိပါ၊ repo ကိုပွားပြီး ဤလိုင်းများကိုထည့်လိုက်ပါ-

GitHub တွင် Fork

Github ရှိတရားဝင် Bootstrap repo ဖြင့် ဒေါင်းလုဒ်လုပ်ခြင်း၊ လမ်းခွဲခြင်း၊ ဆွဲထုတ်ခြင်း၊ ဖိုင်ပြဿနာများနှင့် အခြားအရာများ။

GitHub တွင် Bootstrap »

လောလောဆယ် v1.3.0

သမိုင်း

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

dev.twitter.com တွင် ပိုမို ဖတ်ရှုရန် ›

Browser ပံ့ပိုးမှု

Bootstrap ကို Chrome၊ Safari၊ Internet Explorer နှင့် Firefox ကဲ့သို့သော ခေတ်မီဘရောက်ဆာများတွင် စမ်းသပ်ပြီး ပံ့ပိုးထားသည်။

Chrome၊ Safari၊ Internet Explorer နှင့် Firefox တို့တွင် စမ်းသပ်ပြီး ပံ့ပိုးထားသည်။

နောက်ဆုံးထွက် Safari
နောက်ဆုံးထွက် Google Chrome
Firefox 4+
Internet Explorer 7+
အော်ပရာ ၁၁

ဘာတွေပါဝင်လဲ။

Bootstrap သည် စုစည်းထားသော CSS၊ စုစည်းမထားသော၊ နှင့် ဥပမာ နမူနာပုံစံများဖြင့် ပြီးပြည့်စုံပါသည်။

Javascript ပလပ်အင်များ
မူရင်း .less ဖိုင်များအားလုံး
CSS ကို အပြည့်အ၀ စုစည်းပြီး အသေးစိပ် ပါ ။
စတိုင်လမ်းညွှန်စာရွက်စာတမ်းအပြည့်အစုံ
မတူညီသော အပြင်အဆင်များဖြင့် နမူနာစာမျက်နှာ သုံးခု

အမြန်စတင်ရန် ဥပမာများ

အမြန်ပုံစံများ လိုအပ်ပါသလား။ ကျွန်ုပ်တို့ စုစည်းထားသော ဤအခြေခံဥပမာများကို ကြည့်ပါ။

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

Bootstrap ၏ တစ်စိတ်တစ်ပိုင်းအဖြစ် ပံ့ပိုးပေးထားသည့် မူရင်းဂရစ်စနစ်သည် 940px ကျယ်ပြန့်သော 16-ကော်လံဇယားဖြစ်သည်။ ၎င်းသည် လူကြိုက်များသော 960 ဂရစ်စနစ်၏ အရသာတစ်ခုဖြစ်သော်လည်း ဘယ်ဘက်နှင့် ညာဘက်ရှိ အပိုအနားသတ်/အကွက်များ မပါဝင်ပါ။

နမူနာဇယားကွက်များ မှတ်သားခြင်း။

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

<div class = "row" > 
  <div class = "span6" > 
    ...
  </div>
  <div class = "span10" > 
    ...
  </div>
</div>

၁

၂

၃

၁

၄

၁/၃

၂/၃

၄

၆

၈

၅

၁၁

၁၆

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

၄

၈ ထေရ ၄

1/3 offset 2/3s

၄ ထေရ ၄

၅ ထေရ ၃

၁၀ ထေရီ ၆

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

.rowရှိပြီးသား ကော်လံတစ်ခုအတွင်း ဖန်တီးခြင်းဖြင့် လိုအပ်ပါက သင်၏အကြောင်းအရာကို စုစည်းပါ ။

nested ကော်လံများဥပမာ

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

အဆင့် ၂

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

သင်၏ကိုယ်ပိုင်ဇယားကွက်ကိုလှိမ့်ပါ။

Bootstrap တွင်ထည့်သွင်းထားသော default 940px grid စနစ်အား စိတ်ကြိုက်ပြင်ဆင်ရန်အတွက် လက်တစ်ဆုပ်စာ ကိန်းရှင်များဖြစ်သည်။ စိတ်ကြိုက်ပြင်ဆင်မှု အနည်းငယ်ဖြင့်၊ ကော်လံများ၏ အရွယ်အစား၊ ၎င်းတို့၏ ရေမြောင်းများနှင့် ၎င်းတို့နေထိုင်သည့် ကွန်တိန်နာကို ပြုပြင်နိုင်သည်။

ဇယားကွက်အတွင်းပိုင်း

လက်ရှိ grid စနစ်အား ပြုပြင်ရန် လိုအပ်သော ကိန်းရှင်များအားလုံးသည် variables.less.

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

ယခု စိတ်ကြိုက်လုပ်ရန်

ဇယားကွက်ကို မွမ်းမံခြင်းဆိုသည်မှာ ကိန်းရှင်သုံးခုကို @grid-*ပြောင်းလဲခြင်းနှင့် လျော့နည်းဖိုင်များကို ပြန်လည်ပေါင်းစည်းခြင်းဟု ဆိုလိုသည်။

Bootstrap သည် ကော်လံ 24 ခုအထိပါရှိသော grid system ကိုကိုင်တွယ်ရန်တပ်ဆင်ထားပါသည်။ ပုံသေမှာ 16 မျှသာဖြစ်သည်။ ဤသည်မှာ သင်၏ grid variable များကို 24-column grid တွင် စိတ်ကြိုက်ပုံပေါ်ပါမည်။

@gridColumns : 24 ;       
@gridColumnWidth : 20px ;   
@gridGutterWidth : 20px ;

ပြန်လည်စုစည်းပြီးသည်နှင့် သတ်မှတ်ပေးပါမည်။

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

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

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

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

min- နှင့် max-widths နှင့် ဘယ်ဘက် sidebar ပါရှိသော ပြောင်းလွယ်ပြင်လွယ်ရှိသော အရည် စာမျက်နှာတည်ဆောက်ပုံ။ အက်ပ်များနှင့် စာရွက်စာတမ်းများအတွက် ကောင်းမွန်သည်။

<body>
  <div class = "container-fluid" > 
    <div class = "sidebar" > 
      ...
    </div>
    <div class = "content" > 
      ...
    </div>
  </div>
</body>

ခေါင်းစဉ်များနှင့် မိတ္တူ

သင့်ဝဘ်စာမျက်နှာများကို တည်ဆောက်ခြင်းအတွက် စံစာစီစာကုံးအဆင့်တစ်ခု။

စာစီစာရိုက်ဇယားတစ်ခုလုံးသည် ကျွန်ုပ်တို့၏ variables.less ဖိုင်ရှိ Less variable နှစ်ခုအပေါ် အခြေခံသည်- @basefontနှင့် @baseline. ပထမတစ်ခုသည် တစ်လျှောက်လုံးအသုံးပြုသည့် အခြေခံဖောင့်အရွယ်အစားဖြစ်ပြီး ဒုတိယမှာ အခြေခံမျဉ်းအမြင့်ဖြစ်သည်။

ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့အမျိုးအစားအားလုံးနှင့် အခြားအရာအားလုံး၏အနားသတ်များ၊ အကွက်များနှင့် မျဉ်းကြောင်းအမြင့်များကို ဖန်တီးရန် ထိုကိန်းရှင်များနှင့် သင်္ချာအချို့ကို အသုံးပြုပါသည်။

h1။ ခေါင်းစဉ် ၁

h2။ ခေါင်းစီး ၂

h3။ ခေါင်းစဉ် ၃

h4။ ခေါင်းစဉ် ၄

h5။ ခေါင်းစီး ၅

h6။ ခေါင်းစီး ၆

နမူနာစာပိုဒ်

Nullam quis risus eget urna mollis ornare vel eu leo။ Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit ။

ဥပမာ ခေါင်းစီး တွင် ခေါင်းစဉ် ခွဲရှိသည်…

ထွေ။ ဒြပ်စင်

အလေးပေးမှု၊ လိပ်စာများနှင့် အတိုကောက်များကို အသုံးပြုခြင်း။

<strong> <em> <address> <abbr>

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

အလေးပေးတဂ်များ ( <strong>နှင့် <em>) ကို ၎င်း၏ပတ်ဝန်းကျင်မိတ္တူနှင့်ဆက်စပ်သော စကားလုံး သို့မဟုတ် စကားစုတစ်ခု၏ ထပ်လောင်းအရေးကြီးမှု သို့မဟုတ် အလေးပေးဖော်ပြရန်အတွက် အသုံးပြုသင့်သည်။ <strong>အရေးပါမှုနှင့် ဖိစီး မှုအလေးပေး <em>မှုအတွက် အသုံးပြု ပါ။

စာပိုဒ်တစ်ခုတွင် အလေးပေးသည်။

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus။ Maecenas faucibus mollis interdum Nulla vitae elit libero၊ pharetra augue။

မှတ်ချက်-<b> HTML5 တွင် တဂ်များ နှင့် အသုံးပြုရန် အဆင်ပြေသေး <i>ပြီး ၎င်းတို့ကို ရဲရင့်ခြင်းနှင့် စာလုံးစောင်းပုံစံ ပြုလုပ်ရန် မလိုအပ်ပါ (ထိုထက်ပို၍ အဓိပ္ပါယ်ရှိသော ဒြပ်စင်များရှိလျှင် ၎င်းကို အသုံးပြုပါ)။ <b>အပိုအရေးပါမှုကို ဖော်ပြခြင်းမရှိဘဲ စကားလုံးများ သို့မဟုတ် စကားစုများကို မီးမောင်းထိုးပြရန် ရည်ရွယ်ပြီး <i>အများအားဖြင့် အသံ၊ နည်းပညာဆိုင်ရာ အသုံးအနှုန်းများစသည်တို့အတွက် ဖြစ်သည်။

လိပ်စာများ

ဒြပ်စင်အား ၎င်း၏ အနီးဆုံး <address>ဘိုးဘေး သို့မဟုတ် လုပ်ငန်းတစ်ခုလုံးအတွက် ဆက်သွယ်ရန် အချက်အလက်အတွက် အသုံးပြုသည်။ ဤသည်မှာ ၎င်းကိုအသုံးပြုပုံဥပမာနှစ်ခုဖြစ်သည်။

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

အမည်အပြည့်အစုံ
[email protected]

မှတ်ချက်- အကြောင်းအရာကို မှန်ကန်စွာတည်ဆောက်ရန်အတွက် လိုင်းတစ်ခုစီမှ စာကြောင်းတစ်ကြောင်းစီ ( ) သို့မဟုတ် ဘလောက်အဆင့်တက်ဂ် (ဥပမာ ) <address>ဖြင့် အဆုံးသတ်ရပါမည် ။<br /><p>

အတိုကောက်များ

အတိုကောက်များနှင့် အတိုကောက်များအတွက်၊ <abbr>tag ကိုသုံးပါ ( HTML5<acronym> တွင် ကန့်ကွက်ထားသည် )။ အတိုကောက်ပုံစံကို တဂ်အတွင်းထည့်ကာ အမည်အပြည့်အစုံအတွက် ခေါင်းစဉ်တစ်ခု သတ်မှတ်ပါ။

ကိုးကားချက်များ

<blockquote> <p> <small>

ကိုးကားနည်း

blockquote တစ်ခုပါဝင်ရန်၊ <blockquote>ပတ်ပတ်လည် <p>နှင့် <small>tags များ။ <small>သင်၏အရင်းအမြစ်ကိုကိုးကားရန် element ကိုသုံးပါ၊ ၎င်းရှေ့တွင် em dash တစ်ခုရလိမ့် မည် —။

Lorem ipsum dolor sit amet, consectetur adipiscing elit ။ ကိန်းပြည့် posuere erat a ante venenatis dapibus posuere velit aliquet ။
ဒေါက်တာ Julius Hibbert

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit။ ကိန်းပြည့် posuere erat a ante venenatis dapibus posuere velit aliquet ။ </p>
  <small> ဒေါက်တာ Julius Hibbert </small>
</blockquote>

စာရင်းများ

Unordered`<ul>`

Lorem ipsum dolor ထိုင် amet
Consectetur adipiscing elit
Massa တွင် Integer molestie lorem
pretium nisl aliquet တွင် Facilisis
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean ထိုင် amet erat သီလရှင်
porttitor loem ကိုရယူပါ။

ပုံစံမဲ့`<ul.unstyled>`

Lorem ipsum dolor ထိုင် amet
Consectetur adipiscing elit
Massa တွင် Integer molestie lorem
pretium nisl aliquet တွင် Facilisis
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean ထိုင် amet erat သီလရှင်
porttitor loem ကိုရယူပါ။

အမိန့်ပေးတယ်။`<ol>`

Lorem ipsum dolor ထိုင် amet
Consectetur adipiscing elit
Massa တွင် Integer molestie lorem
pretium nisl aliquet တွင် Facilisis
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean ထိုင် amet erat သီလရှင်
porttitor loem ကိုရယူပါ။

ဖော်ပြချက်`dl`

ဖော်ပြချက်စာရင်းများ: ဖော်ပြချက်စာရင်းသည် ဝေါဟာရများကို သတ်မှတ်ရန်အတွက် ပြီးပြည့်စုံသည်။
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit။; Donec id elit non mi porta gravida at eget metus
Malesuada porta: Etiam porta sem malesuada magna mollis euismod။

ကုဒ်

<code> <pre>

ရိုးရှင်းသော tag နှစ်ခုဖြင့် သင့်ကုဒ်ကို ပုံစံထုတ်ပါ။ javascript မှတဆင့် ပို၍ အံ့သြဖွယ်ကောင်းစေရန်၊ Google ၏ code prettify library ထဲသို့ ချလိုက်ပြီး သင်သတ်မှတ်လိုက်ပါ။

ကုဒ်တင်ပြခြင်း။

ကုဒ်၊ ဘလောက်များ သို့မဟုတ် အတိုအထွာများကို မှန်ကန်သော tag တွင် ပတ်ထားရုံဖြင့် ပုံစံဖြင့် ပြသနိုင်သည်။ စာကြောင်းများစွာကို လွှမ်းခြုံထားသော ကုဒ်တုံးများအတွက်၊ <pre>ဒြပ်စင်ကို အသုံးပြုပါ။ အတွင်းကုဒ်အတွက်၊ <code>အစိတ်အပိုင်းကို အသုံးပြုပါ။

ဒြပ် ရလဒ်

<code> <html>ဤကဲ့သို့သော စာကြောင်းတစ်ကြောင်းတွင်၊ သင်၏ထုပ်ပိုးထားသောကုဒ်သည် ဤ ဒြပ်စင် နှင့်တူပါမည် ။

ဒြပ်	ရလဒ်
`<code>`	`<html>`ဤကဲ့သို့သော စာကြောင်းတစ်ကြောင်းတွင်၊ သင်၏ထုပ်ပိုးထားသောကုဒ်သည် ဤ ဒြပ်စင် နှင့်တူပါမည် ။
`<pre>`	<div> <h1>ခေါင်းစီး</h1> <p>ဒီမှာ တစ်ခုခု...</p> </div> မှတ်ချက်-`<pre>` tag များအတွင်း ကုဒ်ကို တတ်နိုင်သမျှ ဘယ်ဘက်နှင့် နီးကပ် အောင်ထားရန် သေချာပါစေ ။ tabs အားလုံးကို render လုပ်ပါလိမ့်မယ်။
`<pre class="prettyprint">`	google-code-prettify စာကြည့်တိုက်ကိုအသုံးပြုခြင်းဖြင့်၊ သင့်ကုဒ်တုံးများသည် အနည်းငယ်ကွဲပြားသော အမြင်ပုံစံနှင့် အလိုအလျောက် အထားအသိုကို မီးမောင်းထိုးပြခြင်းတို့ကို ရရှိမည်ဖြစ်သည်။ <div> <h1> ခေါင်းစီး </h1> <p> ဒီမှာ တစ်ခုခု... </p> </div> google-code-prettify ကိုဒေါင်းလုဒ်လုပ်ပြီး အသုံးပြုနည်းအတွက် readme ကိုကြည့်ပါ။

<pre>

<div>
  <h1>ခေါင်းစီး</h1>
  <p>ဒီမှာ တစ်ခုခု...</p>
</div>

မှတ်ချက်-<pre> tag များအတွင်း ကုဒ်ကို တတ်နိုင်သမျှ ဘယ်ဘက်နှင့် နီးကပ် အောင်ထားရန် သေချာပါစေ ။ tabs အားလုံးကို render လုပ်ပါလိမ့်မယ်။

<pre class="prettyprint">

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

<div> <h1> ခေါင်းစီး </h1> <p> ဒီမှာ တစ်ခုခု... </p> </div>

google-code-prettify ကိုဒေါင်းလုဒ်လုပ်ပြီး အသုံးပြုနည်းအတွက် readme ကိုကြည့်ပါ။

အညွှန်းများ

<span class="label">

သင့်ကိုယ်တွင်းစာသားရှိ မည်သည့်စကားစုကိုမဆို အာရုံစိုက်ပါ သို့မဟုတ် အလံပြပါ။

တံဆိပ်တပ်ပါ။

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

တံဆိပ်	ရလဒ်
`<span class="label">Default</span>`	ပုံသေ
`<span class="label success">New</span>`	အသစ်
`<span class="label warning">Warning</span>`	သတိပေးချက်
`<span class="label important">Important</span>`	အရေးကြီးတယ်။
`<span class="label notice">Notice</span>`	အသိပေးစာ

မီဒီယာဇယား

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

နမူနာပုံသေးများ

ပုံသေးများသည် မည်သည့်အရွယ်အစား ရှိ .media-gridနိုင်သည်၊ သို့သော် Built-in Bootstrap grid စနစ်သို့ တိုက်ရိုက်ပုံဖော်သည့်အခါ ၎င်းတို့သည် အကောင်းဆုံးအလုပ်လုပ်ပါသည်။ .span290၊ 210၊ နှင့် 330 ကဲ့သို့သော ရုပ်ပုံအကျယ်များသည် , .span4, နှင့် .span6ကော်လံအရွယ်အစား တို့ကို ညီမျှစေရန် အကွက်များ၏ pixels အနည်းငယ်နှင့် ပေါင်းစပ်ထားသည် ။

ကြီးမားသည်။

အလယ်အလတ်

သေးငယ်သည်။

Coding တွေလုပ်ကြတယ်။

Media Grids သည် အသုံးပြုရလွယ်ကူပြီး Markup ဘက်မှ ရိုးရှင်းပါသည်။ ၎င်းတို့၏ အတိုင်းအတာများသည် ပါဝင်သော ပုံများ၏ အရွယ်အစားပေါ်တွင် အခြေခံထားသည်။

<ul class = "media-grid" > 
  <li>
    <a href="#" > _ _ 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
  <li>
    <a href="#" > _ _ 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
</ul>

စားပွဲများတည်ဆောက်ခြင်း။

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

စားပွဲများသည် အလွန်ကောင်းသည်—အရာများစွာအတွက်။ သို့သော် ဇယားကြီးများသည် အသုံးဝင်၊ အရွယ်တင်၍ ဖတ်နိုင်သော (ကုဒ်အဆင့်တွင်) ရှိရန် မတ်ခ်အပ်နှစ်သက်မှု အနည်းငယ် လိုအပ်ပါသည်။ ဤသည်မှာ ကူညီရန် အကြံပြုချက်အချို့ဖြစ်သည်။

သင့်ကော်လံခေါင်းစီးများကို <thead>အထက်တန်းပုံစံ <thead>> <tr>> တွင် အမြဲထည့်ပါ <th>။

ကော်လံခေါင်းစီးများနှင့်ဆင်တူသည်၊ သင့်ဇယား၏ကိုယ်ထည်အကြောင်းအရာအားလုံးကို <tbody>သင့်အထက်တန်းအဆင့် အဖြစ် <tbody>> <tr>> ဖြင့် ပတ်ထားသင့်သည် <td>။

ဥပမာ- မူရင်းဇယားပုံစံများ

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

#	နာမည်	မျိုးနွယ်အမည်	ဘာသာစကား
၁	တချို့က	တစ်မျိုး	အင်္ဂလိပ်စာ
၂	ဂျိုး	ခြောက်ထုပ်	အင်္ဂလိပ်စာ
၃	စတူး	အံ	ကုဒ်

<စားပွဲ>
  ...
</table>

ဥပမာ- နို့ဆီစားပွဲ

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

#	နာမည်	မျိုးနွယ်အမည်	ဘာသာစကား
၁	တချို့က	တစ်မျိုး	အင်္ဂလိပ်စာ
၂	ဂျိုး	ခြောက်ထုပ်	အင်္ဂလိပ်စာ
၃	စတူး	အံ	ကုဒ်

ဥပမာ- နယ်ခြားထားသော ဇယား

ထောင့်များကိုဝိုင်းပြီး ဘက်ပေါင်းစုံမှ ဘောင်များထည့်ခြင်းဖြင့် သင့်စားပွဲများကို အနည်းငယ် ပေါ့ပါးစေပါသည်။

#	နာမည်	မျိုးနွယ်အမည်	ဘာသာစကား
၁	တချို့က	တစ်မျိုး	အင်္ဂလိပ်စာ
၂	ဂျိုး	ခြောက်ထုပ်	အင်္ဂလိပ်စာ
၃	စတူး	အံ	ကုဒ်

<table class = "bordered-table" > 
  ...
</table>

ဥပမာ- မြင်းကျားအစင်း

မြင်းကျားအစင်းကြောင်းများထည့်ခြင်းဖြင့် သင့်စားပွဲများနှင့် ဆန်းသစ်မှုအနည်းငယ်ရယူပါ— .zebra-stripedအတန်းကိုထည့်လိုက်ရုံပါပဲ။

#	နာမည်	မျိုးနွယ်အမည်	ဘာသာစကား
၁	တချို့က	တစ်မျိုး	အင်္ဂလိပ်စာ
၂	ဂျိုး	ခြောက်ထုပ်	အင်္ဂလိပ်စာ
၃	စတူး	အံ	ကုဒ်
ကော်လံ 4 တုံး
ကော်လံ ၂ ခုကို ချဲ့သည်။		ကော်လံ ၂ ခုကို ချဲ့သည်။

မှတ်ချက်- Zebra-striping သည် IE8 နှင့် အောက်ရှိ ဘရောင်ဇာအဟောင်းများအတွက် မရရှိနိုင်သော တိုးတက်မှုအဆင့်မြှင့်တင်မှုတစ်ခုဖြစ်သည်။

<table class = "မြင်းကျားအစင်း" > 
  ...
</table>

ဥပမာ- မြင်းကျားအစင်း w/ TableSorter.js

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

#	နာမည်	မျိုးနွယ်အမည်	ဘာသာစကား
၂	ဂျိုး	ခြောက်ထုပ်	အင်္ဂလိပ်စာ
၃	စတူး	အံ	ကုဒ်
၁	မင်းရဲ့	တစ်မျိုး	အင်္ဂလိပ်စာ

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<script > 
  $ ( function () { 
    $ ( "table#sortTableExample" )။ tablesorter ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<table class = "မြင်းကျားအစင်း" > 
  ...
</table>

အပေါ်ဘားပုံသေ

အဲဒါဘာလဲ

ကျွန်ုပ်တို့၏ topbar သည် ဝဘ်ဆိုက်၏ လိုဂို သို့မဟုတ် အမည်၊ အဓိက လမ်းညွှန်ချက်နှင့် ရှာဖွေမှုပုံစံကို ဆောင်ထားသည့် ပုံသေဘားတစ်ခုဖြစ်သည်။

စိတ်ကြိုက်ပြင်ဆင်နိုင်သည်။

အတွင်းဒြပ်စင်အားလုံးနှင့် topbar တစ်ခုလုံးကိုလည်း ရွေးချယ်နိုင်သည်။ လိုဂို/အမည်၊ nav၊ ရှာဖွေမှု၊ နှင့် ဒုတိယ nav- သို့မဟုတ် ၎င်းကို ပေါင်းစပ်ထည့်သွင်းရန် သင်ရွေးချယ်နိုင်သည်။

ဆွဲချခြင်းများ ပါဝင်သည်။

ပင်မလမ်းညွှန်မှု၏တစ်စိတ်တစ်ပိုင်းအနေဖြင့်၊ သင့် nav တွင် dropdowns များထည့်နိုင်သည့်စွမ်းရည်ကို ကျွန်ုပ်တို့ထည့်သွင်းထားပါသည်။ ပြီးမြောက်ပုံကိုကြည့်ရန် အပေါ်က ဒုတိယလမ်းကြောင်း (ညာဘက်ညှိထားသည်) ကိုကြည့်ပါ။ Dropdowns litags များသည် .activeလက်ရှိစာမျက်နှာရွေးချယ်မှုကို ပြသရန်အတွက်လည်း ပံ့ပိုးပေးပါသည်။

မှတ်ချက်- မည်သည့်စာမျက်နှာတွင်မဆို topbar ကိုအသုံးပြုသောအခါ၊ padding-top: 40px;သင်၏ body.

တက်ဘ်များနှင့် ဆေးပြားများ

ရိုးရှင်းသောအလယ်တန်းလမ်းပြမှုကို ဖန်တီးပါ <ul>။ သင့်လျော်သော အတန်းအစားကို ထည့်ခြင်းဖြင့် တက်ဘ်များ သို့မဟုတ် ဆေးများအကြား လဲလှယ်ပါ။

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

အခြေခံ tabs ဥပမာ

တဘ်များကို ပုံမှန်လမ်းကြောင်းပြမှုအဖြစ် (တူညီသောတဘ်တွင် ပြင်ပစာမျက်နှာများကို တင်နေသည်) သို့မဟုတ် အကြောင်းအရာအကန့်များကို လဲလှယ်ရန်အတွက် တက်ဘ်လုပ်နိုင်သော အကြောင်းအရာဧရိယာများအဖြစ် အသုံးပြုနိုင်သည်။ ကျွန်ုပ်တို့တွင် နောက်ဆုံးကို ပေါင်းစည်းရန် အသုံးပြုနိုင် သည့် tabs plugin တစ်ခုရှိသည် ။

<ul class = "tabs" > 
  <li class = "active" > <a href="#"> အိမ် </a> </li >  
  <li><a href="#"> ပရိုဖိုင် </a> < /li > 
  <li><a href="#"> မက်ဆေ့ချ် များ </a> </li > 
  <li><a href="#"> ဆက် တင် များ </a></li > 
  <li><a href="#"> ဆက်သွယ်ရန် </a> < /li > 
</ul>

အခြေခံဆေးများ ဥပမာ

<ul class = "ဆေးပြား" > 
  <li class = "active" > <a href="#"> အိမ် </a> </li >  
  <li><a href="#"> ပရိုဖိုင် </a> < /li > 
  <li><a href="#"> မက်ဆေ့ချ် များ </a> </li > 
  <li><a href="#"> ဆက် တင် များ </a></li > 
  <li><a href="#"> ဆက်သွယ်ရန် </a> < /li > 
</ul>

Breadcrumbs

Breadcrumb လမ်းညွှန်ချက်ကို အသုံးပြုသူများအား အက်ပ်တစ်ခု သို့မဟုတ် ဝဘ်ဆိုက်တစ်ခုအတွင်း ၎င်းတို့ရှိနေသည့်နေရာကို ပြသရန် နည်းလမ်းတစ်ခုအနေဖြင့် အသုံးပြုသော်လည်း အဓိကလမ်းညွှန်ချက်အတွက် မဟုတ်ပါ။

<ul class = "breadcrumb" > 
  <li><a href="#"> အိမ် </a> < span class = "divider" > / < / span > </li>   
  <li><a href="#"> အလယ် စာမျက်နှာ </a> < span class = "divider" > / </span > </li>   
  <li><a href="#"> နောက်တစ်ခု </a> < span class = "divider" > / < /span > </li>   
  <li class = "active" > သင်သည် ဤနေရာတွင် ရှိနေသည် </li> 
</ul>

Pagination

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

<div class = "pagination" > 
  <ul>
    <li class = "prev disabled" ><a href   > > &larr ; ယခင် </a></li>
    <li class = "active" ><a href =   > 1 </a></li >
    <li><a href =  2 < /li >
    <li><a href =  3 < /li >
    <li><a href =  4 < /li >
    <li><a href =  5 < /li >
    <li class = "next" ><a href = "#"   > Next &rarr</a></li>
  </ul>
</div>

အခြေခံသတိပေးချက်များ

.alert-message

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

javascript ကိုရယူပါ »

သန့်ရှင်းသော guacamole သင့်ကိုယ်သင် အကောင်းဆုံးစစ်ဆေးပါ၊ သင် အရမ်းကြည့်ကောင်း ပုံမပေါ်ပါ။ ပုံမပေါ်ပါ ။

အိုး! အဲဒါကို ပြောင်းပြီး ထပ်စမ်းကြည့်ပါ ။

ကောင်းစွာပြီးဆုံးသည်! ဤ သတိပေးစာကို သင်အောင်မြင်စွာ ဖတ်ပြီးပါပြီ။

ကြိုတင်အသိပေးသည်! ၎င်းသည် သင့်အာရုံစူးစိုက်မှုကို လိုအပ်သည့် သတိပေးချက်တစ်ခုဖြစ်သော်လည်း ၎င်းသည် ကြီးမားသောဦးစားပေး မဟုတ်သေးပါ။

နမူနာကုဒ်

<div class = "alert-message သတိပေးချက်" > 
  <a class="close" href="#"> × </a> _ _ _ _ _  
  <p><strong> Holy guacamole! </strong> အကောင်းဆုံးကတော့ သင့်ကိုယ်သင် အရမ်းကြည့်ကောင်းနေမှာ မဟုတ်ပါဘူး။ </p>
</div>

မက်ဆေ့ချ်များကို ပိတ်ပါ။

.alert-message.block-message

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

javascript ကိုရယူပါ »

သန့်ရှင်းသော guacamole ဒါက သတိပေးချက်ပါ။ သင့်ကိုယ်သင် အကောင်းဆုံးစစ်ဆေးပါ၊ သင်အရမ်းကြည့်ကောင်းနေမှာမဟုတ်ပါဘူး။ Nulla vitae elit libero၊ pharetra augue။ Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

ဒါကို အရေးယူပါ။ ဒါမှမဟုတ် ဒီလိုလုပ်ပါ။

အိုး! မင်းမှာ အမှားတစ်ခု ရှိတယ်။ အဲဒါကို ပြောင်းပြီး ထပ်စမ်းကြည့်ပါ ။

Duis mollis သည် လူမဟုတ်သော luctus ဖြစ်သည်။
Nisi erat porttitor ligula
Eget lacinia odio sem nec elit

ဒါကို အရေးယူပါ။ ဒါမှမဟုတ် ဒီလိုလုပ်ပါ။

ကောင်းစွာပြီးဆုံးသည်! ဤသတိပေးစာကို သင်အောင်မြင်စွာ ဖတ်ပြီးပါပြီ။ Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum

ဒါကို အရေးယူပါ။ ဒါမှမဟုတ် ဒီလိုလုပ်ပါ။

နမူနာကုဒ်

<div class = "alert-message block-message warning" > 
  <a class="close" href="#"> × </a> _ _ _ _ _  
  <p><strong> Holy guacamole! ဒါက သတိပေးချက်ပါ။ </strong> အကောင်းဆုံးကတော့ သင့်ကိုယ်သင် အရမ်းကြည့်ကောင်းနေမှာ မဟုတ်ပါဘူး။ Nulla vitae elit libero၊ pharetra augue။ Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
  <div class = "alert-actions" > 
    <a class="btn small" href="#"> ဒီ လုပ်ဆောင်ချက်ကို လုပ် ပါ </a> <a class="btn small" href="#"> ဒါမှ ဒါ လုပ် ပါ </a> _ _     
  </div>
</div>

မော်ဒယ်များ

Modals—ဒိုင်ယာလော့ဂ်များ သို့မဟုတ် အလင်းသေတ္တာများ—သည် နောက်ခံအကြောင်းအရာကို ထိန်းသိမ်းထားရန် အရေးကြီးသော အခြေအနေများတွင် ဆက်စပ်လုပ်ဆောင်မှုများအတွက် ကောင်းမွန်ပါသည်။

javascript ကိုရယူပါ »

Tooltips

Twipsies သည် ရှုပ်ထွေးသောအသုံးပြုသူများကို ကူညီပေးပြီး လမ်းကြောင်းမှန်သို့ညွှန်ပြရန်အတွက် အလွန်အသုံးဝင်ပါသည်။

javascript ကိုရယူပါ »

Lorem ipsum dollar sit amet illo အမှား ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus အကျိုးဆက် ရလဒ်, aut natus illo voluptatem odit perpiciatis laudantium rem dolorupquetam. Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo sit fugit quasi fugit, totam doloremque unde sunt sed dicta quae voltamo accusant .

Popovers

အပြင်အဆင်ကို မထိခိုက်စေဘဲ စာမျက်နှာတစ်ခုသို့ စာသားအခွဲအချက်အလက်များကို ပေးဆောင်ရန် popovers ကိုသုံးပါ။

javascript ကိုရယူပါ »

စတင်အသုံးပြုခြင်း

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

javascript docs ကိုကြည့်ပါ »

ဘာတွေပါဝင်လဲ။

jQuery နှင့် Ender နှင့် အလုပ်လုပ်သော စိတ်ကြိုက်ပလပ်အင်အသစ်များဖြင့် Bootstrap ၏အဓိကအစိတ်အပိုင်းအချို့ကို အသက်ဝင်စေ ပါသည်။ သင်၏ သီးခြား ဖွံ့ဖြိုးတိုးတက်မှု လိုအပ်ချက်များနှင့် ကိုက်ညီစေရန် ၎င်းတို့အား တိုးချဲ့ပြင်ဆင်ရန် သင့်အား ကျွန်ုပ်တို့ တိုက်တွန်းပါသည်။

ဖို	ဖော်ပြချက်
bootstrap-modal.js	ကျွန်ုပ်တို့၏ Modal ပလပ်အင်သည် ရိုးရာ modal js ပလပ်အင်အတွက် အလွန် ပါးလွှာပါသည်။ twitter တွင် ကျွန်ုပ်တို့လိုအပ်သည့် ဗလာမပါသော လုပ်ဆောင်နိုင်စွမ်းများကိုသာ ထည့်သွင်းရန် အထူးဂရုစိုက်ခဲ့သည်။
bootstrap-alerts.js	သတိပေးချက်ပလပ်အင်သည် သတိပေးချက်များတွင် အနီးကပ်လုပ်ဆောင်နိုင်စွမ်းကို ထည့်သွင်းရန်အတွက် အလွန်သေးငယ်သော အတန်းတစ်ခုဖြစ်သည်။
bootstrap-dropdown.js	ဤပလပ်အင်သည် bootstrap topbar သို့မဟုတ် တဘ်ထည့်ထားသော လမ်းကြောင်းများသို့ dropdown အပြန်အလှန် ပေါင်းထည့်ရန်အတွက် ဖြစ်သည်။
bootstrap-scrollspy.js	ScrollSpy ပလပ်အင်သည် bootstrap topbar သို့ scroll position ကို အခြေခံ၍ အလိုအလျောက် အဆင့်မြှင့်တင်ခြင်း nav ကို ပေါင်းထည့်ရန်အတွက် ဖြစ်သည်။
bootstrap-buttons.js	ScrollSpy ပလပ်အင်သည် bootstrap topbar သို့ scroll position ကို အခြေခံ၍ အလိုအလျောက် အဆင့်မြှင့်တင်ခြင်း nav ကို ပေါင်းထည့်ရန်အတွက် ဖြစ်သည်။
bootstrap-tabs.js	ဤပလပ်အင်သည် စက်ဘီးစီးခြင်းအတွက် စက်ဘီးစီးခြင်းအတွက် လျင်မြန်သော၊ ပြောင်းလဲနေသော တက်ဘ်နှင့် ဆေးပြားလုပ်ဆောင်ချက်ကို ပေါင်းထည့်ပါသည်။
bootstrap-twipsy.js	Jason Frame မှရေးသားသောအလွန်ကောင်းမွန်သော jQuery.tipsy plugin ကိုအခြေခံထားသည်။ twipsy သည် ပုံများကို အားမကိုးဘဲ၊ ကာတွန်းများအတွက် css3 နှင့် ဒေသဆိုင်ရာ ခေါင်းစဉ်သိုလှောင်မှုအတွက် data-attribute များကို အသုံးပြုသည့် အဆင့်မြှင့်ဗားရှင်းတစ်ခုဖြစ်သည်။
bootstrap-popover.js	popover ပလပ်အင်သည် သင့်အပလီကေးရှင်းသို့ popover များထည့်ရန်အတွက် ရိုးရှင်းသောအင်တာဖေ့စ်ကို ပံ့ပိုးပေးသည်။ ၎င်းသည် boostrap-twipsy.js ပလပ်အင်ကို တိုးချဲ့ထားသောကြောင့် သင့်ပရောဂျက်တွင် popovers များပါ၀င်သည့်အခါ ထိုဖိုင်ကိုလည်း ဖမ်းယူရန်သေချာပါစေ။

javascript လိုအပ်ပါသလား။

မဟုတ်ဘူး! Bootstrap ကို CSS စာကြည့်တိုက်အဖြစ် ဦးဆုံးနှင့် အစောဆုံး ဒီဇိုင်းထုတ်ထားပါသည်။ ဤ javascript သည် ပါဝင်သောစတိုင်များထိပ်တွင် အခြေခံအပြန်အလှန်အကျိုးသက်ရောက်သောအလွှာကို ပေးဆောင်သည်။

သို့သော်၊ javascript လိုအပ်သူများအတွက်၊ Bootstrap နှင့် javascript ပေါင်းစပ်နည်းကို နားလည်စေရန်နှင့် အခြေခံလုပ်ဆောင်နိုင်စွမ်းအတွက် ချက်ချင်းပေါ့ပါးသော ရွေးချယ်မှုတစ်ခုပေးရန် သင့်အား ချက်ခြင်းပေးနိုင်ရန် ကျွန်ုပ်တို့သည် အထက်တွင်ရှိသော plugin များကို ပံ့ပိုးပေးထားပါသည်။

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

Bootstrap ကို ပိုမိုမြန်ဆန်၍ လွယ်ကူသော ဝဘ်ဖွံ့ဖြိုးတိုးတက်မှုအတွက် Less နှင့် တွဲဖက်အသုံးပြုရန်အတွက် ရောစပ်ပြီး ကိန်းရှင်များပါသည့် ပွင့်လင်းအရင်းအမြစ် အစု အဝေးမှ Preboot မှ တည်ဆောက်ထားပါသည်။

Bootstrap တွင် Preboot ကိုကျွန်ုပ်တို့အသုံးပြုပုံနှင့် သင့်နောက်ပရောဂျက်တွင် Less ကို run ရန်ရွေးချယ်သင့်ပါက ၎င်းကို မည်သို့အသုံးပြုနိုင်ကြောင်း စစ်ဆေးကြည့်ပါ။

အသုံးပြုနည်း

သင့်ဘရောက်ဆာရှိ javascript မှတစ်ဆင့် CSS တွင် အနည်းအကျဉ်း၊ ရောနှောပါဝင်မှုများနှင့် CSS တွင် nesting ပြုလုပ်ရန် Bootstrap ၏နည်းသော variable များကို အပြည့်အဝအသုံးပြုရန် ဤရွေးချယ်မှုကို အသုံးပြုပါ။

<link rel = "stylesheet/less" href = "less/bootstrap.less" media = "all" />    
<script src = "js/less-1.1.3.min.js" ></script>

.js ဖြေရှင်းချက်ကို မခံစားရဘူးလား။ Less Mac အက်ပ်ကို စမ်းသုံးကြည့်ပါ သို့မဟုတ် သင့်ကုဒ်ကို အသုံးပြုသည့်အခါ စုစည်းရန် Node.js ကို အသုံးပြုပါ။

ဘာတွေပါဝင်လဲ။

ဤသည်မှာ Bootstrap ၏တစ်စိတ်တစ်ပိုင်းအနေဖြင့် Twitter Bootstrap တွင်ပါ ၀ င်သည့်အချက်အချို့ဖြစ်သည်။ ဒေါင်းလုဒ်လုပ်ပြီး ပိုမိုလေ့လာရန် Bootstrap ဝဘ်ဆိုက် သို့မဟုတ် Github ပရောဂျက်စာမျက်နှာသို့ သွားပါ။

ကိန်းရှင်များ

Less ရှိ Variable များသည် သင်၏ CSS ခေါင်းကိုက်ခြင်းကို အခမဲ့ ထိန်းသိမ်းရန်နှင့် အဆင့်မြှင့်တင်ခြင်းအတွက် ပြီးပြည့်စုံပါသည်။ အရောင်တန်ဖိုး သို့မဟုတ် မကြာခဏအသုံးပြုသည့်တန်ဖိုးကို ပြောင်းလဲလိုပါက ၎င်းကို တစ်နေရာတည်းတွင် အပ်ဒိတ်လုပ်ပြီး သင်သတ်မှတ်လိုက်ပါ။

//လင့်များ
@linkColor : #8b59c2;         
@linkColorHover :     darken ( @linkColor , 10 ); 
 
// မီးခိုးရောင်
@အနက်ရောင် : #000;             
@grayDark : အလင်း (           @black , 25 %); 
@gray :               lighten ( @black , 50 % ); 
@grayLight : အလင်း (          @black , 70 %); 
@grayLighter : အလင်း (        @black , 90 %); 
@အဖြူ : #ffff ;             
 
// အသံထွက်အရောင်များ
@blue : #08b5fb;              
@green : #46a546;             
@red : #9d261d;               
@yellow : #ffc40d;            
@လိမ္မော်ရောင် : #f89406 ;            
@ပန်းရောင် : #c3325f ;              
@ခရမ်းရောင် : #7a43b6 ;            
 
// အခြေခံဇယားကွက်
@basefont : 13px ;          
@baseline : 18px ;

မှတ်ချက်ပေးခြင်း

/* ... */Less သည် CSS ၏ ပုံမှန်အထားအ သို အပြင် အခြားမှတ်ချက်ပေးသည့်ပုံစံကိုလည်း ပေးသည် ။

// ဒါက မှတ်ချက်
/*ဒါက comment တစ်ခုပါ*/

wazoo ကို ရောနှောလိုက်ပါ။

Mixins သည် အခြေခံအားဖြင့် CSS အတွက် အစိတ်အပိုင်းများ သို့မဟုတ် တစ်စိတ်တစ်ပိုင်းပါဝင်ပြီး ကုဒ်တစ်ခုအား တစ်ခုအဖြစ် ပေါင်းစပ်နိုင်စေပါသည်။ ၎င်းတို့သည် ရောင်းသူရှေ့ဆက်သော ဂုဏ်သတ္တိများ box-shadow၊ ဘရောက်ဆာဖြတ်ကျော် gradients၊ font stacks နှင့် အခြားအရာများကဲ့သို့သော ရောင်းချသူများအတွက် အလွန်ကောင်းမွန်ပါသည်။ အောက်တွင် Bootstrap ပါ၀င်သော mixins နမူနာတစ်ခုဖြစ်သည်။

ဖောင့်အတွဲများ

#ဖောင့် {
  . အတိုကောက် ( @weight : ပုံမှန် ၊ @size : 14px ၊ @lineHeight : 20px ) {     
    ဖောင့ ် အရွယ်အစား : @size ; 
    ဖောင့ ် - အလေးချိန် : @weight ; 
    လိုင်း အ မြင့် : @lineHeight ; 
  }
  . sans - serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    ဖောင့ ် - မိသားစု : "Helvetica Neue" ၊ Helvetica ၊ Arial ၊ sans - serif ;   
    ဖောင့ ် အရွယ်အစား : @size ; 
    ဖောင့ ် - အလေးချိန် : @weight ; 
    လိုင်း အ မြင့် : @lineHeight ; 
  }
  ...
}

အဆင့်အတန်းများ

#gradient {
  ...
  . ဒေါင်လိုက် ( @startColor : #555 ၊ @endColor : #333 ) { 
    နောက်ခံအရောင် - @endColor ; _ _ 
    နောက်ခံ - repeat : repeat - x ;
    နောက်ခံပုံ - khtml - gradient ( linear ၊ ဘယ်ဘက်အပေါ် ၊ ဘယ်ဘက်အောက်ခြေ ၊ မှ ( @startColor ) ) မှ ( @endColor ) ) ; // Konqueror   
    နောက်ခံပုံ - moz - linear - gradient ( @startColor , @endColor ) ; _ _ // FF 3.6+   
    နောက်ခံပုံ - ms - linear - gradient ( @startColor , @endColor ) ; _ _ // IE10   
    နောက်ခံပုံ - webkit - gradient ( linear ၊ ဘယ်ဘက်အပေါ် ၊ ဘယ်ဘက် အောက်ခြေ ၊ color - stop ( 0 %, @startColor ), color - stop ( 100 % , @endColor ) ) ; // Safari 4+၊ Chrome 2+    
    နောက်ခံပုံ - webkit - linear - gradient ( @startColor , @endColor ) ; _ _ // Safari 5.1+၊ Chrome 10+   
    နောက်ခံပုံ - o - linear - gradient ( @startColor , @endColor ) ; _ _ // Opera 11.10   
    နောက်ခံပုံ - linear - gradient ( @startColor , @endColor ) ; _ // စံ  
  }
  ...
}

စစ်ဆင်ရေး

အောက်ဖော်ပြပါကဲ့သို့ ပြောင်းလွယ်ပြင်လွယ်နှင့် အစွမ်းထက်သော ရောနှောဖန်တီးရန်အတွက် စိတ်ကူးယဉ်ဆန်ဆန် သင်္ချာအချို့ကို လုပ်ဆောင်ပါ။

// ဂရစ်တဒ်
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
@siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));                 
 
// ကော်လံအချို့လုပ်ပါ။
. ကော်လံများ ( @columnSpan : 1 ) {  
  အကျယ် : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
}

Compiling နည်းတယ်။

/lib/ တွင် ဖိုင်များကို မွမ်းမံပြင်ဆင်ပြီးနောက် .less၊ bootstrap-*.*.*.css နှင့် bootstrap-*.*.*.min.css ဖိုင်များကို ပြန်လည်ထုတ်ပေးရန်အတွက် ၎င်းတို့ကို ပြန်လည်ပေါင်းစပ်ရန် လိုအပ်မည်ဖြစ်သည်။ အကယ်၍ သင်သည် GitHub သို့ ဆွဲတင်တောင်းဆိုမှုတစ်ခုကို တင်သွင်းနေပါက၊ သင်သည် အမြဲတမ်း ပြန်လည်စုစည်းရမည်ဖြစ်ပါသည်။

ပြုစုနည်းများ

နည်းလမ်း	ခြေလှမ်းများ
makefile နှင့်အတူ Node	အောက်ပါ command ကို run ခြင်းဖြင့် အောက်ဖော်ပြပါ command line compiler ကို npm ဖြင့် install လုပ်ပါ။ $ npm install lessc `make`ထည့်သွင်းပြီး သည်နှင့် သင်၏ bootstrap directory ၏ root မှ run ပြီး အားလုံးပြီးသွားပါပြီ။ ထို့အပြင်၊ အကယ်၍ သင့်တွင် watchr ကို ထည့်သွင်းထားပါက၊ သင်သည် `make watch`bootstrap lib တွင် ဖိုင်တစ်ခုကို တည်းဖြတ်သည့်အခါတိုင်း bootstrap ကို အလိုအလျောက် ပြန်လည်တည်ဆောက်နိုင်သည် (၎င်းသည် မလိုအပ်ပါ၊ အဆင်ပြေသောနည်းလမ်းတစ်ခုသာဖြစ်သည်)။
Javascript	နောက်ဆုံးထွက် Less.js ကို ဒေါင်းလုဒ်လုပ်ပြီး ၎င်း သို့သွားသည့်လမ်းကြောင်း (နှင့် Bootstrap) တွင် `head`. <link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script> .less ဖိုင်များကို ပြန်လည်စုစည်းရန် ၎င်းတို့ကို သိမ်းဆည်းပြီး သင့်စာမျက်နှာကို ပြန်လည်စတင်ပါ။ Less.js သည် ၎င်းတို့ကို စုစည်းပြီး စက်တွင်းသိုလှောင်မှုတွင် သိမ်းဆည်းထားသည်။
Command line	သင့်တွင် နည်းသော command line tool ကို ထည့်သွင်းထားပြီးဖြစ်ပါက၊ အောက်ပါ command ကို ရိုးရိုးရှင်းရှင်း ဖွင့်ပါ။ $lessc ./lib/bootstrap.less > bootstrap.css `--compress`အကယ်၍ သင်သည် အချို့သော bytes ကို သိမ်းဆည်းရန် ကြိုးစားနေပါက ထို command တွင် ထည့်သွင်းရန် သေချာပါစေ ။
Mac app လျှော့ပါ။	တရားဝင်မဟုတ်သော Mac အက်ပ် သည် .less ဖိုင်များ၏ လမ်းညွှန်များကို ကြည့်ရှုပြီး .less ဖိုင်ကို သိမ်းဆည်းပြီးတိုင်း ကုဒ်ကို ပြည်တွင်းဖိုင်များသို့ စုစည်းပေးပါသည်။ သင်နှစ်သက်ပါက အလိုအလျောက် အသေးစိပ်ပြုလုပ်ရန် အက်ပ်ရှိ စိတ်ကြိုက်ရွေးချယ်မှုများနှင့် စုစည်းထားသောဖိုင်များ အဆုံးထိ မည်သည့်လမ်းညွှန်ချက်တွင် ပါဝင်နိုင်သည်။

CSS ကို Hotlink လုပ်ပါ။

လျှော့သုံးပါ။

GitHub တွင် Fork

Bootstrap အတိုချုံးမှတ်တမ်းအကြောင်း၊ ဘရောက်ဆာပံ့ပိုးမှုနှင့် အခြားအရာ များအကြောင်း

သမိုင်း

Browser ပံ့ပိုးမှု

ဘာတွေပါဝင်လဲ။

အမြန်စတင်ရန် ဥပမာများ

Grid စနစ်သည် ပုံမှန် 940px ကို ရော့ချပါ သို့မဟုတ် သင့်ကိုယ်ပိုင် လှိမ့်ပါ။

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

နမူနာဇယားကွက်များ မှတ်သားခြင်း။

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

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

nested ကော်လံများဥပမာ

သင်၏ကိုယ်ပိုင်ဇယားကွက်ကိုလှိမ့်ပါ။

ဇယားကွက်အတွင်းပိုင်း

ယခု စိတ်ကြိုက်လုပ်ရန်

ဝဘ်စာမျက်နှာများဖန်တီးရန် Layouts အခြေခံ နမူနာပုံစံများ

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

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

စာစီစာရိုက် ခေါင်းစဉ်များ၊ စာပိုဒ်များ၊ စာရင်းများနှင့် အခြား inline အမျိုးအစား အစိတ်အပိုင်းများ

ခေါင်းစဉ်များနှင့် မိတ္တူ

h1။ ခေါင်းစဉ် ၁

h2။ ခေါင်းစီး ၂

h3။ ခေါင်းစဉ် ၃

h4။ ခေါင်းစဉ် ၄

h5။ ခေါင်းစီး ၅

h6။ ခေါင်းစီး ၆

နမူနာစာပိုဒ်

ဥပမာ ခေါင်းစီး တွင် ခေါင်းစဉ် ခွဲရှိသည်…

ထွေ။ ဒြပ်စင်

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

စာပိုဒ်တစ်ခုတွင် အလေးပေးသည်။

လိပ်စာများ

အတိုကောက်များ

ကိုးကားချက်များ

ကိုးကားနည်း

စာရင်းများ

Unordered<ul>

ပုံစံမဲ့<ul.unstyled>

အမိန့်ပေးတယ်။<ol>

ဖော်ပြချက်dl

ကုဒ်

ကုဒ်တင်ပြခြင်း။

အညွှန်းများ

တံဆိပ်တပ်ပါ။

မီဒီယာ ရုပ်ပုံများနှင့် ဗီဒီယိုများကို ပြသခြင်း။

မီဒီယာဇယား

နမူနာပုံသေးများ

ကြီးမားသည်။

အလယ်အလတ်

သေးငယ်သည်။

Coding တွေလုပ်ကြတယ်။

Tables For၊ သင် ခန့်မှန်းထားသည်၊ ဇယားဒေတာ

စားပွဲများတည်ဆောက်ခြင်း။

ဥပမာ- မူရင်းဇယားပုံစံများ

ဥပမာ- နို့ဆီစားပွဲ

ဥပမာ- နယ်ခြားထားသော ဇယား

ဥပမာ- မြင်းကျားအစင်း

ဥပမာ- မြင်းကျားအစင်း w/ TableSorter.js

ပုံစံများ

မူရင်းစတိုင်များ

ဖွဲ့ထားသောပုံစံများ

ပုံစံအကွက်အရွယ်အစားများ

ခလုတ်များ

ဥပမာ ခလုတ်များ

အရွယ်အစားအမျိုးမျိုး

မသန်စွမ်းသောအခြေအနေ

လင့်များ

ခလုတ်များ

ညွှန်း

အပေါ်ဘားပုံသေ

စီမံကိန်းအမည်

အဲဒါဘာလဲ

စိတ်ကြိုက်ပြင်ဆင်နိုင်သည်။

ဆွဲချခြင်းများ ပါဝင်သည်။

တက်ဘ်များနှင့် ဆေးပြားများ

အခြေခံ tabs ဥပမာ

အခြေခံဆေးများ ဥပမာ

Breadcrumbs

Unordered`<ul>`

ပုံစံမဲ့`<ul.unstyled>`

အမိန့်ပေးတယ်။`<ol>`

ဖော်ပြချက်`dl`